Winrt -当点击GridView中的一个项目时,改变DataTemplate中的属性值

本文关键字:项目 一个 属性 DataTemplate 改变 GridView Winrt | 更新日期: 2023-09-27 18:07:43

在一个windows store应用程序项目中,我有这个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}"/>

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

Winrt -当点击GridView中的一个项目时,改变DataTemplate中的属性值

我这样做的一种方法是在你的'FileObject'类中添加一个名为"ItemSelected"的属性。

然后在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>

*这个例子使用了behavior SDK,所以如果你还没有它,你需要安装它并引用它的程序集。您还需要在xaml文件中添加以下内容:

xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
相关文章: