UWP - Wie bindet man ein ContentPresenter-Element an das Haupt-ViewModel?

Question

ich auf einer App arbeiten, in dem der Benutzer eine „große“ Form bearbeiten kann:

• Das Formular enthält eine Menge von Feldern: in einem Pivot angezeigt wird, wo jeder PivotItem eine Kategorie darstellt die Form.
• Einige Kategorien enthalten ein oder mehrere untergeordnete Elemente: Sie werden über eine Master-Detail Präsentation angezeigt.

Um die Elemente des Detailteils anzuzeigen, verwende ich eine Content, die direkt an das Modell binded ist:

<ContentPresenter 
    x:Name="DetailContentPresenter" 
    Grid.Column="1" 
    Grid.RowSpan="2" 
    BorderThickness="1,0,0,0" 
    Padding="24,0" 
    BorderBrush="{ThemeResource SystemControlForegroundBaseLowBrush}" 
    Content="{x:Bind MasterListView.SelectedItem, Mode=OneWay}"> 

    <ContentPresenter.ContentTemplate> 
     <DataTemplate x:DataType="models:Form_Parts"> 
      <...> 
     </DataTemplate> 
    </ContentPresenter.ContentTemplate> 
</ContentPresenter> 

Dies funktioniert gut, aber es gibt eine „dritte“ Ebene in der Hauptformular: Eine Liste von Fotos, die ich im ContentPresenter über eine GridView anzeigen kann. Das funktioniert auch großartig, aber ich würde gerne eine "Hinzufügen" -Schaltfläche oder das "ItemClick" -Ereignis verwenden, um mit den Fotos zu interagieren: Ich sehe nicht, wie ich einen Befehl im Haupt-ViewModel binden könnte, anstelle des DataContext von ContentPresenter. Die anderen Felder dieser Form binden gut an diesem ViewModel.

Ich habe einige Tests ohne Ergebnis:

<StackPanel Orientation="Horizontal" Grid.Row="1"> 
    <GridView ItemsSource="{Binding images}" 
       ItemClick="{Binding PhotoClickCommand}"> 
     <GridView.ItemTemplate> 
      <DataTemplate> 
       <Border BorderBrush="Gray" BorderThickness="1" 
         Padding="10" 
         Height="150" Width="190"> 
        <Image Stretch="UniformToFill" 
          Source="{Binding bitmap_image}" /> 
       </Border> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
    </GridView> 
    <Border BorderBrush="Gray" BorderThickness="1" 
      Padding="10" 
      Height="150" Width="190"> 
     <Button Command="{Binding Path=DataContext.AddPhotoCommand, ElementName=DetailsPage}" 
       Height="100" Width="100"> 
      <Viewbox> 
       <SymbolIcon Symbol="Add"/> 
      </Viewbox> 
     </Button> 
    </Border> 
</StackPanel> 

=> gibt es eine Möglichkeit, dies zu tun?

Edit: ich mein Problem für die gelöste Schaltfläche "Hinzufügen" Dank Alteik mit:

<Button Command="{Binding ElementName=Root, Path=DataContext.AddPhotoCommand}" Height="100" Width="100"> 

Aber ich habe immer ein Problem mit den ItemClick des Grid. Ich versuchte dies:

<GridView ItemsSource="{Binding images}" 
      IsItemClickEnabled="True" 
      SelectionMode="None"> 
    <i:Interaction.Behaviors> 
     <core:EventTriggerBehavior EventName="Tapped"> 
      <core:InvokeCommandAction Command="{Binding ElementName=Root, Path=DataContext.EditPhotoCommand}" 
             CommandParameter="{Binding Mode=OneWay}"/> 
     </core:EventTriggerBehavior> 
    </i:Interaction.Behaviors> 
    <...> 
</GridView> 

Aber ich habe nicht den erwarteten Parameter in dem Ansichtsmodell erhalten:

private void EditPhoto(object sender) 
{ 
    Images sImage = (Images)sender; 
    if (sImage != null) 
    { 
     NavigationService.NavigateTo<CommentImageViewModel>(this, new Object[] { sImage }, true); 
    } 
} 

Der Absender ist die aktuellen Form_Parts (die Datatemplate des Content), während ich würde Holen Sie sich das ausgewählte Element meiner Bildersammlung, die an die GridView gebunden ist ...

=> Was könnte ich tun, um das zu beheben?

Answer 1

Sie sollten die Datacontext in einem untergeordneten Element ändern dies zu tun können: Sie

Command"{Binding ElementName=Root, Path=DataContext.TheCommandFromRoot}" 

Offensichtlich den Namen des übergeordneten Element festlegen müssen gut auf „Root“