WinUI3中AdaptiveTrigger未生效，自适应布局问题求助

你的代码无法实现预期响应式效果的核心问题有三点：

• VisualStateManager 放置位置错误：WinUI3 要求VisualStateManager.VisualStateGroups必须作为页面（Page）的直接子元素，不能嵌套在Grid等容器内部，否则状态触发器无法正常工作。
• 窄屏状态未调整Grid列定义：原代码中Grid始终保留三列，即使Border移到单列，多余的列仍会占用空间，导致布局不符合预期。
• VisualState 顺序逻辑错误：AdaptiveTrigger会优先匹配最后定义的符合条件的状态，原代码先定义窄屏后定义宽屏，会导致宽屏状态覆盖窄屏的触发逻辑。

修正后的完整代码 #

<Page
    x:Class="YourNamespace.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <!-- VisualStateManager 必须作为 Page 的直接子元素 -->
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="AdaptiveStates">
            <!-- 宽屏状态：窗口宽度 ≥600 时触发 -->
            <VisualState x:Name="Wide">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <!-- 恢复Grid三列布局 -->
                    <Setter Target="TopCardsGrid.ColumnDefinitions[0].Width" Value="Auto"/>
                    <Setter Target="TopCardsGrid.ColumnDefinitions[1].Width" Value="*"/>
                    <Setter Target="TopCardsGrid.ColumnDefinitions[2].Width" Value="Auto"/>
                    <!-- 三个Border水平排列 -->
                    <Setter Target="Border1.Grid.Row" Value="0" />
                    <Setter Target="Border1.Grid.Column" Value="0" />
                    <Setter Target="Border2.Grid.Row" Value="0" />
                    <Setter Target="Border2.Grid.Column" Value="1" />
                    <Setter Target="Border3.Grid.Row" Value="0" />
                    <Setter Target="Border3.Grid.Column" Value="2" />
                </VisualState.Setters>
            </VisualState>

            <!-- 窄屏状态：窗口宽度 <600 时触发（作为默认状态） -->
            <VisualState x:Name="Narrow">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <!-- 隐藏多余列，只保留第一列并设为占满宽度 -->
                    <Setter Target="TopCardsGrid.ColumnDefinitions[0].Width" Value="*"/>
                    <Setter Target="TopCardsGrid.ColumnDefinitions[1].Width" Value="0"/>
                    <Setter Target="TopCardsGrid.ColumnDefinitions[2].Width" Value="0"/>
                    <!-- 三个Border垂直排列在单列 -->
                    <Setter Target="Border1.Grid.Row" Value="0" />
                    <Setter Target="Border1.Grid.Column" Value="0" />
                    <Setter Target="Border2.Grid.Row" Value="1" />
                    <Setter Target="Border2.Grid.Column" Value="0" />
                    <Setter Target="Border3.Grid.Row" Value="2" />
                    <Setter Target="Border3.Grid.Column" Value="0" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid x:Name="TopCardsGrid" ColumnSpacing="10" RowSpacing="10" Padding="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <!-- Border 1 -->
        <Border
            x:Name="Border1"
            Grid.Row="0"
            Grid.Column="0"
            Background="{ThemeResource SystemFillColorSuccessBrush}"
            CornerRadius="8"
            Padding="15">
            <StackPanel>
                <TextBlock Text="Total Users" FontSize="18"/>
                <TextBlock Text="340k" FontSize="22" FontWeight="Bold"/>
            </StackPanel>
        </Border>

        <!-- Border 2 -->
        <Border
            x:Name="Border2"
            Grid.Row="0"
            Grid.Column="1"
            Background="{ThemeResource SystemFillColorSuccessBrush}"
            CornerRadius="8"
            Padding="15">
            <StackPanel>
                <TextBlock Text="Total Records" FontSize="18"/>
                <TextBlock Text="345k" FontSize="22" FontWeight="Bold"/>
            </StackPanel>
        </Border>

        <!-- Border 3 -->
        <Border
            x:Name="Border3"
            Grid.Row="0"
            Grid.Column="2"
            Background="{ThemeResource SystemFillColorSuccessBrush}"
            CornerRadius="8"
            Padding="15">
            <StackPanel>
                <TextBlock Text="Processing" FontSize="18"/>
                <TextBlock Text="345k" FontSize="22" FontWeight="Bold"/>
            </StackPanel>
        </Border>
    </Grid>
</Page>

关键修改说明 #

1. 移动VisualStateManager位置：将VisualStateManager.VisualStateGroups移至Page的直接子元素位置，确保状态触发器能正确监听窗口尺寸变化。
2. 调整Grid列定义：在窄屏状态下将第二、第三列宽度设为0，第一列设为*，保证单列布局时Border能占满窗口宽度；宽屏状态恢复原列定义。
3. 调整VisualState顺序：将宽屏状态放在窄屏状态之前，因为AdaptiveTrigger会优先匹配最后一个符合条件的状态，这样当窗口宽度≥600时触发宽屏，否则默认使用窄屏布局。
4. 添加Padding优化样式：给Grid和Border添加Padding，避免内容紧贴边缘，提升视觉体验。

内容的提问来源于stack exchange，提问作者Abdul Saboor Habibi