Xaml 标记绑定在 Windows 8.1 商店应用程序的按钮弹出中失败答案

【问题标题】：Xaml Tag binding fails in button flyout for windows 8.1 store appXaml 标记绑定在 Windows 8.1 商店应用程序的按钮弹出中失败
【发布时间】：2014-12-17 22:59:08
【问题描述】：

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

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

<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 的回答让命令绑定工作，并像这样在托管弹出按钮的按钮上设置数据上下文，但我无法绑定上面模板示例中看到的文本框

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


....

【问题讨论】：

标签： windows-store-apps winrt-xaml

【解决方案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 现在只有在您绑定到后面代码中的属性时才需要。

【讨论】：

这个答案是我的一部分。谢谢，我通过一种从 VS 2013 SplitApp 模板创建特定示例的方式为问题添加了更多细节

【解决方案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>

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

【讨论】：