C
C#•10mo ago
ElectricSteve

Disabled button Background & Foreground color

Hi, so I'm new to wpf and am trying to make my own app for private use. 
        <Grid DockPanel.Dock="Top" Height="30px" Tag="topbar" Background="#454545">
            <Grid.Resources>
                <Style TargetType="Button">
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="BorderThickness" Value="0"/>
                    <Style.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" Value="Transparent"/>
                            <Setter Property="Foreground" Value="#6E6E6E"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30px" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="30px" />
                <ColumnDefinition Width="30px" />
                <ColumnDefinition Width="30px" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Click="TabButtonsOnClick" Tag="home"><Image Source="{StaticResource IconHome}"/></Button>

            <Button Grid.Column="4" Click="ButtonBase_OnClick" Tag="close"><Image Source="{StaticResource IconClose}"/></Button>
            <Button Grid.Column="3" Click="ButtonBase_OnClick" Tag="restore" IsEnabled="False"><Image Source="{StaticResource IconRestore}"/></Button>
            <Button Grid.Column="2" Click="ButtonBase_OnClick" Tag="minimize" ><Image Source="{StaticResource IconMinimize}"/></Button>
        </Grid>
        <Grid DockPanel.Dock="Top" Height="30px" Tag="topbar" Background="#454545">
            <Grid.Resources>
                <Style TargetType="Button">
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="BorderThickness" Value="0"/>
                    <Style.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" Value="Transparent"/>
                            <Setter Property="Foreground" Value="#6E6E6E"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30px" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="30px" />
                <ColumnDefinition Width="30px" />
                <ColumnDefinition Width="30px" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Click="TabButtonsOnClick" Tag="home"><Image Source="{StaticResource IconHome}"/></Button>

            <Button Grid.Column="4" Click="ButtonBase_OnClick" Tag="close"><Image Source="{StaticResource IconClose}"/></Button>
            <Button Grid.Column="3" Click="ButtonBase_OnClick" Tag="restore" IsEnabled="False"><Image Source="{StaticResource IconRestore}"/></Button>
            <Button Grid.Column="2" Click="ButtonBase_OnClick" Tag="minimize" ><Image Source="{StaticResource IconMinimize}"/></Button>
        </Grid>
