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=";
xmlns:x=";
xmlns:d=";
xmlns:mc=";
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!
could anyone help me?
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/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats./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!
could anyone help me?
Share Improve this question edited Feb 4 at 7:55 DarkBee 15.5k8 gold badges72 silver badges118 bronze badges asked Feb 3 at 5:03 Abdul Saboor HabibiAbdul Saboor Habibi 56 bronze badges1 Answer
Reset to default 0Grid.Row and Grid.Column are attached properties so you can't just use it like object.propertyname in the Setter. Please place the attached property path inside parentheses.
Please try to change the code to this:
<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 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>
For more details, please refer to this document: Setter Class.
Update: