WPF丸みを帯びた罫線ボタン。色の変更に反応します。

Question

クリックイベントに応答するWPFアプリケーション（MVVMパターン）のボタンがあります。基本的に、このボタンをクリックすると背景がLightGreenになります（デフォルトの色はLightGray）。私はすでに、次のコードを使用して所望の動作を実現：今、私は、このボタンのボーダーを丸めようにする必要があり

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

：FirstScheduleButtonSelectedは、によって定義されたのViewModelプロパティです

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

します。私はすでにこのソリューション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> 

が今私の境界が、実際には、丸みを帯びているが、私はボタンをクリックしたときに、それが緑色になっていません。

Q：境界線を丸くし、クリック時に色を変えるという機能を維持するには、このボタンを変更するにはどうすればよいですか？

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