CODEWITHSUNDEEP
c#.netwpfxaml.net-core
Beckam White
Beckam White

Reputation: 143

WPF Override control background property

I'm kind of new to WPF and I'm not really sure how the whole thing works. I have three buttons below, which I would like to be individually coloured. I also want them to be transparent and have grey text when they are disabled.

I want them to retain the Background colour property assigned in MainWindow.xaml when they are enabled and be transparent when disabled.

I'm not sure how I would go about this. Does it involve templates, styles, binding converters? Any help would be greatly appreciated.

MainWindow.xaml

<Button Grid.Column="0" Content="Suspend" Style="{StaticResource BubbleButton}" IsEnabled="True" Background="Blue"/>
<Button Grid.Column="1" Content="Training Mode" Style="{StaticResource BubbleButton}" IsEnabled="True" Background="Orange"/>
<Button Grid.Column="2" Content="Exit Program" Style="{StaticResource BubbleButton}" Background="Red"/>

App.xaml

<Style x:Key="BubbleButton" TargetType="{x:Type Button}">

    <!-- Triggers -->
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Trigger.Setters>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Foreground" Value="Gray"/>
            </Trigger.Setters>
        </Trigger>
    </Style.Triggers>

    <!-- Style -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border CornerRadius="10" Background="{TemplateBinding Background}" Name="Button" Margin="10,5,10,5">
                    <Grid>
                        <Border BorderThickness="1,0,1,1" BorderBrush="Black" CornerRadius="{Binding ElementName=Button, Path=CornerRadius}">
                            <Border.Effect>
                                <BlurEffect Radius="2" KernelType="Gaussian"/>
                            </Border.Effect>
                        </Border>
                        <Border BorderThickness="0,1,0,0" BorderBrush="White" Margin="2" Opacity="0.7" CornerRadius="{Binding ElementName=Button, Path=CornerRadius}">
                            <Border.Effect>
                                <BlurEffect Radius="2" KernelType="Gaussian"/>
                            </Border.Effect>
                        </Border>
                        <TextBlock TextWrapping="WrapWithOverflow" Text="{TemplateBinding Content}" FontWeight="Medium" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Setter Property="Foreground" Value="Gray" />
    <Setter Property="FontSize" Value="20" />
</Style>

Enabled: Buttons when enabled

Disabled: Buttons when disabled

Upvotes: 0

Views: 463

Answers (1)

ASh
ASh

Reputation: 35733

using ControlTemplate.Triggers and adding TargetName should make it work. do the same for TextBlock and Foreground (from what I see, the Setter in Style, not in Trigger should be White).

<ControlTemplate.Triggers>
    <Trigger Property="IsEnabled" Value="False">
         <Setter TargetName="Button" Property="Background" Value="Transparent"/>
    </Trigger>
</ControlTemplate.Triggers>

Upvotes: 1

Related Questions