Xaml标记绑定在Windows 8.1 Store App的按钮弹出按钮中失败

Question

我有一个Windows 8.1应用商店应用程序，我不知道如何获取数据上下文来访问我的视图模型以进行中继命令。 xaml一直运行到弹出为止，然后失败。 因此，内容为“ buttonWorks”的按钮成功地从rootGrid元素获取了绑定，并在视图模型上调用了命令。 但是弹出按钮下方的按钮没有。 为什么？

为了举例说明绑定问题，请使用“拆分应用程序”模板创建一个新的“商店应用程序”。 然后将弹出按钮添加到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}}"
...

和代码背后：

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

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

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

现在，仅当您绑定到后面代码中的属性时，才需要ElementName。

Answer 2

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

    <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>

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