WPF Rounded border button responsive to click color change

Question

I have a button on my WPF application (MVVM Pattern) which is responsive to a click event. Basically if you click on this button its background becomes LightGreen (the default color is LightGray). I already achieved the desired behavior using the following code:

<Button Grid.Column="2" Grid.Row="6" Grid.ColumnSpan="3" Grid.RowSpan="2" Content="{Binding FirstSchedule.Message}" Command="{Binding FirstScheduleButtonClick}">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightGray"></Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding FirstScheduleButtonSelected}" Value="True">
                    <Setter Property="Background" Value="LightGreen"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

In which FirstScheduleButtonSelected is a ViewModel property defined by:

private bool _firstScheduleButtonSelected;
public bool FirstScheduleButtonSelected
{
    get { return _firstScheduleButtonSelected; }
    set { _firstScheduleButtonSelected = value;  NotifyPropertyChanged("FirstScheduleButtonSelected"); NotifyPropertyChanged("Background"); }
}

Now I need to make this button's borders rounded. I already tried this solution How to create/make rounded corner buttons in WPF?, and I ended up with:

<Button Grid.Column="2" Grid.Row="6" Grid.ColumnSpan="3" Grid.RowSpan="2" Content="{Binding FirstSchedule.Message}" Command="{Binding FirstScheduleButtonClick}">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border CornerRadius="15" Background="LightGray" BorderThickness="1" Padding="2">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="LightGray"></Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding FirstScheduleButtonSelected}" Value="True">
                    <Setter Property="Background" Value="LightGreen"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Now my borders are, in fact, rounded but when I click the button it does not becomes green.

Q: How can I modify this button in order to make its borders rounded and keep my already functioning behavior of changing its color on click?

score 1 · Accepted Answer · answered Jun 30 '17 at 14:09

Here's what I'd do:

<Window.Resources>
    <!-- ... -->

    <Style x:Key="GreenToggleButtonStyle" TargetType="ToggleButton">
        <Setter Property="Background" Value="LightGray" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Border 
                        CornerRadius="15" 
                        Background="{TemplateBinding Background}" 
                        BorderThickness="1" 
                        Padding="2"
                        >
                        <ContentPresenter 
                            HorizontalAlignment="Center" 
                            VerticalAlignment="Center" 
                            />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter 
                                Property="Background"
                                Value="LightGreen"
                                />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- ... -->
</Window.Resources>

...

<ToggleButton 
    Grid.Column="2" 
    Grid.Row="6" 
    Grid.ColumnSpan="3" 
    Grid.RowSpan="2" 
    Content="{Binding FirstSchedule.Message}" 
    IsChecked="{Binding FirstScheduleButtonSelected}"
    Style="{StaticResource GreenToggleButtonStyle}"
    />

Worked like a charm! Thanks a lot :) – woz Jun 30 '17 at 14:15 — woz, Jun 30 '17 at 14:15

WPF Rounded border button responsive to click color change

1 Answers1