And am trying to get the disabled button to have a specific style, but it isn't working, I also couldn't find anything online. Also literaly setting the style like this: 
<Button Grid.Column="3" Click="ButtonBase_OnClick" Tag="restore" IsEnabled="False" Background="Transparent" Foreground="#6E6E6E">
<Button Grid.Column="3" Click="ButtonBase_OnClick" Tag="restore" IsEnabled="False" Background="Transparent" Foreground="#6E6E6E">
Also doesn't work. Can anyone help?
3 Replies
ElectricSteve
ElectricSteveOP•10mo ago
Anyone? really want to continue with my project and can't because I'm REALLY autistic
Neal
Neal•2mo ago
After hours of hunting (I too am on the spectrum), I finally found a solution at https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.control.background?view=windowsdesktop-9.0 You need to use a button template and a style trigger: <Button Name="Debug" IsEnabled="False" FontSize="10">Click the Background <Button.Template> <ControlTemplate TargetType="{x:Type Button}"> <Border Background="{TemplateBinding Background}"> <ContentPresenter/> </Border> </ControlTemplate> </Button.Template> <Button.Style> <Style TargetType="{x:Type Button}"> <Setter Property="Background" Value="Blue"/> <Style.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Background" Value="Green"/> </Trigger> </Style.Triggers> </Style> </Button.Style> </Button>
Control.Background Property (System.Windows.Controls)
Gets or sets a brush that describes the background of a control.
Neal
Neal•2mo ago
That's just a bare bones attempt, but the biggest hurdle (background color) is fixed. There are issues like: text isn't centered, there's no border, it needs padding on the left and right (to match standard buttons). I'll post an update when everything is working like it should. Update below... ... I've got a reasonable solution for Buttons. Other controls will likely need additional templates. Here's my App.xaml... <Application x:Class="MyApp.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:MyNamespace" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="DarkTheme.xaml" /> </ResourceDictionary.MergedDictionaries> <!-- Add more styles for other controls as needed --> </ResourceDictionary> </Application.Resources> </Application> Here's the code to switch themes in MainWindow.xaml.cs... private void LightThemeButton_Click(object sender, RoutedEventArgs e) { Uri lightThemeUri = new Uri("LightTheme.xaml", UriKind.Relative); ((App)Application.Current).ChangeTheme(lightThemeUri); } private void DarkThemeButton_Click(object sender, RoutedEventArgs e) { Uri darkThemeUri = new Uri("DarkTheme.xaml", UriKind.Relative); ((App)Application.Current).ChangeTheme(darkThemeUri); } Here's my DarkTheme.xaml... <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Color x:Key="BackgroundColor">#FF323232</Color> <Color x:Key="EditBackgroundColor">#FF282828</Color> <Color x:Key="ButtonBackgroundColor">#FF606060</Color> <Color x:Key="GrayedButtonBackgroundColor">#FF505050</Color> <Color x:Key="ForegroundColor">White</Color> <Color x:Key="GrayedForegroundColor">Gray</Color>
<SolidColorBrush x:Key="BackgroundBrush" Color="{StaticResource BackgroundColor}" /> <SolidColorBrush x:Key="EditBackgroundBrush" Color="{StaticResource EditBackgroundColor}" /> <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="{StaticResource ButtonBackgroundColor}" /> <SolidColorBrush x:Key="GrayedButtonBackgroundBrush" Color="{StaticResource GrayedButtonBackgroundColor}" /> <SolidColorBrush x:Key="ForegroundBrush" Color="{StaticResource ForegroundColor}" /> <SolidColorBrush x:Key="GrayedForegroundBrush" Color="{StaticResource GrayedForegroundColor}" /> <Style x:Key="CustomGridStyle" TargetType="Grid"> <Setter Property="Background" Value="{StaticResource BackgroundBrush}" /> </Style>
<Style x:Key="CustomTextStyle" TargetType="TextBlock"> <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" /> <Setter Property="Background" Value="{StaticResource BackgroundBrush}" /> </Style>
<Style x:Key="CustomTextBoxStyle" TargetType="TextBox"> <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" /> <Setter Property="Background" Value="{StaticResource EditBackgroundBrush}" /> <Setter Property="BorderBrush" Value="White" /> </Style> ...continued on next post... <Style x:Key="CustomButtonStyle" TargetType="{x:Type Button}"> <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" /> <Setter Property="Background" Value="{StaticResource ButtonBackgroundBrush}" /> <Setter Property="BorderBrush" Value="Gray" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border Background="{TemplateBinding Background}" Padding="5,0,5,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="2"> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsEnabled" Value="True"> <Setter Property="Foreground" Value="{DynamicResource ForegroundBrush}"/> <Setter Property="Background" Value="{DynamicResource ButtonBackgroundBrush}"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="{DynamicResource GrayedForegroundBrush}"/> <Setter Property="Background" Value="{DynamicResource GrayedButtonBackgroundBrush}"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#FF99B1CC"/> <!-- this is darker than the standard highlight #FFBEE6FD --> </Trigger> </Style.Triggers> </Style> </ResourceDictionary> And here's my LightTheme.xaml... <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Color x:Key="BackgroundColor">LightGray</Color> <Color x:Key="EditBackgroundColor">White</Color> <Color x:Key="ButtonBackgroundColor">#FFC3C3C3</Color> <Color x:Key="GrayedButtonBackgroundColor">#FFE3E3E3</Color> <Color x:Key="ForegroundColor">Black</Color> <Color x:Key="GrayedForegroundColor">Gray</Color>
<SolidColorBrush x:Key="BackgroundBrush" Color="{StaticResource BackgroundColor}" /> <SolidColorBrush x:Key="EditBackgroundBrush" Color="{StaticResource EditBackgroundColor}" /> <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="{StaticResource ButtonBackgroundColor}" /> <SolidColorBrush x:Key="GrayedButtonBackgroundBrush" Color="{StaticResource GrayedButtonBackgroundColor}" /> <SolidColorBrush x:Key="ForegroundBrush" Color="{StaticResource ForegroundColor}" /> <SolidColorBrush x:Key="GrayedForegroundBrush" Color="{StaticResource GrayedForegroundColor}" /> <Style x:Key="CustomGridStyle" TargetType="Grid"> <Setter Property="Background" Value="{StaticResource BackgroundBrush}" /> </Style>
<Style x:Key="CustomTextStyle" TargetType="TextBlock"> <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" /> <Setter Property="Background" Value="{StaticResource BackgroundBrush}" /> </Style>
<Style x:Key="CustomTextBoxStyle" TargetType="TextBox"> <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" /> <Setter Property="Background" Value="{StaticResource EditBackgroundBrush}" /> <Setter Property="BorderBrush" Value="Black" /> </Style> ...continued on next post... <Style x:Key="CustomButtonStyle" TargetType="{x:Type Button}"> <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" /> <Setter Property="Background" Value="{StaticResource ButtonBackgroundBrush}" /> <Setter Property="BorderBrush" Value="Gray" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border Background="{TemplateBinding Background}" Padding="5,0,5,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="2"> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsEnabled" Value="True"> <Setter Property="Foreground" Value="{DynamicResource ForegroundBrush}"/> <Setter Property="Background" Value="{DynamicResource ButtonBackgroundBrush}"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="{DynamicResource GrayedForegroundBrush}"/> <Setter Property="Background" Value="{DynamicResource GrayedButtonBackgroundBrush}"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#FFBEE6FD"/> <!-- this is the standard highlight --> </Trigger> </Style.Triggers> </Style> </ResourceDictionary> And here's a button definition... <Button Name="ClearButton" Content="Clear" Click="ClearButton_Click" Style="{DynamicResource CustomButtonStyle}" Height="24"/> If you don't like the rounded corners on the buttons, get rid of CornerRadius="2"

Did you find this page helpful?