2016-11-09 67 views
1

我正在爲單選按鈕創建樣式,並在單擊時更改單選按鈕的顏色。但是,我想使它成爲這樣的樣子,當你單選按鈕時,它也會改變顏色。我已經實現了基本功能,但是當單選按鈕已經被選中(並且因此具有不同的顏色)時,如果它獲得mouseover,則顏色變爲該新顏色,並且當mouseover完成(鼠標離開它)時,顏色可以追溯到原始的未選定顏色。WPF Mouseover重置控制顏色

有沒有一種方法讓它知道什麼時候點擊了正確的顏色? (該的TargetName Border僅僅是一個邊界類)

<Style x:Key="MyRadioButton" TargetType="{x:Type RadioButton}"> 
    <Setter Property="SnapsToDevicePixels" Value="true" /> 
    <Setter Property="FocusVisualStyle" Value="{DynamicResource RadioButtonFocusVisual}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type RadioButton}"> 
       <BulletDecorator Background="Transparent"> 

        <BulletDecorator.Bullet> 
         <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"> 
          <Border x:Name="Border" Margin="1" CornerRadius="5" HorizontalAlignment="Center" 
            Width="50" Background="White" Padding="2" SnapsToDevicePixels="true"> 
           <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/> 
          </Border> 
         </Grid> 
        </BulletDecorator.Bullet> 

        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal" /> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" 
             Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" /> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" 
              Storyboard.TargetProperty="(Panel.Background).(GradientStop.Color)"> 
             <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlLightColor}" /> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="CheckStates"> 
          <VisualState x:Name="Checked"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" 
             Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor}" /> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unchecked" /> 
          <VisualState x:Name="Indeterminate" /> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
       </BulletDecorator> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

回答

1

使用此Style,並放置兩個差異RadioButton s到測試Unchecked狀態:

<Style TargetType="{x:Type RadioButton}"> 
      <Setter Property="SnapsToDevicePixels" Value="true" /> 
      <Setter Property="FocusVisualStyle" Value="{DynamicResource RadioButtonFocusVisual}" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type RadioButton}"> 
         <BulletDecorator Background="Transparent"> 

          <BulletDecorator.Bullet> 
           <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"> 

            <Border x:Name="Border" Margin="1" CornerRadius="5" HorizontalAlignment="Center" 
             Width="50" Padding="2" SnapsToDevicePixels="true"> 
             <Border.Background> 
              <VisualBrush> 
               <VisualBrush.Visual> 
                <Grid> 
                 <Border x:Name="InnerBorder" Margin="1" CornerRadius="5" HorizontalAlignment="Center" 
            Width="50" Background="Transparent" Padding="2" SnapsToDevicePixels="true"/> 
                 <Border x:Name="OuterBorder" Margin="1" CornerRadius="5" HorizontalAlignment="Center" 
            Width="50" Background="Transparent" Padding="2" SnapsToDevicePixels="true"/> 

                </Grid> 
               </VisualBrush.Visual> 
              </VisualBrush> 
             </Border.Background> 
              <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/> 
             </Border> 

           </Grid> 
          </BulletDecorator.Bullet> 

          <VisualStateManager.VisualStateGroups> 

           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal" /> 
            <VisualState x:Name="MouseOver"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" 
                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
               <EasingColorKeyFrame KeyTime="0" Value="Red" /> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" 
              Storyboard.TargetProperty="(Panel.Background).(GradientStop.Color)"> 
               <EasingColorKeyFrame KeyTime="0" Value="Pink" /> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="CheckStates"> 
            <VisualState x:Name="Checked"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" 
             Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
               <EasingColorKeyFrame KeyTime="0" Value="Yellow" /> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Unchecked"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" 
             Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
               <EasingColorKeyFrame KeyTime="0" Value="Transparent" /> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 

            <VisualState x:Name="Indeterminate" /> 
           </VisualStateGroup> 

          </VisualStateManager.VisualStateGroups> 
         </BulletDecorator> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style>