单击列表视图项时在列表视图的数据模板中显示 UI 元素（图像、文本）

Question

数据模板代码

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

列表查看代码

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

现在单击一个列表项，我想将图像的不透明度（来自数据模板）更改为一个，或者以某种方式使其可见。仅适用于选定的列表视图项。

Answer 1

首先您应该使用 ItemClick 或 SelectionChanged 事件而不是 Tapped。我将使用 SelectionChanged 事件。您可以使用 VisualTreeHelper 获取所选项目的图像控件

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

更新以使未选择的项目图像折叠

 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);
            }

        }
    }

单击列表视图项时在列表视图的数据模板中显示 UI 元素（图像、文本）

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

c#

xaml

windows-phone-8.1

win-universal-app