WPF button problem with style

Question

Hello.. I have to create a custom styled button. The problem is that although i change everything when mouseovering it or when it has focus it gets the original colors! Tried to set FocusVisualStyle="{x:Null}" but it keeps doing it....

<Button Content="Button" Height="143" Margin="85,76,190,0" VerticalAlignment="Top" FocusVisualStyle="{x:Null}" Background="#FFE9D7D7"/>

what can i do?

Answer 1

The visuals you are seeing may be coming from the default control template, which includes window chrome. You may want to try creating a custom template for the button, which will give you full controls of the visual elements.

Answer 2

Even though you defined a custom style, the button still inherits some properties from the default style if you didn't set them in your custom style. So you have two options:

• set OverridesDefaultStyle to true on the button so that it doesn't inherit the default style
• set the background/border/foreground brushes explicitly in the custom style

Answer 3

The default button template is the overriding your style. so you have crete your own control template for the button. Here is one example.

 <Style x:Key="InformButton" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="2"/>
        <Setter Property="FontFamily" Value="Verdana"/>
        <Setter Property="FontSize" Value="11px"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <!--<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisual}" />-->
        <Setter Property="Background" >
            <Setter.Value>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                    <GradientStop Color="#FFFFD190" Offset="0.2"/>
                    <GradientStop Color="Orange" Offset="0.85"/>
                    <GradientStop Color="#FFFFD190" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
            BorderThickness="1"
            Padding="4,2" 
            BorderBrush="DarkGray" 
            CornerRadius="3" 
            Background="{TemplateBinding Background}">
                        <Grid >
                            <ContentPresenter HorizontalAlignment="Center" 
                           VerticalAlignment="Center" Name="contentShadow" 
                >
                                <ContentPresenter.RenderTransform>
                                    <TranslateTransform X="1.0" Y="1.0" />
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                            <ContentPresenter HorizontalAlignment="Center" 
                        VerticalAlignment="Center" Name="content"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="#FF4788c8" />
                            <Setter Property="Foreground" Value="#FF4788c8" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" >
                                <Setter.Value>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                        <GradientStop Color="#FFFFD190" Offset="0.35"/>
                                        <GradientStop Color="Orange" Offset="0.95"/>
                                        <GradientStop Color="#FFFFD190" Offset="1"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter TargetName="content" Property="RenderTransform" >
                                <Setter.Value>
                                    <TranslateTransform Y="1.0" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsDefaulted" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="border" Property="Opacity" Value="0.7" />
                            <Setter Property="Foreground" Value="Gray" />
                        </Trigger>

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