调整窗口大小时显示/隐藏UI元素（XAML实现）

下面提供两种主流实现方式，适配不同场景需求：

方法1：纯XAML用VisualStateManager实现（推荐，符合自适应设计规范） #

这种方式无需后台代码，通过VisualStateManager结合AdaptiveTrigger自动监听窗口尺寸变化，触发UI元素的显示/隐藏，适合UWP、WinUI应用：

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="WindowSizeStates">
            <!-- 窄窗口状态：隐藏侧边栏 -->
            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="SidePanel.Visibility" Value="Collapsed"/>
                    <Setter Target="MainContentGrid.ColumnDefinitions[1].Width" Value="0"/>
                </VisualState.Setters>
            </VisualState>
            <!-- 宽窗口状态：显示侧边栏 -->
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="640"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="SidePanel.Visibility" Value="Visible"/>
                    <Setter Target="MainContentGrid.ColumnDefinitions[1].Width" Value="200"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid x:Name="MainContentGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>

        <!-- 主内容区 -->
        <Border Background="LightBlue" Grid.Column="0">
            <TextBlock Text="主内容区域" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>

        <!-- 侧边栏 -->
        <Border x:Name="SidePanel" Background="LightGray" Grid.Column="1">
            <TextBlock Text="侧边栏内容" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
    </Grid>
</Grid>

关键说明： #

• AdaptiveTrigger会自动检测窗口宽度，当达到MinWindowWidth设定的阈值时，切换到对应VisualState
• Setter通过Target指定要修改的元素属性，确保元素的x:Name正确即可
• 可以根据需求调整阈值（比如把640改成800），或者添加更多状态（比如中等宽度状态）

方法2：后台代码监听SizeChanged事件（适合WPF或需自定义逻辑场景） #

如果是WPF应用，或者需要更复杂的判断逻辑，可以通过监听窗口的SizeChanged事件实现：

XAML部分： #

<Grid x:Name="MainContentGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="200"/>
    </Grid.ColumnDefinitions>

    <Border Background="LightBlue" Grid.Column="0">
        <TextBlock Text="主内容区域" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>

    <Border x:Name="SidePanel" Background="LightGray" Grid.Column="1">
        <TextBlock Text="侧边栏内容" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
</Grid>

C#后台代码： #

public MainWindow()
{
    InitializeComponent();
    SizeChanged += MainWindow_SizeChanged;
    // 初始化时先执行一次状态判断
    UpdateSidePanelVisibility(ActualWidth);
}

private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
    UpdateSidePanelVisibility(e.NewSize.Width);
}

private void UpdateSidePanelVisibility(double windowWidth)
{
    if (windowWidth < 640)
    {
        SidePanel.Visibility = Visibility.Collapsed;
        MainContentGrid.ColumnDefinitions[1].Width = new GridLength(0);
    }
    else
    {
        SidePanel.Visibility = Visibility.Visible;
        MainContentGrid.ColumnDefinitions[1].Width = new GridLength(200);
    }
}

常见问题修复 #

• VisualStateManager无效果：检查VisualStateManager.VisualStateGroups是否放在布局根元素（如Grid）下，Target路径中的元素名称是否正确，AdaptiveTrigger的阈值设置是否合理
• SizeChanged事件不触发：确认窗口的ResizeMode不是NoResize，事件绑定代码是否在InitializeComponent()之后执行
• 过渡效果生硬：可以给元素添加动画，比如在VisualState中加入Storyboard实现渐变显示/隐藏，WinUI/UWP可直接使用内置的过渡动画（如EntranceThemeTransition）

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