CODEWITHSUNDEEP
c#xaml
Blerta Dhimitri
Blerta Dhimitri

Reputation: 3473

How to set the button content color using visual state manager in XAML?

I have the following Page.Resource which I have defined for a button:

<Page.Resources>
        <Style x:Key="MyButton" TargetType="Button">
            <Setter Property="Margin" Value="2"/>
            <Setter Property="FontFamily" Value="Verdana"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">                   
                            <Grid>
                                <Grid.Background>
                                <SolidColorBrush x:Name="ButtonBrush"  Color="#FF2D36E6"/>
                            </Grid.Background>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

This is where i define the button and apply the resource to it, but when I run the app I just don't see the content of the button which I have set to "NEXT".

<Grid>
...
...
<Button  Name="btnNext" Style="{StaticResource ResourceKey=MyButton}" Grid.Row="0"  Click="btnNext_Click" Content="NEXT" VerticalAlignment="Bottom"  Padding="20"  Width="650" Grid.Column="2" HorizontalAlignment="Right" Height="600" FontSize="48" BorderThickness="0" FontWeight="ExtraBlack"  />
...
...
</Grid>

How can I solve this?

Upvotes: 0

Views: 538

Answers (1)

d.moncada
d.moncada

Reputation: 17392

No need to re-define the Template inside the Button if all you're doing is setting the Background.

Update your style to:

   <Style x:Key="MyButton" TargetType="Button">
        <Setter Property="Margin" Value="2"/>
        <Setter Property="FontFamily" Value="Verdana"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="#FF2D36E6" />
    </Style>

..and then use it as you already are (w/ Content being set within the Button's attribute explicitly.

Also, if you wanted to use your style that you've already defined, you'll need to provide a ContentPresenter inside the Template:

<Style x:Key="MyButton" TargetType="Button">
    <Setter Property="Margin" Value="2"/>
    <Setter Property="FontFamily" Value="Verdana"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">                   
                <Grid>
                    <Grid.Background>
                        <SolidColorBrush x:Name="ButtonBrush"  Color="#FF2D36E6"/>
                    </Grid.Background>
                     <ContentPresenter x:Name="contentPresenter"
                                       Content="{TemplateBinding Content}"
                                       ContentTemplate="{TemplateBinding ContentTemplate}"
                                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                       Margin="{TemplateBinding Padding}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 2

Related Questions