Winrt - Change value of property in DataTemplate when clicking a item in GridView

Question

In a windows store app project i have this GridView, in code behind i bind a List<FileObjects> to its ItemsSource.

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

and these DataTemplate that are used depending on the File type on the item.

        <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}"/>

I would like to know how i can change the BorderBrush property, when i click one of the items in the GridView For example i would have a row of 10 icons, and when i clicked one of them the BorderBrush would go Blue instead of Transparent.

Answer 1

One way I have done this is to add a property named "ItemSelected" to your 'FileObject' class.

Then in your GridView_ItemClick handler you need to set the "ItemSelected" to true for the selected item and false for all other items.

Then add the following inside each Border definition:

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

*This example uses the Behaviors SDK so you will need to install it if you do not already have it and reference the assembly. You will also need to add the following to your xaml file:

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