Display a UI element (Image, Text) in Data Template of a List View on click of List View Item

问题

The Data Template Code

 <DataTemplate x:Key="CachelvTemplate">
            <Grid Margin="21,3,21,3" Height="60">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding}" HorizontalAlignment="Stretch" VerticalAlignment="Center" Foreground="Black"  FontSize="20"/>
                <Image Grid.Column="2" Source="/Assets/Icons/selectedCache.png" HorizontalAlignment="Right"  VerticalAlignment="Center" Stretch="Fill" MaxHeight="20" MaxWidth="20" Opacity="0" />
            </Grid>
 </DataTemplate>

List View Code

 <ListView x:Name="cacheList" Tapped="cacheList_ItemClick"                     
                      ItemTemplate="{StaticResource CachelvTemplate}" />

Now on click of a list item, I would like to either change the opacity of the image (from Data Template) to become one, or somehow make it visible. Only for the selected List View Item.

回答1:

First of all You should have used ItemClick or SelectionChanged event instead of Tapped. I ll use SelectionChanged event. You can use of VisualTreeHelper to get the image control of selected item

private void cacheList_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            foreach (var item in e.AddedItems)
            {
                ListViewItem selectedItem = (sender as ListView).ContainerFromItem(item) as ListViewItem;
                Image image = FindElementInVisualTree<Image>(selectedItem);
                if(image!=null)
                {
                    image.Visibility = Visibility.Visible;
                }
            }
        }
        private T FindElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
        {
            var count = VisualTreeHelper.GetChildrenCount(parentElement);
            if (count == 0) return null;

            for (int i = 0; i < count; i++)
            {
                var child = VisualTreeHelper.GetChild(parentElement, i);
                if (child != null && child is T)
                    return (T)child;
                else
                {
                    var result = FindElementInVisualTree<T>(child);
                    if (result != null)
                        return result;
                }
            }
            return null;
        }

Update to make unselected item image collapsed

 private void cacheList_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        foreach (var item in e.AddedItems)
        {
            ListViewItem selectedItem = (sender as ListView).ContainerFromItem(item) as ListViewItem;
            Image image = FindElementInVisualTree<Image>(selectedItem);
            if (image != null)
            {
                image.Visibility = Visibility.Visible;
            }
            FindListViewItem((sender as ListView), selectedItem);
        }
    }
    private void FindListViewItem(DependencyObject parent,ListViewItem selectedItem)
    {
        var count = VisualTreeHelper.GetChildrenCount(parent);
        for (int i = 0; i < count; i++)
        {
            var child = VisualTreeHelper.GetChild(parent, i);
            if (child is ListViewItem && (child as ListViewItem) != selectedItem)
            {
                Image unselectedimage = FindElementInVisualTree<Image>(child);
                if (unselectedimage != null)
                {
                    unselectedimage.Visibility = Visibility.Collapsed;
                }
            }
            else
            {
              FindListViewItem(child, selectedItem);
            }

        }
    }

来源：https://stackoverflow.com/questions/36541490/display-a-ui-element-image-text-in-data-template-of-a-list-view-on-click-of-l