Изменение стилей во время выполнения

Question

У меня есть простая кнопка, как показано ниже:

<Button Height="20" Width="60" style="{StaticResource RedButtonStyle}" 
     Click="Button_Click" /> 

Сейчас в ResourceDictionary У меня есть два стиля для Баттона:

<Style x:Key="RedButtonStyle" TargetType="Button"> 
    <Setter Property="Background" Value="Red" /> 
</Style> 

<Style x:Key="BlueButtonStyle" TargetType="Button"> 
    <Setter Property="Background" Value="Blue" /> 
</Style> 

Теперь я хотел бы изменить стиль баттона во время выполнения. Итак, в событии нажатия кнопки я сделал что-то вроде:

if (((Button)sender).Style == (Style)Application.Current.Resources["RedButtonStyle"]) 
{ 
    ((Button)sender).Style = (Style)Application.Current.Resources["BlueButtonStyle"]; 
} 
else 
{ 
    ((Button)sender).Style = (Style)Application.Current.Resources["RedButtonStyle"]; 
} 

Теперь, когда приложение запускается, фон кнопки Красный.

When I click it for the first time it does not change it's colour. 
When I click it for the Second time it changes it's colour to Blue. 
When I click it for the Third time it changes it's colour to Red. 
When I click it for the Fourth time it changes it's colour to Blue. 
When I click it for the Fifth time it changes it's colour to Red. 
When I click it for the Sixth time it changes it's colour to Blue. 
...... 
..... 

Так что, как определено выше, проблема: кнопка не меняет свой стиль, когда он щелкнул в первый раз. После этого он продолжает менять стиль, как ожидалось.

Update:

В моем реальном проекте у меня есть два стиля с именем EditButton и SaveButton следующим образом:

<Style TargetType="{x:Type Button}" x:Key="EditButton"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border Name="Border" Background="{StaticResource BrushBlueSelector}" Padding="5,2" SnapsToDevicePixels="true" CornerRadius="3"> 
        <Border.Effect> 
         <DropShadowEffect ShadowDepth="0" Color="Turquoise" BlurRadius="8" /> 
        </Border.Effect> 
        <Path x:Name="buttonSymbol" Data="M0,44.439791L18.98951,54.569246 0.47998798,62.66881z M17.428029,12.359973L36.955557,23.568769 21.957478,49.686174 20.847757,46.346189 15.11851,45.756407 14.138656,42.166935 8.5292659,41.966761 6.9493899,38.037481 2.4399572,38.477377z M26.812517,0.0009765625C27.350616,-0.012230873,27.875986,0.10826397,28.348372,0.3782568L42.175028,8.3180408C43.85462,9.2780154,44.234529,11.777948,43.02482,13.89789L41.375219,16.767812 21.460039,5.3381228 23.10964,2.4582005C23.979116,0.941679,25.437378,0.034730911,26.812517,0.0009765625z" 
          Stretch="Uniform" Fill="#FFFFFFFF" Width="24" Height="24" RenderTransformOrigin="0.5,0.5"> 
         <Path.RenderTransform> 
          <TransformGroup> 
           <TransformGroup.Children> 
            <RotateTransform Angle="0" /> 
            <ScaleTransform ScaleX="1" ScaleY="1" /> 
           </TransformGroup.Children> 
          </TransformGroup> 
         </Path.RenderTransform> 
        </Path> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="Border" Property="Background" Value="{StaticResource BrushOrangeSelector}"/> 
         <Setter TargetName="Border" Property="Effect"> 
          <Setter.Value> 
           <DropShadowEffect ShadowDepth="0" Color="Orange" BlurRadius="10" /> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="True"> 
         <Setter TargetName="Border" Property="Background" Value="{StaticResource BrushHeaderBackground}"/> 
         <Setter TargetName="Border" Property="Effect"> 
          <Setter.Value> 
           <DropShadowEffect ShadowDepth="0" Color="Gray" BlurRadius="10" /> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 

    <Setter Property="Tag" Value="EditButton" /> 
    <Setter Property="Margin" Value="3" /> 
    <Setter Property="Focusable" Value="False" /> 

</Style> 

<Style TargetType="{x:Type Button}" x:Key="SaveButton"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border Name="Border" Background="{StaticResource BrushBlueSelector}" Padding="5,2" SnapsToDevicePixels="true" CornerRadius="3"> 
        <Border.Effect> 
         <DropShadowEffect ShadowDepth="0" Color="Turquoise" BlurRadius="2" /> 
        </Border.Effect> 
        <Path x:Name="buttonSymbol" Data="M8.1099597,36.94997L8.1099597,41.793968 39.213959,41.793968 39.213959,36.94997z M12.42,0.049999889L18.4,0.049999889 18.4,12.252 12.42,12.252z M0,0L7.9001866,0 7.9001866,14.64218 39.210766,14.64218 39.210766,0 47.401001,0 47.401001,47.917 0,47.917z" 
          Stretch="Uniform" Fill="#FFFFFFFF" Width="24" Height="24" RenderTransformOrigin="0.5,0.5"> 
         <Path.RenderTransform> 
          <TransformGroup> 
           <TransformGroup.Children> 
            <RotateTransform Angle="0" /> 
            <ScaleTransform ScaleX="1" ScaleY="1" /> 
           </TransformGroup.Children> 
          </TransformGroup> 
         </Path.RenderTransform> 
        </Path> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="Border" Property="Background" Value="Green"/> 
         <Setter TargetName="Border" Property="Effect"> 
          <Setter.Value> 
           <DropShadowEffect ShadowDepth="0" Color="Green" BlurRadius="10" /> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="True"> 
         <Setter TargetName="Border" Property="Background" Value="{StaticResource BrushHeaderBackground}"/> 
         <Setter TargetName="Border" Property="Effect"> 
          <Setter.Value> 
           <DropShadowEffect ShadowDepth="0" Color="Gray" BlurRadius="10" /> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 

    <Setter Property="Tag" Value="SaveButton" /> 
    <Setter Property="Margin" Value="3" /> 
    <Setter Property="Focusable" Value="False" /> 

</Style> 

Этот стиль применяется к кнопке, расположенной внутри DataGridColumn. Мой вывод выглядит:

Первоначально:

После нажатия на кнопку Изменить в первый раз:

После нажатия на кнопку редактирования для 2-й раз:

Аналогично в четвертый раз он изменяется на EditButton, и в пятый раз он изменяется на SaveButton.

Answer 1

Попробуйте этот код, он может удовлетворить вас:

XAML

<Application.Resources> 
    <Style x:Key="RedButtonStyle" TargetType="{x:Type Button}"> 
     <Setter Property="Tag" Value="RedButton" /> 
     <Setter Property="Background" Value="Red" /> 
    </Style> 

    <Style x:Key="BlueButtonStyle" TargetType="{x:Type Button}"> 
     <Setter Property="Tag" Value="BlueButton" /> 
     <Setter Property="Background" Value="Blue" /> 
    </Style> 
</Application.Resources> 

Code behind

private void Button_Click(object sender, RoutedEventArgs e) 
{ 
    var button = sender as Button; 
    string tagValue = String.Empty; 

    if (button != null) 
    { 
     tagValue = button.Tag.ToString(); 

     if (tagValue == "RedButton") 
     { 
      button.Style = (Style)Application.Current.Resources["BlueButtonStyle"]; 
     } 
     else if (tagValue == "BlueButton") 
     { 
      button.Style = (Style)Application.Current.Resources["RedButtonStyle"]; 
     } 
    } 
}