Styles in App.xaml doesn't show the foreground white on a button

simsenVejle

Well-known member
Joined
Feb 14, 2021
Messages
46
Programming Experience
Beginner
I have made me a style for the buttons that does (almost) what I want except from one thing. The text is black no matter what color I set in the foreground.

I have tried copying other styles examples which says the foreground is white. Still black. I have tried to make a label in the button and make the foreground for that label white. Still black. I thought it could have something with the fact that the button is in my styled TabControl so took the button outside out from the tabs but still black. So now I hope one of You can help me.

When looking at the designer showing me the button text at white but running the code, it is black.

The button in the UserControl AccountView

Best regards
SimsenVejle :)


AccountView:
<UserControl xmlns:syncfusion="http://schemas.syncfusion.com/wpf"  x:Class="Views.Account.AccountView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:Views.Account"
             mc:Ignorable="d"
             d:DesignHeight="600" d:DesignWidth="1200">
    <Grid>
        <TabControl x:Name="tabAccountView">
            <TabItem Header="Platform">
                <!--<Button Content="Slet" Style="{StaticResource myButtonStyle}" />-->
                <Button Content="Slet" Foreground="White" />
            </TabItem>
            <TabItem Header="Miljø">
            </TabItem>
            <TabItem Header="Miljø Version">
            </TabItem>
            <TabItem Header="Komponent">
            </TabItem>
            <TabItem Header="Prioritet">
            </TabItem>
            <TabItem Header="Sværhedsgrad">
            </TabItem>
            <TabItem Header="Status">
            </TabItem>
            <TabItem Header="Kategori">               
            </TabItem>   
        </TabControl>       
    </Grid>
</UserControl>


