Question

我有一个Windows 8.1商店应用程序，我无法弄清楚如何获取datacontext访问我的viewmodel的relaycommand。 xaml一直工作到弹出窗口然后失败。因此，内容为“buttonWorks”的按钮成功从rootGrid元素获取绑定，并在viewmodel上调用该命令。但弹出窗口右下方的按钮却没有。为什么呢？

要举例说明绑定问题，请使用“拆分应用”模板创建新的应用商店应用。然后将一个弹出按钮添加到SplitPage并将文本框文本绑定到itemtitle元素。绑定不会填充弹出文本框。代码段如下所示：

<Image Source="{Binding ImagePath}" Grid.Row="1" Margin="0,0,20,0" Width="180" Height="180" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
    <StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
        <TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}"/>
        <TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Subtitle}" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <Button Content="Update">
                <Button.Flyout>
                    <Flyout>
                        <StackPanel>
                            <StackPanel Margin="5" Orientation="Vertical"  >
                                <TextBlock  Text="Item Title" VerticalAlignment="Bottom"/>
                                <TextBox Text="{Binding ElementName=itemTitle,Path=Text,Mode=TwoWay}"  Width="200" />
                            </StackPanel>
                       </StackPanel>
                   </Flyout>
              </Button.Flyout>
          </Button>
       </StackPanel>

我可以使用Dani的答案让命令绑定工作，并在托管弹出按钮的按钮上设置datacontext，但是我无法绑定文本框，如上面的模板示例所示

<Button Content="Update" HorizontalAlignment="Center" DataContext="{Binding ViewModel, ElementName=pageRoot}" >
<Button.Flyout>
    <Flyout>
        <StackPanel>
            <TextBlock  Text="Item Title" VerticalAlignment="Bottom"/>
            <TextBox Text="{Binding ElementName=itemTitle,Path=Text,Mode=TwoWay}"  Width="200" />

            <Button x:Name="buttonTest" Margin="5" Height="40" Content="Test" HorizontalAlignment="Center"   Command="{Binding UpdateMatchDataCommand}"/>

原始代码示例问题：

<Grid Name="rootGrid" Tag="{Binding}"  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

....

   <ScrollViewer
        x:Name="itemDetail"
        AutomationProperties.AutomationId="ItemDetailScrollViewer"
        Grid.Row="0"
        Grid.Column="1"
        Grid.RowSpan="2"
        Padding="60,0,66,0"
        HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
        DataContext="{Binding SelectedItem, ElementName=itemListView}"

       <Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
           <StackPanel Orientation="Vertical" Grid.Row="1"  Margin="0,0,10,0" Width="180" Height="180">
                <Button Name="buttonWorks" Content="Test" Command="{Binding Tag.UpdateMatchDataCommand,ElementName=rootGrid}"/>

              <Button Content="Update" HorizontalAlignment="Center" >
                  <Button.Flyout>
                      <Flyout>
                          <Button Name="buttonFail" Content="Test" Command="{Binding Tag.UpdateMatchDataCommand,ElementName=rootGrid}"/>
                      </Flyout>
                  </Button.Flyout>
              </Button>
          </StackPanel>


....

Answer 1

如果您使用ViewModels，我建议您将DataContext更改为您的页面。

<Page
    x:Name="rootPage"
    DataContext="{Binding ViewModel, RelativeSource={RelativeSource Self}}"
...

和CodeBehind：

private readonly ViewModel _viewModel = new ViewModel();
public ViewModel ViewModel
{
    get { return _viewModel; }
}

现在您可以将命令更改为：

<Button Name="buttonWorks" Content="Test" Command="{Binding Tag.UpdateMatchDataCommand}"/>

现在只有在绑定到后面的代码中的属性时才需要ElementName。

Answer 2

最终我无法使用模板提供的绑定解决问题。在我看来，不允许更改弹出窗口中单个元素的datacontext。因此，我解决它的方法是在viewmodel中创建一个选定的项目，并更改模板代码以绑定到视图模型上的选定项目。然后将包括命令在内的所有元素绑定到整个表单的相同datacontext。

    <ListView
        x:Name="itemListView"
        AutomationProperties.AutomationId="ItemsListView"
        AutomationProperties.Name="Items"
        TabIndex="1"
        Grid.Row="1"
        Margin="-10,-10,0,0"
        Padding="120,0,0,60"
        ItemsSource="{Binding Matches}"
        SelectedItem="{Binding SelectedMatch, Mode=TwoWay}"
        IsSwipeEnabled="False">
        <ListView.ItemTemplate>
            <DataTemplate>

现在绑定适用于包括模板在内的所有字段。

对于Windows 8.1商店应用，按钮弹出窗口中的Xaml标签绑定失败

2 个答案: