The following forum(s) have migrated to Microsoft Q&A (Preview): Developing Universal Windows apps!
Visit Microsoft Q&A (Preview) to post new questions.

Learn More

 locked
Change value of property in DataTemplate when clicking a item in GridView RRS feed

  • 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 templates 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.

    • Edited by Thought2 Thursday, August 13, 2015 6:38 PM
    Thursday, August 13, 2015 6:36 PM

Answers

  • You could call a helper method that finds the Border element in the visual tree in your GridView_ItemClick event handler:

          private void GridView_ItemClick(object sender, ItemClickEventArgs e)
            {
                GridView gv = sender as GridView;
                GridViewItem gvi = gv.ContainerFromItem(e.ClickedItem) as GridViewItem;
    
                Border border = FindChildControl<Border>(gvi, "IconBorder");
                if(border != null)
                {
                    border.BorderBrush = new SolidColorBrush(Windows.UI.Colors.Blue);
                }
            }
    
    private T FindChildControl<T>(DependencyObject control, string ctrlName) where T : DependencyObject
            {
                int childNumber = VisualTreeHelper.GetChildrenCount(control);
                for (int i = 0; i < childNumber; i++)
                {
                    DependencyObject child = VisualTreeHelper.GetChild(control, i);
                    FrameworkElement fe = child as FrameworkElement;
                    // Not a framework element or is null
                    if (fe == null) return null;
    
                    if (child is T && fe.Name == ctrlName)
                    {
                        // Found the control so return
                        return (T)child;
                    }
                    else
                    {
                        // Not found it - search children
                        T nextLevel = FindChildControl<T>(child, ctrlName);
                        if (nextLevel != null)
                            return nextLevel;
                    }
                }
                return null;
            }
    

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Thursday, August 13, 2015 8:44 PM

All replies

  • Create a custom itemcontainerstyle

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Thursday, August 13, 2015 7:03 PM
  • Create a custom itemcontainerstyle

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    could you elaborate a bit more? :)
    Thursday, August 13, 2015 7:36 PM
  • You could call a helper method that finds the Border element in the visual tree in your GridView_ItemClick event handler:

          private void GridView_ItemClick(object sender, ItemClickEventArgs e)
            {
                GridView gv = sender as GridView;
                GridViewItem gvi = gv.ContainerFromItem(e.ClickedItem) as GridViewItem;
    
                Border border = FindChildControl<Border>(gvi, "IconBorder");
                if(border != null)
                {
                    border.BorderBrush = new SolidColorBrush(Windows.UI.Colors.Blue);
                }
            }
    
    private T FindChildControl<T>(DependencyObject control, string ctrlName) where T : DependencyObject
            {
                int childNumber = VisualTreeHelper.GetChildrenCount(control);
                for (int i = 0; i < childNumber; i++)
                {
                    DependencyObject child = VisualTreeHelper.GetChild(control, i);
                    FrameworkElement fe = child as FrameworkElement;
                    // Not a framework element or is null
                    if (fe == null) return null;
    
                    if (child is T && fe.Name == ctrlName)
                    {
                        // Found the control so return
                        return (T)child;
                    }
                    else
                    {
                        // Not found it - search children
                        T nextLevel = FindChildControl<T>(child, ctrlName);
                        if (nextLevel != null)
                            return nextLevel;
                    }
                }
                return null;
            }
    

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Thursday, August 13, 2015 8:44 PM