WPF实现动态四宫格布局

需求描述

我们要设计一个界面，用户可以通过 CheckBox 控制哪些图表显示。图表的数量是动态的，最多可以选择显示四个图表。如果显示一个图表，它会占满整个区域；如果显示两个图表，它们会水平排列；显示三个图表时，上面两个水平排列，下面一个铺满宽度；如果显示四个图表，它们会均匀分布在四个格子中。

XAML 代码

首先，我们需要一个 Grid 布局，它将包含最多四个图表的占位区域。我们还需要一些 CheckBox 控制每个图表的显示。以下是 XAML 代码

<Window x:Class="DynamicGridLayout.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="动态四宫格布局" Height="450" Width="800"><Grid><!-- 控制图表显示的 CheckBox --><StackPanel Margin="10" HorizontalAlignment="Left" Orientation="Horizontal"><TextBlock Text="显示图表:" /><CheckBox x:Name="chbChart1" Margin="10,0,0,0" Checked="ChartShow_OnChecked" Unchecked="ChartShow_OnChecked" Content="图表 1" IsChecked="True"/><CheckBox x:Name="chbChart2" Margin="10,0,0,0" Checked="ChartShow_OnChecked" Unchecked="ChartShow_OnChecked" Content="图表 2" IsChecked="True"/><CheckBox x:Name="chbChart3" Margin="10,0,0,0" Checked="ChartShow_OnChecked" Unchecked="ChartShow_OnChecked" Content="图表 3" IsChecked="True"/><CheckBox x:Name="chbChart4" Margin="10,0,0,0" Checked="ChartShow_OnChecked" Unchecked="ChartShow_OnChecked" Content="图表 4" IsChecked="True"/></StackPanel><!-- 动态布局的 Grid --><Grid x:Name="MainGrid" Margin="10,60,10,10"><Border x:Name="chart1" Background="LightBlue" Visibility="Visible" BorderBrush="Black" BorderThickness="1" /><Border x:Name="chart2" Background="LightCoral" Visibility="Visible" BorderBrush="Black" BorderThickness="1" /><Border x:Name="chart3" Background="LightGreen" Visibility="Visible" BorderBrush="Black" BorderThickness="1" /><Border x:Name="chart4" Background="LightGoldenrodYellow" Visibility="Visible" BorderBrush="Black" BorderThickness="1" /></Grid></Grid>
</Window>

C# 代码

接下来，我们在 C# 代码中根据用户的选择动态更新布局。关键是 ChartShow_OnChecked 方法，它根据当前选中的 CheckBox 控制图表的可见性，并动态调整 Grid 的行列定义。

public partial class MainWindow : Window
{public MainWindow(){InitializeComponent();UpdateChartLayout();}// 控制图表显示的事件private void ChartShow_OnChecked(object sender, RoutedEventArgs e){// 确保至少有一个图表被选中bool isAnyChecked = chbChart1.IsChecked == true ||chbChart2.IsChecked == true ||chbChart3.IsChecked == true ||chbChart4.IsChecked == true;// 如果没有任何图表选中，恢复当前选中的图表if (!isAnyChecked && sender is CheckBox currentCheckBox){currentCheckBox.IsChecked = true;MessageBox.Show("至少需要选中一个图表！", "提示", MessageBoxButton.OK, MessageBoxImage.Warning);return;}// 控制对应图表的显示和隐藏chart1.Visibility = chbChart1.IsChecked == true ? Visibility.Visible : Visibility.Collapsed;chart2.Visibility = chbChart2.IsChecked == true ? Visibility.Visible : Visibility.Collapsed;chart3.Visibility = chbChart3.IsChecked == true ? Visibility.Visible : Visibility.Collapsed;chart4.Visibility = chbChart4.IsChecked == true ? Visibility.Visible : Visibility.Collapsed;// 更新布局UpdateChartLayout();}// 更新图表的布局private void UpdateChartLayout(){// 获取当前显示的图表var visibleCharts = new[] { chart1, chart2, chart3, chart4 }.Where(chart => chart.Visibility == Visibility.Visible).ToList();// 清空现有的布局MainGrid.RowDefinitions.Clear();MainGrid.ColumnDefinitions.Clear();// 设置默认的布局foreach (var chart in visibleCharts){Grid.SetRow(chart, 0);Grid.SetColumn(chart, 0);Grid.SetColumnSpan(chart, 1);}// 根据图表数量进行不同布局switch (visibleCharts.Count){case 1:// 单个图表，铺满整个区域MainGrid.RowDefinitions.Add(new RowDefinition());MainGrid.ColumnDefinitions.Add(new ColumnDefinition());Grid.SetRow(visibleCharts[0], 0);Grid.SetColumn(visibleCharts[0], 0);break;case 2:// 两个图表，水平排列MainGrid.RowDefinitions.Add(new RowDefinition());MainGrid.ColumnDefinitions.Add(new ColumnDefinition());MainGrid.ColumnDefinitions.Add(new ColumnDefinition());Grid.SetRow(visibleCharts[0], 0);Grid.SetColumn(visibleCharts[0], 0);Grid.SetRow(visibleCharts[1], 0);Grid.SetColumn(visibleCharts[1], 1);break;case 3:// 三个图表，上方两个，下面一个铺满MainGrid.RowDefinitions.Add(new RowDefinition());MainGrid.RowDefinitions.Add(new RowDefinition());MainGrid.ColumnDefinitions.Add(new ColumnDefinition());MainGrid.ColumnDefinitions.Add(new ColumnDefinition());Grid.SetRow(visibleCharts[0], 0);Grid.SetColumn(visibleCharts[0], 0);Grid.SetRow(visibleCharts[1], 0);Grid.SetColumn(visibleCharts[1], 1);Grid.SetRow(visibleCharts[2], 1);Grid.SetColumn(visibleCharts[2], 0);Grid.SetColumnSpan(visibleCharts[2], 2); // 跨两列break;case 4:// 四个图表，标准两行两列MainGrid.RowDefinitions.Add(new RowDefinition());MainGrid.RowDefinitions.Add(new RowDefinition());MainGrid.ColumnDefinitions.Add(new ColumnDefinition());MainGrid.ColumnDefinitions.Add(new ColumnDefinition());for (int i = 0; i < visibleCharts.Count; i++){Grid.SetRow(visibleCharts[i], i / 2);Grid.SetColumn(visibleCharts[i], i % 2);}break;}}
}