UWP XAML在datatemplate外部添加数据绑定 [英] UWP XAML add data binding outside datatemplate

问题描述

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

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?

我想做什么的示例代码

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

推荐答案

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

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>

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

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

this.DataContext = ViewModel;

这篇关于UWP XAML在datatemplate外部添加数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！