c# - Find and modified image control by gridview selecteditem

Question

I need to change the source of an Image control inside a gridview datatemplate when a click event is raised in uwp. When i click on a car image, this Image needs to be modified and displayed the brand logo. I succeed with that code:

   <controls:AdaptiveGridView x:Name="AdaptiveGridViewControl"
                              animations:ReorderGridAnimation.Duration="350"
                              Margin="0,12,0,0"
                              ItemHeight="200"
                              DesiredWidth="200"
                              SelectionMode="Single"
                              IsItemClickEnabled="True"
                              ItemClick="GridView_ItemClick"
                              >

        <controls:AdaptiveGridView.ItemTemplate>
            <DataTemplate x:DataType="data:MyData">
                        <StackPanel Orientation="Horizontal">
                            <controls:ImageEx x:Name="ImageExControl"
                                      MaxHeight="200"
                                      IsCacheEnabled="True"
                                      Source="{x:Bind carsPictures}"
                                      Stretch="Fill"
                                      PlaceholderSource="/Assets/placeholder_cover.jpg"
                                      PlaceholderStretch="Uniform"/>
                        </StackPanel>
            </DataTemplate>
        </controls:AdaptiveGridView.ItemTemplate>
    </controls:AdaptiveGridView>

Thanks to that post : How to access a Control inside the data template in C# Metro UI in the code behind, i can use FindChildControl(DependencyObject control, string ctrlName) method.

In code behind:

 private void GridView_ItemClick(object sender, ItemClickEventArgs e)
    {
        var newData = (MyData)e.ClickedItem;

        ImageEx ex = FindChildControl<ImageEx>(this, "ImageExControl") as ImageEx;
        ex.Source = newData.brandLogo;
    }

The problem is this gridview contains 30 cars picture and only the first Image control is modified when a click event is raised. I don't know how to use the AdaptiveGridView.SelectedItem to change the clicked Image control.

score 0 · Accepted Answer · answered Mar 17 '17 at 21:26

You need to Get GridViewItem that has been Clicked so that you can change the image of the Clicked Item. Change your ItemClick Event to something like below.

private void GridView_ItemClick(object sender, ItemClickEventArgs e)
{
    GridViewItem item = myGridView.ContainerFromItem(e.ClickedItem) as GridViewItem;
    MyData newData = (MyData)e.ClickedItem;
    ImageEx ex = FindChildControl<ImageEx>(item, "ImageExControl") as ImageEx;
    ex.Source = newData.brandLogo;
}

Hope This Helps.

c# - Find and modified image control by gridview selecteditem

1 Answers1