显示在列表视图数据模板UI元素（图片，文字）的列表视图项的点击 [英] Display a UI element (Image, Text) in Data Template of a List View on click of List View Item

问题描述

数据模板代码

 <的DataTemplate X：键=CachelvTemplate> 
<电网保证金=21,3,21,3HEIGHT =60> 
< Grid.ColumnDefinitions> 
< ColumnDefinition宽度=自动/> 
< ColumnDefinition WIDTH =*/> 
< ColumnDefinition宽度=自动/> 
< /Grid.ColumnDefinitions> 
< TextBlock的文本={}绑定的Horizo​​ntalAlignment =拉伸VerticalAlignment =中心前景=黑字号=20/> 
<图像Grid.Column =2源=/资产/图标/ selectedCache.png的Horizo​​ntalAlignment =右VerticalAlignment =中心拉伸=填充了maxHeight =20了maxWidth =20 不透明度=0/> 
< /网格和GT; 
< / DataTemplate中> 
  

列表视图代码

 < ListView的X：名称=cacheList抽头=cacheList_ItemClick
的ItemTemplate ={StaticResource的CachelvTemplate}/> 
  

现在一个列表项的点击，我想要么改变图像的透明度（从数据模板）成为一体，或以某种方式使之可见。只有所选列表视图项。

解决方案

首先你应该使用项目单击或SelectionChanged事件，而不是螺纹

。我将使用的SelectionChanged 事件。您可以使用 VisualTreeHelper 来获得所选项目的图像控制

 私人无效cacheList_SelectionChanged（对象发件人，SelectionChangedEventArgs E）
 {
的foreach 
的ListViewItem将selectedItem =（发件人为ListView控件）.ContainerFromItem（项目）（在e.AddedItems VAR项）
 {作为ListViewItem的; 
图像的图像= FindElementInVisualTree<图像>（selectedItem属性）; 
如果（图像！= NULL）
 {
 image.Visibility = Visibility.Visible; 
} 
} 
} 
私人牛逼FindElementInVisualTree< T>（DependencyObject的parentElement），其中T：DependencyObject的
 {
变种数= VisualTreeHelper.GetChildrenCount（parentElement ）; 
如果（计数== 0）返回NULL; 
 
的for（int i = 0; I<计数;我++）
 {
 VAR孩子= VisualTreeHelper.GetChild（parentElement，I）; 
如果（孩子= NULL&放大器;！&安培;孩子是T）
回报率（T）的孩子; 
，否则
 {
 VAR的结果= FindElementInVisualTree< T>（小孩）; 
如果（结果！= NULL）
返回结果; 
} 
} 
返回NULL; 
} 
  

更新，使未选中的项目形象倒塌

 私人无效cacheList_SelectionChanged（对象发件人，SelectionChangedEventArgs E）
 {
的foreach（在e.AddedItems VAR项） 
 {
的ListViewItem将selectedItem =（发件人为ListView控件）.ContainerFromItem（项目）作为ListViewItem的; 
图像的图像= FindElementInVisualTree<图像>（selectedItem属性）; 
如果（图像！= NULL）
 {
 image.Visibility = Visibility.Visible; 
} 
 FindListViewItem（（发件人为ListView控件）的，则selectedItem）; 
} 
} 
私人无效FindListViewItem（DependencyObject的父母，ListViewItem的selectedItem属性）
 {
变种数= VisualTreeHelper.GetChildrenCount（父）; 
的for（int i = 0; I<计数;我++）
 {
 VAR孩子= VisualTreeHelper.GetChild（父母，我）; 
如果（孩子的ListViewItem&放大器;及（孩子一样ListViewItem的）=将selectedItem！）
 {
图像unselectedimage = FindElementInVisualTree<图像>（小孩）; 
如果（unselectedimage！= NULL）
 {
 unselectedimage.Visibility = Visibility.Collapsed; 
} 
} 
，否则
 {
 FindListViewItem（孩子的，则selectedItem）; 
} 
 
} 
} 
  

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.

解决方案

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

        }
    }

这篇关于显示在列表视图数据模板UI元素（图片，文字）的列表视图项的点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！