WPF Style Trigger

Question

I change the FontSize of Text in a Style trigger, this causes the Control containing the text to resize as well. How can I change the Fontsize without affecting the parent's size?

Solution 1

A nice trick to isolate an element from its parent layout wise is to place the element in a Canvas

In the markup below there are two copies of your element The first is hidden and establishes the size of your control The second is visible but wrapped in a Canvas so its layout size does not affect the parent.

<Parent>
  <Grid>
    <Element Visibility="Hidden"/>
    <Canvas>
      <Element />
    </Canvas>
  <Grid>
</Parent>

Solution 2

You can increase the Padding at the same time you decrease the FontSize - this will cause the calculated height of the Button to remain the same:

<StackPanel>
    <Button Content="ABC">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="FontSize" Value="20"/>
                <Style.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="FontSize" Value="12"/>
                        <Setter Property="Padding" Value="5"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
    <Button Margin="0,20" Content="123" FontSize="20"/>
    <Button Content="Do Re Mi" FontSize="20"/>
</StackPanel>

You can do the reverse and set a negative Padding if the FontSize is increasing, as well.

You could also use a binding from FontSize to Padding to accomplish the same thing in a general way, but if you're only dealing with a fixed set of FontSizes it would be easier to just hardcode it as above.

Solution 3

I am creating a ControlTemplate for a ButtonControl so it looks like a label (flat text, no borders) with triggers for IsKeyboardFocused, IsPressed, IsDefaulted etc.

The IsPressed is defined to drop the FontSize (from default of 30) down to 28. To give a pressed animation effect.

One use of these Buttons is a horizontal StackPanel of Button, separated by vertical separators. When the IsPressed trigger is fired on a button and it is resized, the entire row of buttons gets re adjusted, which is not a pleasing visual effect.

My preference is for a template based solution, to avoid introducing new controls in order to provide overrides. The only problem with the hard coded size approach is internationalisation, other languages will increase the orginal size.

The solution I am going with is to set the minWidth in C# after the button's DesiredSize has been calculated. Note that Width is NaN even after the Button is rendered hence the use/existence of DesiredSize. Later I will try and XAMLize the C#.