How do I use AdaptiveTriggers to change the font size of a StackPanel?

Question

In the XAML code below, I have multiple VisualStates. Each VisualState has an AdaptiveTrigger that searches for a minimum window width. My goal is to have the StackPanel's FontSize increase as the window size increases.

I've tried this by setting the VisualState.Setter as follows: Target="stackPanel.FontSize" Value="20"/> or Value="30" or Value="40", depending on the size of the window. This would occur whenever the AdaptiveTrigger.MinWindowWidth value is met. But this does not work as I had hoped.

Here is my sample code:

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="LargeScreen">
                <VisualState.StateTriggers>
                    <!--Increase FontSize to 40 when window width is >=1000 effective pixels.-->
                    <AdaptiveTrigger MinWindowWidth="1000"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="stackPanel.FontSize" Value="40"/>
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="MediumScreen">
                <VisualState.StateTriggers>
                    <!--Increase FontSize to 30 when window width >=720 effective pixels.-->
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="stackPanel.FontSize" Value="30"/>
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="SmallScreen">
                <VisualState.StateTriggers>
                    <!--Increase FontSize to 20 when window width >=200 effective pixels.-->
                    <AdaptiveTrigger MinWindowWidth="200"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="stackPanel.FontSize" Value="20"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <StackPanel x:Name="stackPanel" Orientation="Vertical" >
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="10" />
            </Style>
        </StackPanel.Resources>
        <TextBlock Text="Sample text line 1." />
        <TextBlock Text="Sample text line 2." />
    </StackPanel>
</Grid>

Interestingly, and as an entirely separate note, if you change the setter from this this:

<VisualState.Setters>
    <Setter Target="stackPanel.FontSize" Value="20"/>
</VisualState.Setters>

To this:

<VisualState.Setters>
    <Setter Target="stackPanel.Orientation" Value="Horizontal"/>
</VisualState.Setters>

Then the StackPanel's orientation is changed to Horizontal whenever the AdaptiveTrigger.MinWindowWidth value is met. I'm not sure what is different between stackPanel.Orientation and stackPanel.FontSize, but one clearly works in this context, and the other does not.

Roy Li - MSFT · Accepted Answer · 2022-10-13T08:47:24.723

There is no property called FontSize for the StackPanel Class and the StackPanel Class does contain an Orientation property. That's why stackPanel.Orientation works but stackPanel.FontSize failed.

If you want to change the size of TextBlock, you need to call TextBlock.FontSize. For example:

  <VisualState x:Name="LargeScreen">
                <VisualState.StateTriggers>
                    <!--Increase FontSize to 40 when window width is >=1000 effective pixels.-->
                    <AdaptiveTrigger MinWindowWidth="1000"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TextBlockOne.FontSize" Value="40"/>
                </VisualState.Setters>
            </VisualState>

 <TextBlock x:Name="TextBlockOne" Text="Sample text line 1." />

Update:

You could bind the FontSize property of other TextBlocks to the TextBlockOne. So when the FontSize property of the TextBlockOne changes, other TextBlocks change as well.

Like this:

   <TextBlock x:Name="TextBlockOne" Text="Sample text line 1." />
        <TextBlock  Text="Sample text line 2." FontSize="{Binding FontSize, ElementName=TextBlockOne,Mode=TwoWay}" />
        <TextBlock  Text="Sample text line 3." FontSize="{Binding FontSize, ElementName=TextBlockOne,Mode=TwoWay}" />

Hey, thanks a ton. Using your example, I named each `TextBlock` and referenced them inside ``, like so: `` and then: ``. Although I wonder if there is a way to change the properties of more than one TextBlock without having to reference each one by name? — Ramza, Oct 12 '22 at 13:14
@Ramza You could bind the FontSize property of other TextBlocks to the `TextBlockOne`. So when the FontSize property of the `TextBlockOne` changes, other TextBlocks change as well. I've updated my answer with sample code, please check it. — Roy Li - MSFT, Oct 13 '22 at 08:47

How do I use AdaptiveTriggers to change the font size of a StackPanel?

1 Answers1