Hi I have created an ImagenButton as below:
<ImageButton Source="articulos.png" Clicked="ImageButton_Clicked"/>
And this is the code for animation:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale" Value="1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale" Value="0.8"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
but I want create many buttons with same style, I do not want code repetition.
This is the complete code:
<ImageButton Source="articulos.png" Clicked="ImageButton_Clicked">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale" Value="1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale" Value="0.8"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ImageButton>
Please help.
You can define styles in your page, and then apply them to your Controls:
<StackLayout.Resources>
<Style TargetType="ImageButton">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale" Value="1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale" Value="0.8"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</StackLayout.Resources
Check the official documentation, it has there an example
Related
I'm struggling to handle the styling for the ComboBox control, more specifically, from drop-down menu the selected item's background color.
Is there a specific theme key color that the selected item takes?
On the example below the background color i want to change is the lighter grey one.
If you want to change the style of the ComboBoxItem, you will need to modify the default style of the ComboBoxItem. The ComboBoxItem is using some system value as the background for different states. I've made a simple demo which you could refer to.
Xaml:
<Page.Resources>
<Style TargetType="ComboBoxItem" x:Key="MyItemStyle">
<Setter Property="Foreground" Value="{ThemeResource ComboBoxItemForeground}" />
<Setter Property="Background" Value="{ThemeResource ComboBoxItemRevealBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ComboBoxItemRevealBorderThemeThickness}" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Padding" Value="{ThemeResource ComboBoxItemRevealThemePadding}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Control.IsTemplateFocusTarget="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="LayoutRoot.Background" Value="Azure" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundDisabled}" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundDisabled}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundPressed}" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundPressed}" />
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
</VisualState.Setters>
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="Yellow" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelected}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelected}" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundSelectedUnfocused}" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedUnfocused}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedUnfocused}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SelectedDisabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundSelectedDisabled}" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedDisabled}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="Red" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedPointerOver}" />
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="Green" />
<Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedPressed}" />
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="InputModeStates">
<VisualState x:Name="InputModeDefault" />
<VisualState x:Name="TouchInputMode">
<VisualState.Setters>
<Setter Target="ContentPresenter.Margin" Value="{ThemeResource ComboBoxItemRevealThemeTouchPadding}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="GameControllerInputMode">
<VisualState.Setters>
<Setter Target="ContentPresenter.Margin" Value="{ThemeResource ComboBoxItemRevealThemeGameControllerPadding}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<ComboBox x:Name="FontsCombo" Header="Fonts" Height="200" Width="200"
ItemsSource="{x:Bind fonts}" DisplayMemberPath="Source" ItemContainerStyle="{StaticResource MyItemStyle}"/>
</Grid>
I changed the PointerOver color, Selected color, SelectedPointerOver color and SelectedPressed color.
I'm using Xamarin Forms 4.5.0.617 and want to use a VisualStateManager (https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual-state-manager) to change the style if an element is disabled. To apply this to all my styles, I have to use the x:Name="Normal" or "Disabled" or "Focused" multiple times, but Rider (https://www.jetbrains.com/de-de/rider/) says error
The app runs correctly (style is changing) but the warning of rider is still annoying.
Am I doing something wrong?
<?xml version="1.0" encoding="utf-8"?>
<Application
x:Class="ProjectApp.App"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:components="clr-namespace:Project.Components"
xmlns:converters="clr-namespace:Project.Converters"
xmlns:helpers="clr-namespace:Project.Helpers"
xmlns:iconize="clr-namespace:Plugin.Iconize;assembly=Plugin.Iconize">
<Application.Resources>
<ResourceDictionary>
<!-- Text -->
<Style
x:Key="Label"
TargetType="Label">
<Setter
Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState
x:Name="Normal">
<VisualState.Setters>
<Setter
Property="TextColor"
Value="Black" />
</VisualState.Setters>
</VisualState>
<VisualState
x:Name="Disabled">
<VisualState.Setters>
<Setter
Property="TextColor"
Value="Gray" />
</VisualState.Setters>
</VisualState>
<VisualState
x:Name="Focused">
<VisualState.Setters>
<Setter
Property="TextColor"
Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<!-- Picker -->
<Style
x:Key="Picker"
TargetType="Picker">
<Setter
Property="FontSize"
Value="14" />
<Setter
Property="TextColor"
Value="Black" />
<Setter
Property="VerticalOptions"
Value="Center" />
<Setter
Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState
x:Name="Normal">
<VisualState.Setters>
<Setter
Property="TextColor"
Value="Black" />
</VisualState.Setters>
</VisualState>
<VisualState
x:Name="Disabled">
<VisualState.Setters>
<Setter
Property="TextColor"
Value="Gray" />
</VisualState.Setters>
</VisualState>
<VisualState
x:Name="Focused">
<VisualState.Setters>
<Setter
Property="TextColor"
Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
You are not doing anything wrong. This is a confirmed known issue with Rider/ReSharper. I have already reported it here.
What I can suggest is that you upvote the issue and/or write a comment, so that they can escalate it and fix it quickly.
I have styled my radio Button to create a color picker. I have removed the content property of radio button and some other styling. See below.
Expected Behavior:Only the ellipse without the padding space around it.
But i am getting extra space around the ellipse even after setting width and height of the radio button. What I'm doing wrong?
My XAML:
<RadioButton x:Name="Blue" Tag="0" Width="32" Height="32"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
GroupName="ColorPicker"
Background="#C6F5F9" Checked="Color_Checked" Style="{StaticResource ColorPickerStyle}"/>
My Radio Button Style:
<Style x:Key="ColorPickerStyle" TargetType="RadioButton">
<Setter Property="Background" Value="{ThemeResource RadioButtonBackground}"/>
<Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}"/>
<Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}"/>
<Setter Property="Margin" Value="4,4,4,4"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="UseSystemFocusVisuals" Value="True"/>
<Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid x:Name="RootGrid" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="OuterEllipse" Stroke="Black" StrokeThickness="2" Width="{TemplateBinding Width}" Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" UseLayoutRounding="False"/>
<FontIcon x:Name="CheckGlyph" FontSize="16" Height="16" Width="16" Glyph=""
UseLayoutRounding="False" AutomationProperties.Name="Select"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Setting the MinWidth and MinHeight property to 0 fixed the issue.
I have some Button in my MainPage as shown below:
<Grid Grid.Row="1">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10" >
<Image Stretch="None" Source="Images/GameMainMenuIcon.png" Margin="0 0 0 50" />
<Button Style="{StaticResource ButtonGameLarge}">Button1</Button>
<Button Style="{StaticResource ButtonGameLarge}">Button2</Button>
<Button Style="{StaticResource ButtonGameLarge}">Button3</Button>
</StackPanel>
</Grid>
And in my Style.xaml file I wrote these styles for the Buttons:
<Style TargetType="Button" x:Key="ButtonGameLarge">
<Setter Property="VisualStateManager.VisualStateGroups">
<Setter.Value>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="Height" Value="80" />
<Setter Property="Width" Value="400" />
<Setter Property="Margin" Value="0 0 0 20" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="400" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="Height" Value="40" />
<Setter Property="Width" Value="200" />
<Setter Property="Margin" Value="0 0 0 10" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</Setter.Value>
</Setter>
</Style>
But it gives me these errors:
The property "VisualStateGroups" does not have an accessible setter.
Cannot assign 'VisualStateGroup' into property 'VisualStateGroups', type must be assignable to 'IList'
The property "VisualStateGroups" is not a DependencyProperty. To be used in markup, non-attached properties must be exposed on the target type with an accessible instance property "VisualStateGroups". For attached properties, the declaring type must provide static "GetVisualStateGroups" and "SetVisualStateGroups" methods.
How can I set multiple VisualState for a group of elements?
The attached property VisualStateManager.VisualStateGroups can be only applied to types that are derived from FrameworkElement.
For your problem, you can modify the style like this:
<Style x:Key="ButtonGameLarge" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="RootGrid.Height" Value="80" />
<Setter Target="RootGrid.Width" Value="400" />
<Setter Target="RootGrid.Margin" Value="0,0,0,20" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="400" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="RootGrid.Height" Value="40" />
<Setter Target="RootGrid.Width" Value="200" />
<Setter Target="RootGrid.Margin" Value="0,0,0,10" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As it in my code, we can attach your VisualStateManager.VisualStateGroups to the RootGrid inside of Button which derived from FrameworkElement.
You should set visual states in the control template, and than reuse the control multiple times. Here you can find examples
I have a page that doesn't want to set the font size of a TextBlock as it resizes. I am using a VisualStateManager, but I must be doing something wrong.
<Page
x:Class="MyUWP.Pages.SplashPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:StoryFractalUWP.Pages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainTitle.FontSize" Value="36" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainTitle.FontSize" Value="72" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1000" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainTitle.FontSize" Value="110" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel Background="White" x:Name="MainPanel">
<TextBlock x:Name="MainTitle" RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
>MyApp</TextBlock>
</RelativePanel>
</Page>
What am I doing wrong?
I think it should work if you put VisualStateManager code inside RelativePanel:
<RelativePanel Background="White" x:Name="MainPanel">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainTitle.FontSize" Value="36" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainTitle.FontSize" Value="72" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1000" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainTitle.FontSize" Value="110" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="MainTitle" RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True" FontSize="20" Foreground="Red"
>MyApp</TextBlock>
</RelativePanel>