CODEWITHSUNDEEP
wpf
SeyoS
SeyoS

Reputation: 681

Override button BackGround color if triggered

I have a a button style that is used for all my button. It contains a part with a trigger on IsEnabled :

        <Style x:Key="FlatButton" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="#4CAF50"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="10 5"/>
            <Setter Property="FontSize" Value="14" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border
                            x:Name="Border"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" />

                            <ContentPresenter
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Margin="{TemplateBinding Padding}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            RecognizesAccessKey="True" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Foreground" Value="White"/>
                                <Setter Property="Background" Value="{StaticResource MaterialGrey}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Because of their purpose, each button has its own color like :

<Button Background="Green"/>

Because of this setter, Background's color don't change when IsEnabled = False. Is there a way to override this color when IsEnabled = False ? Therefore, all my buttons will be gray when disabled irrespective of their original background color.

Thanks for your help.

Upvotes: 0

Views: 1265

Answers (2)

AnjumSKhan
AnjumSKhan

Reputation: 9827

Shift your Background to Style like in example below : 

 <ControlTemplate>
  <ControlTemplate.Resources>
     <Style TargetType={...}>
        <Setter Property="Background" Value="Green"/>
     </Style>
  </ControlTemplate.Resources>
  <ControlTemplate.Triggers>
     <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Gray"/>
     </Trigger>
  </ControlTemplate.Triggers>
  ...
 </ControlTemplate>

If you do not want to shift Background to Style, then use ColorAnimation in your Trigger to change Foreground like in this answer .

Upvotes: 0

mm8
mm8

Reputation: 169150

A Style setter cannot set a property that has a local value but you could set the TargetName of the Setter in your ControlTemplate to "Border" to change the background of the Border element:

    <Style x:Key="FlatButton" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="#4CAF50"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="10 5"/>
        <Setter Property="FontSize" Value="14" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Border
                        x:Name="Border"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}" />

                        <ContentPresenter
                         x:Name="cp"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        Margin="{TemplateBinding Padding}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        RecognizesAccessKey="True" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="cp" Property="TextBlock.Foreground" Value="White"/>
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource MaterialGrey}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 <Button Background="Blue" Content="Button" Style="{StaticResource FlatButton}" IsEnabled="False" />

Upvotes: 1

Related Questions