How to access a page's datacontext from inside a listview?

Question

I am using MVVM Cross to build a UWP application. I am having trouble binding a command to a button. Previously in the XAML page I used an interactivity to bind other commands. The issue here is that we are using a listview to present a user's "favorite list." The UnfavoriteCommand is in the ViewModel but never gets hit because User.Favorite list is in a model and does not have the "UnfavoriteCommand." How do I handle this binding issue using MVVM Cross?

            <ListView 
                Grid.Row="0"
                Grid.Column="0"
                CanReorderItems="True"
                CanDrag="True"  
                AllowDrop="True"
                ItemsSource="{Binding User.FavoriteList}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="500" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <StackPanel Grid.Column="0" Grid.Row="0"
                                        HorizontalAlignment="Left"
                                        Margin="0, 0, 0, 0"
                                        Height="25" >
                                    <TextBlock Text="{Binding Description, Mode=TwoWay}"
                                                   VerticalAlignment="Center"
                                                   TextAlignment="Left"/>
                                </StackPanel>
                                <StackPanel VerticalAlignment="Center" Grid.Column="1" Grid.Row="0">
                                    <Button Content="&#xf00d;" 
                                            FontFamily="{StaticResource FontAwesomeFontFamily}"                                                
                                            BorderBrush="Black">

                                        <Interactivity:Interaction.Behaviors>
                                            <Core:EventTriggerBehavior EventName="Click">
                                                <Core:EventTriggerBehavior.Actions>
                                                    <Core:InvokeCommandAction CommandParameter="{Binding}" Command="{Binding UnfavoriteCommand}"/>
                                                    <!--<Core:CallMethodAction TargetObject="{Binding}" MethodName="Unfavorite" />-->
                                                    <!--<Core:InvokeCommandAction Command="{Binding UnfavoriteCommand}" InputConverter="{StaticResource buttonConverter}"/>-->
                                                </Core:EventTriggerBehavior.Actions>
                                            </Core:EventTriggerBehavior>
                                        </Interactivity:Interaction.Behaviors>
                                    </Button>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

score 2 · Accepted Answer · answered Jul 10 '17 at 21:43

2

Give your page a name and use ElementName binding.

<Core:InvokeCommandAction CommandParameter="{Binding}" Command="{Binding DataContext.UnfavoriteCommand, ElementName=PageName}"/>

answered Jul 10 '17 at 21:43

Jessica

2,057
1
15
24

Zaha · Answer 2 · 2017-07-10T18:14:30.783

This code is for a wpf applcation but I think it's the same with UWP applications, you should use RelativeSource to reference a distinct source or context, May be you has a ViewModel as (Interface only):

public class IAnyViewModel {
     RelayCommand UnfavoriteCommand {get;}
     ObservableCollection<UserFavorite> FavoriteList {get;set;}
}

And this class is assigned to page or window controll in constructor or by code some thing like this:

public constructorControl(){
     this.DataContext = new AnyViewModel();
}

or by XAML.

<Page.DataContext>
 <local:AnyViewModel></local:AnyViewModel>
</Page.DataContext>

Then you can reference to parent context using RelativeSource some like this:

<Core:InvokeCommandAction 
    Command="{Binding UnfavoriteCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}">

I'm Assuming your control is Page.

Yes,you are right, you could search for "RelativeSource FindAncestor in UWP" Jessica is more near, I guess (For Example:https://stackoverflow.com/questions/32861612/how-to-do-relativesource-mode-find-ancestor-or-equivalent-in-uwp) — Zaha, Jul 10 '17 at 22:02

How to access a page's datacontext from inside a listview?

2 Answers2