UWP - How to bind a ContentPresenter's element to the main ViewModel?

问题

I work on an app where the user can edit a "big" form:

The form contains a lot of fields: it is displayed in a Pivot, where each PivotItem represents a category of the form.
Some categories contain one or more child items: they are displayed through a Master-Detail presentation.

To display the items of the Detail part, I use a ContentPresenter that is binded directly to the Model:

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

This works fine, but there is a "third" level in the main form: a list of photos, that I display in the ContentPresenter through a GridView. This works also great, but I would like to use an "Add" button or the "ItemClick" event to interact with the photos: I don't see how I could bind a Command in the main ViewModel, instead of the ContentPresenter's DataContext. The other fields of this form bind well on this ViewModel.

I did some tests without any result:

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

=> is there a way to doing this?

Edit : I solved my problem for the "Add" button thanks Alteik with:

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

But I always get a problem with the ItemClick of the GridView. I tried this:

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

But I don't get the expected parameter in the ViewModel:

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

The sender is the current Form_Parts (the DataTemplate of the ContentPresenter), whereas I would get the selected item of my images collection, that is binded to the GridView...

=> Whad could I do to fix this?

回答1:

You should be able to change the DataContext in a child element doing this:

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

Obviously you need to set the name of the parent's element to "Root"

来源：https://stackoverflow.com/questions/39835301/uwp-how-to-bind-a-contentpresenters-element-to-the-main-viewmodel

标签

xaml

mvvm

binding

uwp

viewmodel