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>

現在，綁定適用於包括模板在內的所有字段。