"WinUI 3: AdaptiveTrigger Not Applying VisualState Setters"

Question

I have winui3 application that has three borders and I want to be responsive. when the window size is less the 600 the borders will be in one column and greater than borders will show in three column. I created this but not working?

<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">


        <Grid x:Name="TopCardsGrid" Grid.Row="0" ColumnSpacing="10" RowSpacing="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">
                <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">
                <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">
                <StackPanel>
                    <TextBlock Text="Processing" FontSize="18"/>
                    <TextBlock Text="345k" FontSize="22" FontWeight="Bold"/>
                </StackPanel>
            </Border>
        
            <!-- VisualStateManager for Responsive Layout -->
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="AdaptiveStates">
        
                    <!-- Mobile View (Stacked Layout) -->
                    <VisualState x:Name="Narrow">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <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>
        
                    <!-- Desktop View (3 columns) -->
                    <VisualState x:Name="Wide">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="600" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <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>
        
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
</page>

It shows only in one row but I want when resize the window and the width is less than 600 all the borders should be in one column!

有人可以帮我吗？

Answer 1

Grid.Row

和

Grid.Column

是附加的属性，因此您不能仅在

SETTETER中使用它。 Please place the attached property path inside parentheses.

Please try to change the code to this:

object.propertyname

<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
    <AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
    <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>

For more details, please refer to this document:

Setter Class

.