Xaml 태그 바인딩이 Windows 8.1 스토어 앱의 버튼 플라이 아웃에 실패 함

Question

Windows 8.1 스토어 앱이 있는데, relayacand에 대한 내 viewmodel에 액세스하는 데 datacontext를 얻는 방법을 알 수 없습니다. xaml은 플라이 아웃까지 계속 작동하고 실패합니다. 따라서 내용이 "buttonWorks"인 버튼은 rootGrid 요소에서 바인딩을 성공적으로 가져 와서 viewmodel에서 명령을 호출합니다. 그러나 플라이 아웃 아래의 버튼은 그렇지 않습니다. 왜?

바인딩 문제의 예를 만들려면 Split App 템플릿을 사용하여 새 Store App을 만듭니다. 그런 다음 SplitPage에 플라이 아웃을 추가하고 texttext를 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> 

내가 대니의 답변을 사용하고 같은 플라이 아웃을 호스팅하는 버튼의 데이터 컨텍스트를 설정하는 작업을 바인딩 명령을 얻을 수 있습니다,하지만 난 텍스트 상자를 바인딩 할 수에서 볼 수 있듯이 : 코드 조각은 다음과 같습니다

<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}"/> 

원본 코드 문제의 예 위 템플릿 예 : 당신이 ViewModels와 함께 작업하는 경우

<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

결국 템플릿이 제공하는 바인딩을 사용하여 문제를 해결할 수 없습니다. 플라이 아웃에있는 단일 요소의 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> 

이제 바인딩은 템플릿을 포함한 모든 필드에서 작동합니다.

Answer 2

난 당신이 페이지에 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을 지금에만 필요합니다.