UWP XAML add data binding outside datatemplate - xaml

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;