Winrt - 单击 GridView 中的项目时更改 DataTemplate 中 属性 的值

Question

在 windows 商店应用程序项目中，我有这个 GridView，在后面的代码中，我将 List<FileObjects> 绑定到它的 ItemsSource。

<GridView x:Name="filesIcons" ItemTemplateSelector="{StaticResource FileTemplateSelector}" Grid.Column="3" ItemClick="GridView_ItemClick" HorizontalContentAlignment="Right" HorizontalAlignment="Right" IsItemClickEnabled="True" SelectionMode="Single" />

和这些 DataTemplate 根据项目的文件类型使用。

        <DataTemplate x:Key="pdfTemplate">
        <Border x:Name="IconBorder" Width="83" BorderBrush="Transparent" BorderThickness="5" CornerRadius="2" Margin="0,10,0,0" >
            <Image Width="83" Source="ms-appx:///Images/Meetings/FileTypes/pdf.png" ></Image>
        </Border>
    </DataTemplate>

    <DataTemplate x:Key="docTemplate">
        <Border x:Name="IconBorder" Width="83" BorderBrush="Transparent" BorderThickness="5" CornerRadius="2" Margin="0,10,0,0" >
            <Image Width="83" Source="ms-appx:///Images/Meetings/FileTypes/word.png" ></Image>
        </Border>
    </DataTemplate>

    <DataTemplate x:Key="xlsTemplate">
        <Border x:Name="IconBorder" Width="83" BorderBrush="Transparent" BorderThickness="5" CornerRadius="2" Margin="0,10,0,0" >
            <Image Width="83" Source="ms-appx:///Images/Meetings/FileTypes/excel.png" ></Image>
        </Border>
    </DataTemplate>

    <DataTemplate x:Key="imgTemplate">
        <Border x:Name="IconBorder" Width="83" BorderBrush="Transparent" BorderThickness="5" CornerRadius="2" Margin="0,10,0,0" >
            <Image Width="83" Source="ms-appx:///Images/Meetings/FileTypes/image.png" ></Image>
        </Border>
    </DataTemplate>

    <DataTemplate x:Key="txtTemplate">
        <Border x:Name="IconBorder" Width="83" BorderBrush="Transparent" BorderThickness="5" CornerRadius="2" Margin="0,10,0,0" >
            <Image Width="83" Source="ms-appx:///Images/Meetings/FileTypes/text.png" ></Image>
        </Border>
    </DataTemplate>

    <DataTemplate x:Key="pptTemplate">
        <Border x:Name="IconBorder" Width="83" BorderBrush="Transparent" BorderThickness="5" CornerRadius="2" Margin="0,10,0,0" >
            <Image Width="83" Source="ms-appx:///Images/Meetings/FileTypes/text.png" ></Image>
        </Border>
    </DataTemplate>



    <local:FileTemplateSelector x:Key="FileTemplateSelector" 
                                pdf="{StaticResource pdfTemplate}"
                                doc="{StaticResource docTemplate}"
                                xls="{StaticResource xlsTemplate}"
                                img="{StaticResource imgTemplate}"
                                ppt="{StaticResource pptTemplate}"
                                txt="{StaticResource txtTemplate}"/>

我想知道如何在单击 GridView 中的一项时更改 BorderBrush 属性 例如，我有一排 10 个图标，当我单击其中一个时，BorderBrush 会变成蓝色而不是透明。

Answer 1

我这样做的一种方法是将名为 "ItemSelected" 的 属性 添加到您的 'FileObject' class.

然后在您的 GridView_ItemClick 处理程序中，您需要将所选项目的 "ItemSelected" 设置为 true，将所有其他项目设置为 false。

然后在每个 Border 定义中添加以下内容：

            <i:Interaction.Behaviors>
                <core:DataTriggerBehavior Binding="{Binding ItemSelected}" Value="False">
                    <core:ChangePropertyAction PropertyName="BorderBrush" Value="Transparent">
                    </core:ChangePropertyAction>
                </core:DataTriggerBehavior>
                <core:DataTriggerBehavior Binding="{Binding ItemSelected}" Value="True">
                    <core:ChangePropertyAction PropertyName="BorderBrush" Value="Blue">
                    </core:ChangePropertyAction>
                </core:DataTriggerBehavior>
            </i:Interaction.Behaviors>

*此示例使用 Behaviors SDK，因此如果您还没有安装它并引用程序集，则需要安装它。您还需要将以下内容添加到 xaml 文件中：

xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"