UWP XAML 在数据模板外添加数据绑定

Question

我正在尝试向此数据模板添加按钮，但无法从 ViewModel 访问 ICommand EditTripClick 命令。所以我想知道我在数据模板中是否可以访问它？

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

首先，您可以设置控件的名称，其中 DataContext 是您的视图模型，然后绑定控件以更改按钮的 DataContext。例如，我添加了一个 StackPanel 并将其名称设置为 MyRoot，然后引用其 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>

此外，您需要在代码隐藏中设置DataContext。 .cs:

this.DataContext = ViewModel;

UWP XAML 在数据模板外添加数据绑定

UWP XAML add data binding outside datatemplate

xaml

datatemplate

uwp