Reputation: 1079
WPF change background of disabled buttons
I am trying to learn WPF and I have made a simple Tic Tac Toe application. The application works but I'm trying to style it a bit. I can't find out how to set the button disabled background for all my buttons (and keep the content visible). My question is how set up the code in the resource dictionary? The commented code is what I tried. To give all buttons the same style I added a resource dictionary.
The resource dictionary
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<!--<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding Path=SelectedDate,
StringFormat={}{0:d},
RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Center" HorizontalAlignment="Left"
Padding="4,0,0,0" />
</Border>-->
<!--<Border BorderBrush="Aquamarine" BorderThickness="1"></Border>-->
<!-- Outer Rectangle with rounded corners. -->
<!-- Present Content (text) of the button. -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
App.xaml
<Application x:Class="FirstApplication.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary Source="ResourceDictionary.xaml" />
</Application.Resources>
</Application>
MainWindow.xaml
<Window x:Class="FirstApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="525">
<Grid Margin="0,0,0.4,-19.2" Name="controlGrid">
<Button x:Name="A" Content="" HorizontalAlignment="Left" Margin="117,59,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="B" Content="" HorizontalAlignment="Left" Margin="223,59,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="C" Content="" HorizontalAlignment="Left" Margin="330,59,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="D" Content="" HorizontalAlignment="Left" Margin="117,157,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" RenderTransformOrigin="0.302,0.614" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="E" Content="" HorizontalAlignment="Left" Margin="223,157,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="F" Content="" HorizontalAlignment="Left" Margin="330,157,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="G" Content="" HorizontalAlignment="Left" Margin="117,255,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="H" Content="" HorizontalAlignment="Left" Margin="223,255,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="I" Content="" HorizontalAlignment="Left" Margin="330,255,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<ToolBar Margin="0,0,0,450.6">
<Button Name="newButton" Click="newButton_Click">New</Button>
</ToolBar>
</Grid>
</Window>
Upvotes: 0
Views: 1919
Answers (1)
Reputation: 10220
Possibly more than you were looking for:
<Style TargetType="{x:Type Button}" x:Key="ButtonBase">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Foreground" Value="#FF959595" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="10,0" />
<Setter Property="Margin" Value="2" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Height" Value="25" />
<Setter Property="MinWidth" Value="100" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation To="#FFFFFFFF" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0:0:0.07" />
<ColorAnimation To="#FFDEDEDE" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Duration="0:0:0.07" />
<ColorAnimation To="#FF959595" Storyboard.TargetName="BrBrush"
Storyboard.TargetProperty="Color" Duration="0:0:0.07" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation To="#FF00B4E4" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0:0:0.07" />
<ColorAnimation To="#FF0083C3" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Duration="0:0:0.07" />
<ColorAnimation To="#FF4C7B8F" Storyboard.TargetName="BrBrush"
Storyboard.TargetProperty="Color" Duration="0:0:0.07" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation To="#DBEDFD" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0:0:0.05" />
<ColorAnimation To="#C4E0FC" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Duration="0:0:0.05" />
<ColorAnimation To="#4C7B8F" Storyboard.TargetName="BrBrush"
Storyboard.TargetProperty="Color" Duration="0:0:0.05" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation To="#EFEFEF" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0:0:0" />
<ColorAnimation To="#EFEFEF" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Duration="0:0:0" />
<ColorAnimation To="#D9D9D9" Storyboard.TargetName="BrBrush"
Storyboard.TargetProperty="Color" Duration="0:0:0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Chrome" BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<Border.BorderBrush>
<SolidColorBrush x:Name="BrBrush" Color="#ACACAC" />
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush x:Name="BgBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF0F0F0" Offset="0" />
<GradientStop Color="#FFE5E5E5" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="#FFFFFF" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Foreground" Value="#000000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Edit based on comments/feedback by King King
The above example is certainly more than the OP has requested, however, considering the context of the question and their interest in Button control State styling, I felt it advantageous to provide additional detail (albeit without explanation admittedly).
Prior to <Setter Property="Tempalte"> I am altering the basic visual style of the Button control. I should hope none of this requires explaining as it seems fairly self explanatory.
Post <Setter Property="Template"> I am altering the visual states of the Button ControlTemplate (these being Normal, MouseOver, Pressed & Disabled). This allows me to customise the look and feel of the Button whilst it is in one of these states. In this example I am using a StoryBoard so that I can animate the Buttons State transitions.
The four States are styled in a similar format (animated gradient background & animated solid border), the differences between these states being the colours and durations they employ to provide the desired effect.
After the VisualStates I alter the main content template, how I want the Button control to be presented. I provide a ContentPresenter which will be used to display the content of the Button, I bind certain characteristics of the ContentPresenter to the Button being template, allowing for these characteristics to be controlled on a per Button basis if so desired. The ContentPresenter is surrounded by a Border which defines a BrBrush (boarder brush) and a BgBrush (background brush). These are the same brushes that are referenced in the VisualStates templates and provide a default state for them to work to/from.
Finally I alter the ControlTemplate.Triggers, customising the visual style of the Button (its foreground colour in this example) based on the Property Value of the activated Trigger.
Upvotes: 1
Related Questions
- WPF Button change color when disabled
- WPF Disabled button's background
- How do I change the button style for disabled WPF buttons?
- When button isEnabled is false change background
- WPF Button Background when IsEnabled = False
- Change background color disabled togglebutton
- Change the disabled color of a button in XAML Windows 8
- Change Button Background when is not enabled
- Disabled button in WPF
- Is it possible to change the background color of a disabled button in WPF?