1

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?

1 Answer 1

1

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}"
    />
Sign up to request clarification or add additional context in comments.

1 Comment

Worked like a charm! Thanks a lot :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.