xamluwpvisualstatemanager

Using UWP VisualStateManager with varables


I can use VisualStateManager to change individual properties of controls. Something like this:

           <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--small window-->
                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Control1.FontSize" Value="13"/>
                        <Setter Target="Control2.FontSize" Value="13"/>
                        <Setter Target="Control3.FontSize" Value="13"/>
                        <Setter Target="Control4.FontSize" Value="13"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--large window-->
                        <AdaptiveTrigger MinWindowHeight="665" MinWindowWidth="1000"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Control1.FontSize" Value="24"/>
                        <Setter Target="Control2.FontSize" Value="24"/>
                        <Setter Target="Control3.FontSize" Value="24"/>
                        <Setter Target="Control4.FontSize" Value="24"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

This works but is soooo much typing!

Is it possible to use VisualStateManager to set a value for the font and than refer to this variable in XAML?

Something like this:

          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--small window-->
                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="@MyFontSize" Value="13"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--large window-->
                        <AdaptiveTrigger MinWindowHeight="665" MinWindowWidth="1000"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="@MyFontSize" Value="24"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

I could then use @MyFontSize variable in XAML when designing controls and I could change it in one place.

<TextBlock x:Name="Control1" FontSize="@MyFontSize"/>
<TextBlock x:Name="Control2" FontSize="@MyFontSize"/>
<TextBlock x:Name="Control3" FontSize="@MyFontSize"/>

Is it possible to do something like this with UWP VisualStateManager?


Solution

  • Is it possible to use VisualStateManager to set a value for the font and than refer to this variable in XAML

    I'm afraid you can't set variable within VisualStateManager, But for your scenario, we have a workaround that use Setting class as medium and effect other TextControl with MVVM bind.

    For example

    public class Setting : INotifyPropertyChanged
    {
        private double _fontSize = 10;
        public double CFontSize
        {
            get { return _fontSize; }
            set { _fontSize = value; OnPropertyChanged(); }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
    
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    

    Usage

    <Page.Resources>
        <local:Setting x:Key="Setting" />
    </Page.Resources>
    <StackPanel>
        <TextBlock
            x:Name="BaseControl"
            VerticalAlignment="Center"
            FontSize="{Binding CFontSize, Source={StaticResource Setting}, Mode=TwoWay}"
            Text="Hello" />
        <TextBlock
            x:Name="Control1"
            VerticalAlignment="Center"
            FontSize="{Binding CFontSize, Source={StaticResource Setting}, Mode=TwoWay}"
            Text="How are you" />
        <TextBlock
            x:Name="Control2"
            VerticalAlignment="Center"
            FontSize="{Binding CFontSize, Source={StaticResource Setting}, Mode=TwoWay}"
            Text="Fine thank you, and you?" />
    
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--  small window  -->
                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="BaseControl.FontSize" Value="13" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--  large window  -->
                        <AdaptiveTrigger MinWindowHeight="665" MinWindowWidth="1000" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="BaseControl.FontSize" Value="24" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </StackPanel>