how to change the style of a textblock in a button

Question

I need to change the style of a textblock that it is inside a button..

here are my two styles:

        <Style x:Key="btnStyleLR" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI Light" />
            <Setter Property="FontSize" Value="40" />
            <Setter Property="Padding" Value="0,20,0,20" />
        </Style>

            <Style x:Key="btnStyleLROverride" BasedOn="{StaticResource btnStyleLR}" TargetType="TextBlock">
            <Setter Property="FontSize" Value="10" />
            <Setter Property="Padding" Value="0,10,0,10" />
        </Style>

and then:

        <Style x:Key="btnLoginRegister" TargetType="Button">
            <Setter Property="Width" Value="400" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Border x:Name="brd"
                                    BorderBrush="Orange"
                                    BorderThickness="1"
                                    CornerRadius="6">

                                <TextBlock HorizontalAlignment="Center"
                                           Style="{TemplateBinding Tag}"
                                           Text="{TemplateBinding Content}" />
                            </Border>
                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

I bind the style in the tag property of the button pero it is not works. then I have two buttons that I need to change de textblock style:

                    <Button x:Name="loginBtn"
                        Style="{StaticResource btnLoginRegister}"
                        Tag="btnStyleLROverride"
                        Content="Login" />

and the other:

            <Button x:Name="registerBtn"
                Content="Register"
                Tag="btnStyleLR"
                Style="{StaticResource btnLoginRegister}" />

is there another way to change the style with bind that works? thanks

Answer 1

In Tag you have to provide resource value, not string. It should be:

<Button x:Name="loginBtn"
        Style="{StaticResource btnLoginRegister}"
        Tag="{StaticResource btnStyleLROverride}"
        Content="Login" />

Do it same way for other button.

Answer 2

You shouldn't destroy a button's template like that, unless it's only for the purpose of this question. The simple solution to your problem is to simply set the TextBlock as the button's content and then you can change its style without hacking through the templates.

Answer 3

As far as I understood your requirements: You have two Buttons ("Login" and "Register") which need to be visually reduced (should not use visual states) and which have their own "text style" each (but maybe sharing a base style)? Is this correct? If this is the case I recommend two different Button Styles (maybe sharing the same base style):

<Button x:Name="loginBtn" Content="Login"
        Style="{StaticResource LoginButtonStyle}"/>
<Button x:Name="registerBtn" Content="Register"
        Style="{StaticResource RegisterButtonStyle}"/>

And your styles:

<Style x:Key="PlainButtonStyle" TargetType="Button">
    <Setter Property="FontFamily" Value="Segoe UI Light"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border BorderBrush="Orange" BorderThickness="1" CornerRadius="6">
                    <TextBlock Text="{TemplateBinding Content}"
                        Padding="{TemplateBinding Padding}"
                        HorizontalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="LoginButtonStyle"
       BasedOn="{StaticResource PlainButtonStyle}" TargetType="Button">
    <Setter Property="FontSize" Value="10"/>
    <Setter Property="Padding" Value="0,10,0,10"/>
</Style>
<Style x:Key="RegisterButtonStyle"
       BasedOn="{StaticResource PlainButtonStyle}" TargetType="Button">
    <Setter Property="FontSize" Value="40"/>
    <Setter Property="Padding" Value="0,20,0,20"/>
</Style>

Properties like FontSize and FontFamily are inherited.