在列表视图中显示隐藏图标



>假设我有一个包含 10 个列表视图项的列表视图,每个列表视图项都有其他嵌套的 UIElements。每个列表视图项都有一个嵌套的应用栏按钮。 默认情况下,AppBarButton 可见性设置为在 LisViewItem 中折叠。我希望当用户将鼠标悬停在列表视图项上时,应用栏按钮可见。

ListViewItem 附加了 PointerEntered="ListviewEnter", PointerExited="ListviewExit" 事件处理程序。

<ListView ItemsSource="{x:Bind people}">   
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" 
Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Person">
<ListViewItem 
PointerEntered="ListviewEnter"
PointerExited="ListviewExit"
Background="LightBlue">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{x:Bind name}"/>
<TextBlock Grid.Column="1" Text="{x:Bind age}"/>
<Border Grid.Column="2" 
BorderBrush="Green" 
BorderThickness="1">
<AppBarButton 
x:Name="ssss"
Visibility="Collapsed"
Icon="Delete" 
Label="Delete" 
HorizontalAlignment="Right"/>
</Border>
</Grid>

</ListViewItem>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

可以在 Person 类中设置一个属性来绑定 AppBarButton 的可见性。将鼠标悬停在 ListViewItem 上时,将属性设置为 true 以显示 AppBarButton。

人员类:

public class Person : INotifyPropertyChanged
{​
public event PropertyChangedEventHandler PropertyChanged = delegate { };​
public String name ...;​
public String age ...;​
private bool isShow = false;​
public bool IsShow​
{​
get { return isShow; }​
set​
{​
isShow = value;​
this.OnPropertyChanged();​
}​
}​
public void OnPropertyChanged([CallerMemberName] string propertyName = null)​
{​
// Raise the PropertyChanged event, passing the name of the property whose value has changed.​
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));​
}​
}

XAML:

<AppBarButton  Visibility="{x:Bind IsShow,Mode=OneWay}"​ Icon="Delete" ​ Label="Delete" ​ HorizontalAlignment="Right"/>

代码隐藏:

触发 ListViewEnter 和 ListViewExit 事件时,可以从中获取 Person 类,并更改 IsShow 属性以控制 AppBarButton 的可见性。

private void ListviewEnter(object sender, PointerRoutedEventArgs e)
{​
ListViewItem item = sender as ListViewItem;​
Person p = item.DataContext as Person;​
p.IsShow = true;​
}​
​
private void ListviewExit(object sender, PointerRoutedEventArgs e)​
{​
ListViewItem item = sender as ListViewItem;​
Person p = item.DataContext as Person;​
p.IsShow = false;​
​
}