UWP中如何批量调整模板化ListView项的尺寸？

嘿，我完全懂你这种卡顿的烦恼——当ListView里的项多起来之后，逐个遍历修改数据源里的布局属性，肯定会因为频繁触发UI更新而拖慢整个界面。其实咱们根本不用碰数据源，直接在XAML层面用动态绑定+转换器或者VisualState状态切换就能统一控制所有项的样式，效率高太多了！

下面给你两个最实用的解决方案：

方案一：用动态绑定+值转换器（最推荐） #

这个方法的核心是把FontSize、IconHeight这些属性直接绑定到窗口的实际尺寸，通过转换器计算出合适的值，窗口尺寸变化时所有项会自动同步更新，完全不用循环操作。

步骤1：写一个尺寸转换器 #

先创建一个IValueConverter的实现，用来根据窗口宽度返回对应的尺寸值：

public class WindowSizeToValueConverter : IValueConverter
{
    // 小窗口时的尺寸
    public double SmallSize { get; set; } = 10;
    // 大窗口时的尺寸
    public double LargeSize { get; set; } = 14;
    // 窗口尺寸阈值
    public double ThresholdWidth { get; set; } = 800;

    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is double windowWidth)
        {
            return windowWidth < ThresholdWidth ? SmallSize : LargeSize;
        }
        return SmallSize;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

步骤2：在XAML中声明转换器并绑定 #

首先在你的窗口资源里注册这个转换器（记得把local换成你的命名空间）：

<Window.Resources>
    <!-- 控制文本字号的转换器 -->
    <local:WindowSizeToValueConverter 
        x:Key="FontSizeConverter" 
        ThresholdWidth="800" 
        SmallSize="10" 
        LargeSize="14" />
    <!-- 控制图标高度的转换器 -->
    <local:WindowSizeToValueConverter 
        x:Key="IconSizeConverter" 
        ThresholdWidth="800" 
        SmallSize="20" 
        LargeSize="30" />
</Window.Resources>

然后修改你的ListView ItemTemplate，把硬编码的尺寸换成绑定：

<ListView.ItemTemplate>
    <DataTemplate x:DataType="local:LeftMenuBarItem">
        <StackPanel Margin="0,0,0,0" Padding="{x:Bind Pad, Mode=OneWay}">
            <BitmapIcon 
                Height="{Binding ActualWidth, ElementName=YourWindowName, Converter={StaticResource IconSizeConverter}}" 
                MinHeight="20" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Stretch" 
                Foreground="{x:Bind Foreground, Mode=OneWay}" 
                UriSource="{x:Bind ImgPath}" />
            <TextBlock 
                Width="Auto" 
                Margin="0,5,0,0" 
                HorizontalAlignment="Center" 
                FontSize="{Binding ActualWidth, ElementName=YourWindowName, Converter={StaticResource FontSizeConverter}}" 
                Foreground="{x:Bind Foreground, Mode=OneWay}" 
                Text="{x:Bind Title}" />
        </StackPanel>
    </DataTemplate>
</ListView.ItemTemplate>

注意：把YourWindowName换成你窗口的实际Name属性值。

方案二：用VisualStateManager切换状态 #

如果需要更复杂的样式变化（比如同时改间距、颜色），可以用VisualState来管理不同窗口尺寸下的样式，更新效率也很高。

步骤1：在ItemTemplate中定义VisualState #

把ItemTemplate的根元素换成Grid，然后添加VisualStateGroup：

<ListView.ItemTemplate>
    <DataTemplate x:DataType="local:LeftMenuBarItem">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="WindowSizeStates">
                    <!-- 小窗口状态 -->
                    <VisualState x:Name="SmallWindow">
                        <VisualState.Setters>
                            <Setter Target="MenuIcon.Height" Value="20" />
                            <Setter Target="MenuTitle.FontSize" Value="10" />
                            <Setter Target="RootPanel.Padding" Value="5" />
                        </VisualState.Setters>
                    </VisualState>
                    <!-- 大窗口状态 -->
                    <VisualState x:Name="LargeWindow">
                        <VisualState.Setters>
                            <Setter Target="MenuIcon.Height" Value="30" />
                            <Setter Target="MenuTitle.FontSize" Value="14" />
                            <Setter Target="RootPanel.Padding" Value="10" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <StackPanel x:Name="RootPanel" Margin="0,0,0,0" Padding="{x:Bind Pad, Mode=OneWay}">
                <BitmapIcon x:Name="MenuIcon" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Stretch" Foreground="{x:Bind Foreground, Mode=OneWay}" UriSource="{x:Bind ImgPath}" />
                <TextBlock x:Name="MenuTitle" Width="Auto" Margin="0,5,0,0" HorizontalAlignment="Center" Foreground="{x:Bind Foreground, Mode=OneWay}" Text="{x:Bind Title}" />
            </StackPanel>
        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

步骤2：在窗口SizeChanged事件中切换状态 #

在窗口的SizeChanged事件里判断窗口尺寸，切换对应的VisualState：

private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var targetState = e.NewSize.Width < 800 ? "SmallWindow" : "LargeWindow";
    // 遍历所有ListViewItem切换状态
    foreach (var item in leftMenubar.Items)
    {
        if (leftMenubar.ContainerFromItem(item) is ListViewItem container)
        {
            if (VisualTreeHelper.GetChild(container, 0) is FrameworkElement rootElement)
            {
                VisualStateManager.GoToState(rootElement, targetState, true);
            }
        }
    }
}

为什么之前修改StaticResource没效果？ #

因为StaticResource是一次性加载的，只会在XAML初始化时读取一次值，窗口尺寸变化时不会自动更新。而上面的方法用的是动态绑定或者VisualState，都是响应式的，能跟着窗口尺寸变化自动更新UI。

另外，尽量避免修改数据源中的UI属性——每修改一个属性都会触发INotifyPropertyChanged，导致对应的Item重新渲染，数量多了必然卡顿。直接在XAML层面控制样式，UI框架会批量处理更新，效率要高得多。

内容的提问来源于stack exchange，提问作者VD26