带有用于搜索的文本框的 DataTemplate答案

【问题标题】：DataTemplate with textbox for search带有用于搜索的文本框的 DataTemplate
【发布时间】：2020-06-15 19:03:43
【问题描述】：

我使用MasterDetailsView 控件。它具有MasterHeaderTemplate 属性。我想添加一个TextBox 以实现项目搜索。我不明白该怎么做。因为DataTemplate 没有所需的属性。这是UWP 应用程序，不要WPF。

TextBlock 通过MasterHeader 属性获得值。但是其他的怎么绑定。例如，占位符文本、事件处理程序。

MasterHeader="{x:Bind ViewModel.Title}"
MasterHeaderTemplate="{StaticResource MasterHeaderTemplate}"

<DataTemplate
    x:Key="MasterHeaderTemplate">
    <StackPanel>
        <TextBlock
            Text="{Binding}"
            Style="{StaticResource HeaderStyle}" />
        <TextBox
            PlaceholderText="{???}" />
    </StackPanel>
</DataTemplate>

【问题讨论】：

你想绑定占位符文本什么？只是 ViewModel 上的普通属性？你能不做 {Binding DataContext.PlaceholderTextProperty} 吗？
@RyanThomas Inside DataTemplate 不要访问数据上下文或我的视图模型。
我认为您必须将使用 DataTemplate 的控件绑定到一个同时具有文本值和占位符值的接口。否则，您将不得不盲目地向上控制链，这可能不是最好的主意。

标签： c# mvvm data-binding uwp datatemplate

【解决方案1】：

您可以使用Binding.ElementName 属性来设置您的MasterDetailsView 的名称，以用作Binding 的绑定源。然后您可以访问其 DataContext（例如您的 ViewModel）并将 ViewModel 中的属性与 PlaceholderText 绑定。例如：

.xaml:

<Page.Resources>
    <DataTemplate x:Key="MasterHeaderTemplate">
        <StackPanel>
            <TextBlock
        Text="{Binding}" />
            <TextBox PlaceholderText="{Binding ElementName=MyDetailView,Path=DataContext.PlaceholderText}"/>
        </StackPanel>
    </DataTemplate>
</Page.Resources>

<Grid>
    <controls:MasterDetailsView
      ItemsSource="{Binding Lists}"
      x:Name="MyDetailView" MasterHeader="{Binding Title}" MasterHeaderTemplate="{StaticResource MasterHeaderTemplate}">
        <controls:MasterDetailsView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}"></TextBlock>
            </DataTemplate>
        </controls:MasterDetailsView.ItemTemplate>
    </controls:MasterDetailsView>
</Grid>

.cs:

public MainPage()
{
    this.InitializeComponent();
    ViewModel = new MyViewModel();
    ViewModel.Title = "Header";
    ViewModel.PlaceholderText = "MyPlaceholderText";

    this.DataContext = ViewModel;
}
private MyViewModel ViewModel { get; set; }

【讨论】：