UWP XAML add data binding outside datatemplate

Question

I'm trying to add button to this datatemplate but I cannot access the ICommand EditTripClick Command from the ViewModel. So I am wondering is it possible to access it although I am in a datatemplate?

Example code of what I want to do

    <CommandBar OverflowButtonVisibility="Auto">
        <AppBarButton Label="Add trip" Icon="Add" Command="{x:Bind ViewModel.NewTripClickCommand}"/>
        <AppBarButton Label="Refresh" Icon="Refresh" Command="{x:Bind ViewModel.RefreshClickCommand}"/>
    </CommandBar>


    <controls:Expander
        Header="Current Trips"
        Background="White"
        IsExpanded="{x:Bind ViewModel.HasCurrentTrips, Mode=OneWay }"
        IsEnabled="{x:Bind ViewModel.HasCurrentTrips, Mode=OneWay}">

        <controls:AdaptiveGridView
            Padding="{StaticResource MediumLeftRightMargin}"
            animations:Connected.ListItemElementName="itemThumbnail"
            animations:Connected.ListItemKey="animationKeyTripsView"
            DesiredWidth="180"
            ItemHeight="160"
            IsItemClickEnabled="True"
            ItemClickCommand="{x:Bind ViewModel.ItemClickCommand}"
            ItemsSource="{x:Bind ViewModel.CurrentTrips, Mode=OneWay}"
            SelectionMode="None"
            StretchContentForSingleRow="False">


            <controls:AdaptiveGridView.ItemTemplate>
                <DataTemplate x:DataType="models:Trip">
                    <Grid
                        x:Name="a"
                        Padding="{StaticResource MediumBottomMargin}"
                        Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">

                        <Grid.RowDefinitions>
                            <RowDefinition Height="1*" />
                            <RowDefinition Height="1*" />
                            <RowDefinition Height="1*" />
                        </Grid.RowDefinitions>

                        <Button Name="TEST1" Height="30" Width="40"

                                    HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Row="0">
                            <SymbolIcon Symbol="More"/>
                        </Button>

                        <!--<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">-->
                            <TextBlock
                                Grid.Row="1"
                                Margin="{StaticResource XXSmallTopMargin}"
                                HorizontalAlignment="Center"
                                Style="{ThemeResource BodyTextStyle}"
                                Text="{x:Bind Title}" />
                        <!--</StackPanel>-->
                    </Grid>
                </DataTemplate>
            </controls:AdaptiveGridView.ItemTemplate>
        </controls:AdaptiveGridView>
    </controls:Expander>

Answer 1

First, you could set name of the control which DataContext is your viewmodel, then bind the control to change your button's DataContext. For example, I add a StackPanel and set its name to MyRoot, then reference the its DataContext.

.xaml:

<StackPanel x:Name="MyRoot">
    <CommandBar OverflowButtonVisibility="Auto">
        <AppBarButton Label="Add trip" Icon="Add" Command="{x:Bind ViewModel.NewTripClickCommand}"/>
        <AppBarButton Label="Refresh" Icon="Refresh" Command="{x:Bind ViewModel.RefreshClickCommand}"/>
    </CommandBar>

    <controls:Expander Header="Current Trips"
                       Background="White"
                       IsExpanded="{x:Bind ViewModel.HasCurrentTrips, Mode=OneWay }"
                       IsEnabled="{x:Bind ViewModel.HasCurrentTrips, Mode=OneWay}">
        <controls:AdaptiveGridView DesiredWidth="180"
                                   ItemHeight="160"
                                   IsItemClickEnabled="True"
                                   ItemClickCommand="{x:Bind ViewModel.ItemClickCommand}"
                                   ItemsSource="{x:Bind ViewModel.CurrentTrips, Mode=OneWay}"
                                   SelectionMode="None"
                                   StretchContentForSingleRow="False">

           <controls:AdaptiveGridView.ItemTemplate>
               <DataTemplate x:DataType="local:Trip">
                   <Grid x:Name="a">
                       <Grid.RowDefinitions>
                           <RowDefinition Height="1*" />
                           <RowDefinition Height="1*" />
                           <RowDefinition Height="1*" />
                       </Grid.RowDefinitions>
                       <Button Name="TEST1" Height="30" Width="40"
                               Command="{Binding ElementName=MyRoot,Path=DataContext.EditTripClick}"
                               HorizontalAlignment="Right" 
                               VerticalAlignment="Top" Grid.Row="0">
                           <SymbolIcon Symbol="More"/>
                       </Button>
                       <TextBlock
                                Grid.Row="1"
                                HorizontalAlignment="Center"
                                Text="{Binding Title}" />
                   </Grid>
                </DataTemplate>
            </controls:AdaptiveGridView.ItemTemplate>
        </controls:AdaptiveGridView>
    </controls:Expander>
</StackPanel>

In addition, you need to set the DataContext in code-behind. .cs:

this.DataContext = ViewModel;