WPF圆角边框按钮响应点击颜色变化答案

【问题标题】：WPF Rounded border button responsive to click color changeWPF圆角边框按钮响应点击颜色变化
【发布时间】：2017-06-30 22:09:03
【问题描述】：

我的 WPF 应用程序（MVVM 模式）上有一个响应点击事件的按钮。基本上，如果您单击此按钮，其背景将变为 LightGreen（默认颜色为 LightGray）。我已经使用以下代码实现了所需的行为：

<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>

其中FirstScheduleButtonSelected 是由以下定义的 ViewModel 属性：

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

现在我需要让这个按钮的边框变圆。我已经尝试过这个解决方案How to create/make rounded corner buttons in WPF?，结果是：

<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>

现在我的边框实际上是圆形的，但是当我单击按钮时它不会变成绿色。

问：如何修改此按钮以使其边框变圆并保持我在点击时更改其颜色的已有行为？

【问题讨论】：

标签： c# wpf xaml mvvm

【解决方案1】：

这是我要做的：

<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}"
    />

【讨论】：

工作就像一个魅力！非常感谢:)