WPF动态UniformGrid列数适配：根据控件宽度自动调整列数

嘿，这个动态列数的UniformGrid需求太常见了——我之前做员工卡片布局的时候几乎一模一样！给你几个实用的方案，你可以根据自己的场景选：

方案1：值转换器绑定窗口宽度（最直接） #

这个方法通过绑定窗口的实际宽度，配合自定义值转换器来动态计算列数，完全贴合你“全屏7列、窄屏1列”的需求，还能轻松适配超宽屏和贴靠场景。

步骤1：创建宽度转列数的转换器 #

先写一个实现IValueConverter的类，根据传入的窗口宽度返回对应列数：

using System;
using System.Globalization;
using System.Windows.Data;

namespace YourNamespace
{
    public class WidthToColumnsConverter : IValueConverter
    {
        // 可以根据你的实际需求调整这些阈值
        private const double FullScreenThreshold = 1920; // 全屏/超宽屏的宽度门槛
        private const double MediumWidthThreshold = 1200;
        private const double TabletWidthThreshold = 768;

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is double windowWidth)
            {
                if (windowWidth >= FullScreenThreshold)
                    return 7; // 全屏/超宽屏显示7列
                else if (windowWidth >= MediumWidthThreshold)
                    return 4; // 中等宽度显示4列
                else if (windowWidth >= TabletWidthThreshold)
                    return 2; // 平板宽度显示2列
                else
                    return 1; // 窄屏/贴靠侧边显示1列
            }
            return 1; // 默认 fallback 到1列
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException(); // 反向转换不需要，直接抛异常
        }
    }
}

步骤2：在XAML中绑定使用 #

在Window的资源里引用转换器，然后把UniformGrid的Columns属性绑定到窗口的ActualWidth：

<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:YourNamespace"
        Title="Employee Cards" WindowState="Maximized">
    <Window.Resources>
        <local:WidthToColumnsConverter x:Key="WidthToColumnsConverter" />
    </Window.Resources>

    <!-- 用ScrollViewer包裹，防止卡片溢出 -->
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <UniformGrid Columns="{Binding RelativeSource={RelativeSource AncestorType=Window}, 
                                      Path=ActualWidth, 
                                      Converter={StaticResource WidthToColumnsConverter}}"
                     Margin="10"
                     HorizontalAlignment="Stretch">
            <!-- 你的员工卡片示例 -->
            <Border Background="#F0F0F0" Margin="5" Height="180" CornerRadius="8">
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Ellipse Width="80" Height="80" Fill="#4A90E2" Margin="0 0 0 10"/>
                    <TextBlock Text="John Doe" FontSize="16" FontWeight="Bold"/>
                    <TextBlock Text="Software Engineer" Foreground="#666" FontSize="12"/>
                </StackPanel>
            </Border>
            <!-- 重复更多卡片... -->
        </UniformGrid>
    </ScrollViewer>
</Window>

这个方案的优势是简单易维护，阈值可以随时调整，完全满足你提到的所有场景。

方案2：VisualStateManager纯XAML实现（无后台代码） #

如果你偏好纯XAML的方式，用VisualStateManager结合AdaptiveTrigger可以实现同样的效果，状态切换逻辑更直观：

<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Employee Cards" WindowState="Maximized">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="WindowWidthStates">
                <!-- 窄屏/贴靠侧边状态 -->
                <VisualState x:Name="NarrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="EmployeeGrid.Columns" Value="1"/>
                    </VisualState.Setters>
                </VisualState>
                <!-- 中等宽度状态 -->
                <VisualState x:Name="MediumState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="768"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="EmployeeGrid.Columns" Value="2"/>
                    </VisualState.Setters>
                </VisualState>
                <!-- 宽屏状态 -->
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1200"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="EmployeeGrid.Columns" Value="4"/>
                    </VisualState.Setters>
                </VisualState>
                <!-- 全屏/超宽屏状态 -->
                <VisualState x:Name="FullScreenState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1920"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="EmployeeGrid.Columns" Value="7"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <UniformGrid x:Name="EmployeeGrid" Margin="10" HorizontalAlignment="Stretch">
                <!-- 员工卡片内容... -->
            </UniformGrid>
        </ScrollViewer>
    </Grid>
</Window>

这个方案适合不需要写后台代码的场景，状态切换的规则一目了然，还能轻松扩展其他状态（比如结合WindowState触发器，强制最大化时显示7列）。

方案3：自定义DynamicUniformGrid（基于卡片最小宽度） #

如果希望卡片始终保持合适的宽度（不会因为窗口太宽被拉得过大），可以自定义一个UniformGrid，根据卡片最小宽度自动计算列数，同时限制最大列数为7：

自定义控件代码 #

using System.Windows;
using System.Windows.Controls;

namespace YourNamespace
{
    public class DynamicUniformGrid : UniformGrid
    {
        public static readonly DependencyProperty MinColumnWidthProperty =
            DependencyProperty.Register(nameof(MinColumnWidth), typeof(double), typeof(DynamicUniformGrid), 
                new PropertyMetadata(200.0, OnMinColumnWidthChanged));

        public double MinColumnWidth
        {
            get => (double)GetValue(MinColumnWidthProperty);
            set => SetValue(MinColumnWidthProperty, value);
        }

        private static void OnMinColumnWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ((DynamicUniformGrid)d).UpdateColumns();
        }

        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
        {
            base.OnRenderSizeChanged(sizeInfo);
            UpdateColumns();
        }

        private void UpdateColumns()
        {
            if (ActualWidth <= 0) return;
            
            // 根据控件宽度和最小列宽计算列数
            int calculatedColumns = (int)(ActualWidth / MinColumnWidth);
            // 确保至少1列，最多7列
            Columns = Math.Clamp(calculatedColumns, 1, 7);
        }
    }
}

XAML中使用 #

<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:YourNamespace"
        Title="Employee Cards" WindowState="Maximized">
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <local:DynamicUniformGrid MinColumnWidth="200" Margin="10" HorizontalAlignment="Stretch">
            <!-- 员工卡片内容... -->
        </local:DynamicUniformGrid>
    </ScrollViewer>
</Window>

这个方案更灵活，不管窗口怎么调整，卡片都不会窄于你设定的最小宽度，全屏时自动停在7列，完美适配所有场景。

内容的提问来源于stack exchange，提问作者5tar-Kaster