The App.xaml with the styles:
<Application
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:AnsiBug"
             xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Class="AnsiBug.App"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!--#region Textblock -->
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="10" />
        </Style>
        <!--#endregion-->

        <!--#region Label -->
        <Style TargetType="{x:Type Label}">
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="10" />
        </Style>
        <!--#endregion-->

        <!--#region Textbox -->
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="10" />
        </Style>
        <!--#endregion-->

        <!--#region Buttons -->

        <Style TargetType="{x:Type Button}">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="10" />
            <Setter Property="Width" Value="122" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="BorderBrush" Value="White" />
            <Setter Property="Height" Value="30" />
            <Setter Property="Padding" Value="15 15 15 15" />
            <Setter Property="Background" Value="#005b7f" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter x:Name="PART_Content"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          TextElement.Foreground="{TemplateBinding Foreground}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="FontWeight" Value="Bold" />
                    <Setter Property="Background" Value="#5c99b1" />
                    <Setter Property="Foreground" Value="White" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Foreground" Value="White" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <!--#endregion-->
        
        <!--#region Top Menu knapper-->
        <Style TargetType="{x:Type Button}" x:Key="TopMenuButton">           
            <!--<Setter Property="Background" Value="White"/>-->
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="Width" Value="122" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Top" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="BorderBrush" Value="#005b7f" />
            <Setter Property="Height" Value="30" />
            <Setter Property="Padding" Value="15 15 15 15" />
            <Setter Property="ContextMenuService.IsEnabled" Value="False" />
            <Setter Property="ContextMenuService.Placement" Value="Bottom" />
            <Setter Property="ContextMenuService.PlacementTarget" Value="{Binding ElementName=BtnReports}" />
            <Setter Property="ContextMenuService.ShowOnDisabled" Value="False" />
            <Setter Property="Background">
                <Setter.Value>
                    <!--Øverste knap on mouse over-->
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0.465"/>
                        <GradientStop Color="White" Offset="0.526"/>
                        <GradientStop Color="#005b7f" Offset="0.991"/>
                        <GradientStop Color="#005b7f" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter x:Name="PART_Content"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          TextElement.Foreground="{TemplateBinding Foreground}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="White" />
                    <Setter Property="FontWeight" Value="Bold" />
                    <Setter Property="Padding" Value="15 15 15 15" />
                    <Setter Property="Background">
                        <Setter.Value>
                            <!--Øverste knap on mouse over-->
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="White" Offset="0.465"/>
                                <GradientStop Color="White" Offset="0.526"/>
                                <GradientStop Color="#005b7f" Offset="0.991"/>
                                <GradientStop Color="#005b7f" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        
        <!--#endregion-->

        <!--#region ContextMenu -->
        <Style TargetType="{x:Type ContextMenu}">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Width" Value="122" />
            <Setter Property="Placement" Value="Bottom" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ContextMenu}">
                        <Border BorderThickness="1" CornerRadius="4" BorderBrush="Black" x:Name="Border" Background="#005b7f">
                            <StackPanel ClipToBounds="True" Orientation="Vertical" IsItemsHost="True" Background="#005b7f" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="White" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type MenuItem}">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Margin" Value="-5,0,0,0" />
            <Setter Property="Height" Value="30" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <Border x:Name="Border" Padding="10,5,10,5" BorderThickness="0" Margin="0">
                            <ContentPresenter ContentSource="Header" x:Name="HeaderHost" RecognizesAccessKey="True" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsHighlighted" Value="true">
                                <Setter Property="Background" TargetName="Border" Value="#5c99b1"/>
                                <Setter Property="Foreground" Value="White" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>           
        </Style>
        <!--#endregion-->

        <!--#region TabControl -->
        <Style TargetType="{x:Type TabControl}">
            <Setter Property="TabStripPlacement" Value="Left"/>
            <Setter Property="Width" Value="1120"/>
            <Setter Property="Height" Value="550"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="FontFamily" Value="Verdana"/>
            <Setter Property="FontSize" Value="10"/>
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Background" Value="Black" />
            <Setter Property="FontFamily" Value="Verdana"/>
            <Setter Property="FontSize" Value="10"/>
            <Setter Property="Width" Value="110"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <Border Name="Border"
                                    BorderThickness="1,1,1,1"
                                    CornerRadius="0,0,0,0"
                                    Height="40" BorderBrush="Black">
                                <ContentPresenter x:Name="ContentSite"
                                                  VerticalAlignment="Center"
                                                  HorizontalAlignment="Left"
                                                  ContentSource="Header"
                                                  Margin="12,2,12,2"
                                                  RecognizesAccessKey="True" />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="#5c99b1" />
                                <Setter Property="Foreground" Value="White" />
                                <Setter Property="FontWeight" Value="ExtraBold" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="Border" Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="White" Offset="0.465"/>
                                            <GradientStop Color="White" Offset="0.526"/>
                                            <GradientStop Color="#005b7f" Offset="0.991"/>
                                            <GradientStop Color="#005b7f" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="Border" Value="#5c99b1"/>
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type TabControl}" x:Key="tabControlSmall">
            <Setter Property="TabStripPlacement" Value="Left"/>
            <Setter Property="Width" Value="1120"/>
            <Setter Property="Height" Value="550"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="FontFamily" Value="Verdana"/>
            <Setter Property="FontSize" Value="10"/>
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style TargetType="{x:Type TabItem}" x:Key="tabItemSmall">
            <Setter Property="Background" Value="Black" />
            <Setter Property="FontFamily" Value="Verdana"/>
            <Setter Property="FontSize" Value="10"/>
            <Setter Property="Width" Value="110"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <Border Name="Border"
                                    BorderThickness="1,1,1,1"
                                    CornerRadius="0,0,0,0"
                                    Height="40" BorderBrush="Black">
                                <ContentPresenter x:Name="ContentSite"
                                                  VerticalAlignment="Center"
                                                  HorizontalAlignment="Left"
                                                  ContentSource="Header"
                                                  Margin="12,2,12,2"
                                                  RecognizesAccessKey="True" />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="#5c99b1" />
                                <Setter Property="Foreground" Value="White" />
                                <Setter Property="FontWeight" Value="ExtraBold" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="Border" Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="White" Offset="0.465"/>
                                            <GradientStop Color="White" Offset="0.526"/>
                                            <GradientStop Color="#005b7f" Offset="0.991"/>
                                            <GradientStop Color="#005b7f" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="Border" Value="#5c99b1"/>
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--#endregion-->
    </Application.Resources>
</Application>
 
It comes down to this:
XML:
<Style TargetType="{x:Type TextBlock}">
    <Setter Property="Foreground" Value="Black"/>
</Style>

<Style TargetType="{x:Type Button}">
    <Setter Property="Foreground" Value="White" />
</Style>
Button text is shown with a TextBlock in default control template. Why Implicit TextBlock Style Takes Over Everything
 
Solution
It comes down to this:
XML:
<Style TargetType="{x:Type TextBlock}">
    <Setter Property="Foreground" Value="Black"/>
</Style>

<Style TargetType="{x:Type Button}">
    <Setter Property="Foreground" Value="White" />
</Style>
Button text is shown with a TextBlock in default control template. Why Implicit TextBlock Style Takes Over Everything
Thank you so much. That I didn't know. And it worked.

Best regards
Simsen :)
 
Back
Top Bottom