c# - WPF - 隐藏 ItemControl -> UniformGrid 中的项目,以免占用基于数据绑定的 UI 空间
问题描述
数据绑定到一个ObservableCollection
,我正在填充ItemsControl
一个Buttons
。无论. UniformGrid
_ObservableCollection
愿望:用户搜索/过滤后ObservableCollection
,我想更新IsVisible
项目的属性以显示/隐藏它们......同时也巩固空间。
基本原理:我认为,从性能角度来看,更新属性比执行Clear()
and 循环将过滤后的项目重新添加回 databound更好ObservableCollection
。
Visibility
问题:虽然当前的实现(下面的代码)确实隐藏了按钮,但无论我尝试使用哪个属性,它们占用的空间仍然存在。
免责声明:我不只是简单地“修复”我当前的代码。例如,如果一个可行的解决方案不使用UniformGrid
例如但仍然达到可持续的结果,我可能会使用它!侧面也是如此ViewModel
。
<ItemsControl Name="ItemsList"
Width="Auto"
HorizontalContentAlignment="Left"
ItemsSource="{Binding ItemsVM.WorkList}"
ScrollViewer.CanContentScroll="True" VirtualizingStackPanel.IsVirtualizing="true"
VirtualizingStackPanel.VirtualizationMode="Standard"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="5" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Width="250" Height="50"
FontSize="18" FontWeight="Bold"
Background="{Binding TextColor, Converter={StaticResource TextToColorConvert}, UpdateSourceTrigger=PropertyChanged}"
Margin="1,1,1,1" HorizontalAlignment="Center" VerticalAlignment="Center"
BorderBrush="WhiteSmoke" BorderThickness="0" Click="workNumSelect"
Content="{Binding Workload.WorkNum}"
Cursor="Hand" Opacity=".8"
Visibility="{Binding IsVisible, Converter={StaticResource BoolToCollapsedVisConvert}, UpdateSourceTrigger=PropertyChanged}"
/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer Width="Auto" VerticalScrollBarVisibility="Visible">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
更新: 我没有简单地复制和粘贴整个答案。
- 在上面的代码中,在 的
Button
内部DataTemplate
,我删除了该Visibility
行。 我只添加了以下代码:
<ItemsControl.ItemContainerStyle> <Style TargetType="ContentPresenter"> <Style.Triggers> <DataTrigger Binding="{Binding IsVisible}" Value="False"> <Setter Property="Visibility" Value="Collapsed" /> </DataTrigger> </Style.Triggers> </Style> </ItemsControl.ItemContainerStyle>
解决方案
在 DataTemplate 中设置 Button 的 Visibility 无效。您应该设置项目容器的可见性,即ContentPresenter
显示单个项目的。
您可以通过ItemContainerStyle
使用绑定 Visibility 属性的 Setter 将 ItemsControlDataTrigger
的
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer VerticalScrollBarVisibility="Visible">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="5" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button ... />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Style.Triggers>
<DataTrigger Binding="{Binding IsVisible}" Value="False">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
推荐阅读
- python - 这个 lambda 函数的结果是什么?
- javascript - 如何在字段填满条目之前禁用按钮
- python - 结果发生的时间序列的统计检验 - python
- r - 如何将字符串列表转换为唯一的单个字符?
- python - 列表压缩不返回空列表值
- google-apps-script - 使用 Google 应用脚本合并和更新 Google 表格
- javascript - 如何在 Mocha/Chai 测试中测试“catch(e)”块?
- java - 咖啡因缓存 - 指定条目的到期时间
- azure-functions - Azure 数据工厂管道编排框架
- vue.js - Vuejs:日期 1 在日期 2 之后