Kinjan Bhavsar
Reputation: 1449
How to use Adaptive UI for all Grid in XAML Windows 10?
I am migrating my Windows Phone 8 App to Windows 10 and I came across new term Adaptive UI and found that it is very useful.But when I apply Adaptive UI for each Grid, only the first Grid's UI changes based on screen size, not others.I added the following code to achieve that. Please suggest what am I doing wrong?
<Grid x:Name="LayoutRoot" Background="{StaticResource AppBackGroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="517" />
</Grid.RowDefinitions>
<Grid Grid.Row="2">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LoginImage.Height" Value="60"/>
<Setter Target="LoginImage.Width" Value="60"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LoginImage.Height" Value="90"/>
<Setter Target="LoginImage.Width" Value="80"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".15*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="/Images/login.png"
Grid.Column="0"
x:Name="LoginImage"
/>
<Grid Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Center">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Headertxt1.FontSize" Value="25"/>
<Setter Target="Headertxt2.FontSize" Value="20"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Headertxt1.FontSize" Value="30"/>
<Setter Target="Headertxt2.FontSize" Value="23"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Login"
Name="Headertxt1"
Foreground="{StaticResource AppFontColor}"
Grid.Row="0"
FontWeight="Bold" />
<TextBlock
Name="Headertxt2"
Foreground="{StaticResource AppFontColor}"
Grid.Row="1"
TextWrapping="Wrap"/>
</Grid>
</Grid>
<Grid Grid.Row="3" Margin="0,25,0,0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="EmailTxtBox.Height" Value="30"/>
<Setter Target="PwdBox.Height" Value="30"/>
<Setter Target="LoginButton.FontSize" Value="25"/>
<Setter Target="ForgotPwdButton.FontSize" Value="20"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="EmailTxtBox.Height" Value="50"/>
<Setter Target="PwdBox.Height" Value="50"/>
<Setter Target="LoginButton.FontSize" Value="38"/>
<Setter Target="ForgotPwdButton.FontSize" Value="24"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox
Style="{StaticResource MediumSizeTextBoxStyle}"
Grid.Row="0"
Name="EmailTxtBox"
Height="50"
InputScope="EmailSmtpAddress"
Margin="12,0,12,10"/>
<PasswordBox Name="PwdBox"
Grid.Row="1"
Style="{StaticResource MediumSizePwdBoxStyle}"
Margin="12,10,12,4"
Height="50"/>
<Button Content="Login"
Grid.Row="2"
Margin="12,20,12,0"
x:Name="LoginButton"
BorderThickness="0"
Foreground="Black"
Background="White"
HorizontalAlignment="Stretch"/>
<Button Content="Forgot Password"
Grid.Row="3"
Foreground="{StaticResource AppFontColor}"
FontSize="24"
Margin="0,10,0,10"
HorizontalAlignment="Center"
Name="ForgotPwdButton"
BorderThickness="0"
/>
</Grid>
<Image x:Name="Header_logo"
Source="/Images/rbkc_logo.png"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="Collapsed"
Margin="0,10,0,10"
Width="480"
Height="121" />
<Button x:Name="backButton" Margin="39,59,39,0"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
/>
</Grid>
Upvotes: 0
Views: 453
Answers (1)
Jayden
Reputation: 3286
Control authors or app developers add VisualStateGroup object elements to the root element of a control template definition in XAML, using the VisualStateManager.VisualStateGroups attached property. Within a VisualStateGroup element, each VisualState represents a discrete visual state of a control. Each VisualState has a name that is representative of a UI state that can be changed by the user, or changed by control logic. A VisualState consists mainly of a Storyboard. This Storyboard targets individual dependency property values that should be applied whenever the control is in that visual state. For more info on how to write visual states in XAML, including example code, see Storyboarded animations for visual states.
For more info, see VisualStateManager.
Adding VisualStateManager.VisualStateGroups in one control which is not the root element of the page does not work. You can add the VisualStateManager.VisualStateGroups to root Grid of the page. And add all of the <VisualState> to the <VisualStateGroup>.
By the way, you have a misunderstand. The first Grid's UI changes based on screen size, because the Height and Width of the Image are not explicitly specified, the default value of Stretch is Uniform. It will change the height and width to adaptive the Grid. So the "Adaptive UI" didn't works in your scenario.
For example:
<Grid x:Name="LayoutRoot" Background="{StaticResource AppBackGroundColor}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LoginImage.Height" Value="60" />
<Setter Target="LoginImage.Width" Value="60" />
<Setter Target="Headertxt1.FontSize" Value="25" />
<Setter Target="Headertxt2.FontSize" Value="20" />
<Setter Target="EmailTxtBox.Height" Value="30" />
<Setter Target="PwdBox.Height" Value="30" />
<Setter Target="LoginButton.FontSize" Value="25" />
<Setter Target="ForgotPwdButton.FontSize" Value="20" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LoginImage.Height" Value="90" />
<Setter Target="LoginImage.Width" Value="80" />
<Setter Target="Headertxt1.FontSize" Value="30" />
<Setter Target="Headertxt2.FontSize" Value="23" />
<Setter Target="EmailTxtBox.Height" Value="50" />
<Setter Target="PwdBox.Height" Value="50" />
<Setter Target="LoginButton.FontSize" Value="38" />
<Setter Target="ForgotPwdButton.FontSize" Value="24" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="517" />
</Grid.RowDefinitions>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".15*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="/Images/login.png"
Grid.Column="0"
x:Name="LoginImage" />
<Grid Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="Login"
Name="Headertxt1"
Foreground="{StaticResource AppFontColor}"
Grid.Row="0"
FontWeight="Bold" />
<TextBlock
Name="Headertxt2"
Foreground="{StaticResource AppFontColor}"
Grid.Row="1"
TextWrapping="Wrap" />
</Grid>
</Grid>
<Grid Grid.Row="3" Margin="0,25,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox
Style="{StaticResource MediumSizeTextBoxStyle}"
Grid.Row="0"
Name="EmailTxtBox"
Height="50"
InputScope="EmailSmtpAddress"
Margin="12,0,12,10" />
<PasswordBox Name="PwdBox"
Grid.Row="1"
Style="{StaticResource MediumSizePwdBoxStyle}"
Margin="12,10,12,4"
Height="50" />
<Button Content="Login"
Grid.Row="2"
Margin="12,20,12,0"
x:Name="LoginButton"
BorderThickness="0"
Foreground="Black"
Background="White"
HorizontalAlignment="Stretch" />
<Button Content="Forgot Password"
Grid.Row="3"
Foreground="{StaticResource AppFontColor}"
FontSize="24"
Margin="0,10,0,10"
HorizontalAlignment="Center"
Name="ForgotPwdButton"
BorderThickness="0" />
</Grid>
<Image x:Name="Header_logo"
Source="/Images/rbkc_logo.png"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="Collapsed"
Margin="0,10,0,10"
Width="480"
Height="121" />
<Button x:Name="backButton" Margin="39,59,39,0"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back" />
</Grid>
Upvotes: 1
Related Questions
- How and when to use ‘async’ and ‘await’
- How do I remedy "The breakpoint will not currently be hit. No symbols have been loaded for this document." warning?
- How to set the Content-Type header for an HttpClient request?
- How to delete all files and folders in a directory?
- "No installed components were detected" error on toggling AppBarButton visibility with Visual States
- Navigate to other page IocContainers and MVVM light
- WPF: Value produced by BindingExpression is not valid for target
- How do I Bind a WPF Ellipse's Height to its own Width?