WPF可拉伸控件选择及两列Grid列宽可调整实现咨询

核心控件选择与基础逻辑 #

直接用现有Grid搭配GridSplitter就能实现拉伸+用户调整列宽的需求，小屏下单列最大化的效果，可以通过VisualStateManager或绑定控件可见性来实现。

具体改造步骤 #

1. 让Grid本身支持拉伸
   原代码里Grid设置了HorizontalAlignment="Left"，这会导致Grid无法占满父容器宽度，直接删掉这个属性，让Grid默认的HorizontalAlignment="Stretch"生效，整个布局就能随窗口自动拉伸。

2. 添加GridSplitter实现列宽拖拽调整
   在两列之间插入GridSplitter，配置它的行为让用户可以拖拽调整左右列宽，同时给列设置最小宽度，避免拖得过窄：

<Grid Background="White" CornerRadius="12" Margin="8">
    <Grid.ColumnDefinitions>
        <!-- 给列设置最小宽度，防止拖拽时过窄 -->
        <ColumnDefinition Width="*" MinWidth="300"/>
        <ColumnDefinition Width="Auto"/> <!-- 专门放GridSplitter的列 -->
        <ColumnDefinition Width="500" MinWidth="300"/>
    </Grid.ColumnDefinitions>
    <!-- 插入分割线控件 -->
    <GridSplitter Grid.Column="1" Width="5" 
                  ResizeBehavior="PreviousAndNext"
                  Background="#E0E0E0"
                  VerticalAlignment="Stretch"/>
    <!-- area a -->
    <StackPanel Grid.Row="0" Grid.Column="0" Margin="10">
        <!-- 原内容保持不变 -->
    </StackPanel>
    <!-- area b -->
    <StackPanel Grid.Row="0" Grid.Column="2" Margin="10">
        <!-- 原内容保持不变 -->
    </StackPanel>
</Grid>

• ResizeBehavior="PreviousAndNext"：拖拽分割线时同时调整左右两列的宽度
• VerticalAlignment="Stretch"：让分割线占满整个布局高度，方便拖拽

3. 小屏适配：实现单列最大化
   可以通过VisualStateManager监听窗口宽度，当宽度小于设定阈值（比如800px）时自动隐藏其中一列；同时加个切换按钮，让用户能手动控制列的显示/隐藏：

<Grid Background="White" CornerRadius="12" Margin="8">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="ScreenSizeStates">
            <!-- 小屏状态：隐藏右侧列 -->
            <VisualState x:Name="SmallScreen">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" MaxWindowWidth="800"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Column1.Width" Value="0"/>
                    <Setter Target="GridSplitter.Visibility" Value="Collapsed"/>
                    <Setter Target="Column0.Width" Value="*"/>
                </VisualState.Setters>
            </VisualState>
            <!-- 默认大屏状态 -->
            <VisualState x:Name="LargeScreen">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="801"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Column0.Width" Value="*"/>
                    <Setter Target="Column1.Width" Value="500"/>
                    <Setter Target="GridSplitter.Visibility" Value="Visible"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="Column0" Width="*" MinWidth="300"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition x:Name="Column1" Width="500" MinWidth="300"/>
    </Grid.ColumnDefinitions>
    
    <!-- 手动切换按钮，放在第一列顶部 -->
    <ToggleButton Grid.Column="0" HorizontalAlignment="Right" Margin="0 5 0 0"
                  x:Name="ToggleColumnBtn" Content="隐藏右侧" Click="ToggleColumnBtn_Click"/>
    
    <GridSplitter x:Name="GridSplitter" Grid.Column="1" Width="5" 
                  ResizeBehavior="PreviousAndNext"
                  Background="#E0E0E0"
                  VerticalAlignment="Stretch"/>
    
    <!-- area a -->
    <StackPanel Grid.Row="0" Grid.Column="0" Margin="10">
        <!-- 原内容保持不变 -->
    </StackPanel>
    <!-- area b -->
    <StackPanel Grid.Row="0" Grid.Column="2" Margin="10">
        <!-- 原内容保持不变 -->
    </StackPanel>
</Grid>

后台代码添加按钮点击事件，实现手动切换：

private void ToggleColumnBtn_Click(object sender, RoutedEventArgs e)
{
    if (ToggleColumnBtn.IsChecked == true)
    {
        Column1.Width = new GridLength(0);
        GridSplitter.Visibility = Visibility.Collapsed;
        ToggleColumnBtn.Content = "显示右侧";
    }
    else
    {
        Column1.Width = new GridLength(500);
        GridSplitter.Visibility = Visibility.Visible;
        ToggleColumnBtn.Content = "隐藏右侧";
    }
}

关键说明 #

• 去掉HorizontalAlignment="Left"是让Grid能随父容器拉伸的核心前提
• GridSplitter必须放在单独的Width="Auto"列中，才能保证拖拽行为正常
• 小屏适配同时支持自动触发和手动切换，兼顾系统自适应和用户自主控制的需求

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