如何在XAML中创建具有以下要求的WPF CheckBox控件模板?

时间:2011-09-18 05:23:51

标签: wpf xaml checkbox triggers controltemplate

我想要一个在未选中状态下不可见的复选框。未选中时,将鼠标悬停在它上面会使其动画显示为0.3透明度。

当鼠标指针离开复选框并且仍未选中时,它会动画回到0透明度。

选中后,它将完全可见,即。透明度= 1。

到目前为止我的所有尝试都没有成功,我认为由于鼠标悬停规则。当我的复选框被选中时,鼠标悬停仍会导致淡入淡出为0.3,在鼠标离开时,它变得不可见。 我尝试使用触发器,多重触发器,VSM,但我无法弄清楚如何编写我想要的行为而不会发生冲突。

代码: 这是触发器方法。它已经经历了这么多次迭代,我甚至不记得这是否是我最初的方法。 我也有一个VSM方法,只要说你也想要那个代码。

控制模板(我拿了MSDN中提供的示例并对其进行了修改)

    <Style x:Key="{x:Type CheckBox}"
           TargetType="{x:Type CheckBox}">
      <Setter Property="SnapsToDevicePixels"
              Value="true" />
      <Setter Property="OverridesDefaultStyle"
              Value="true" />
      <Setter Property="FocusVisualStyle"
              Value="{DynamicResource CheckBoxFocusVisual}" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type CheckBox}">
            <BulletDecorator Background="Transparent">
              <BulletDecorator.Bullet>
                <Border x:Name="Border"
                        Width="80"
                        Height="80"
                        CornerRadius="0"
                        BorderThickness="1">


                  <Grid>
                    <Path Visibility="Visible"
                          Width="100"
                          Height="100"
                          x:Name="CheckBorder"
                          SnapsToDevicePixels="False"
                          StrokeThickness="9"
                          Opacity="0"
      Data="M 0 30 C 2,29 10,30 14,39 M 15,40 C 5,31 55,10 45,20 ">
                      <Path.Stroke>
                        <SolidColorBrush Color="Black" />
                      </Path.Stroke>
                    </Path>                           
                    <Path Visibility="Visible"
                          Width="100"
                          Height="100"
                          x:Name="CheckMark"
                          Opacity="0"
                          SnapsToDevicePixels="False"
                          StrokeThickness="6"
      Data="M 1 30 C 2,29 10,30 14,39 M 15,39 C 5,31 55,10 45,20 ">
                      <Path.Stroke>
                        <SolidColorBrush Color="#FF0C9D0C" />
                      </Path.Stroke>
                    </Path>
                    <Path Visibility="Collapsed"
                          Width="100"
                          Height="100"
                          x:Name="InderminateMark"
                          SnapsToDevicePixels="False"
                          StrokeThickness="5"
                          Data="M 0 0 L 50 50">
                      <Path.Stroke>
                        <SolidColorBrush Color="{DynamicResource GlyphColor}" />
                      </Path.Stroke>
                    </Path>
                  </Grid>
                </Border>
              </BulletDecorator.Bullet>
            </BulletDecorator>

            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckBorder" To="0.3" Duration="0:0:0.1"/>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckMark" To="0.3" Duration="0:0:0.1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>

                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckBorder" To="0" Duration="0:0:0.1"/>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckMark" To="0" Duration="0:0:0.1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>

                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Opacity" TargetName="CheckBorder" Value="1"/>
                    <Setter Property="Opacity" TargetName="CheckMark" Value="1"/>
                </Trigger>                    



            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

声明

<CheckBox Width="100" Height="100">Hello</CheckBox>

2 个答案:

答案 0 :(得分:2)

好吧,我只是采取了一些恶魔般的解决方法。鼠标悬停的东西与虚拟背景路径/图像一起工作,而检查&amp;取消选中使用主路径/图像。

Kaxaml代码转储:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>  
    <Grid.Resources>
        <Style x:Key="{x:Type CheckBox}"
               TargetType="{x:Type CheckBox}">
          <Setter Property="SnapsToDevicePixels"
                  Value="true" />
          <Setter Property="OverridesDefaultStyle"
                  Value="true" />
          <Setter Property="FocusVisualStyle"
                  Value="{DynamicResource CheckBoxFocusVisual}" />
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type CheckBox}">
                <BulletDecorator Background="Transparent">
                  <BulletDecorator.Bullet>
                    <Border x:Name="Border"
                            Width="80"
                            Height="80"
                            CornerRadius="0"
                            BorderThickness="1">


                      <Grid>
                      <Path Visibility="Visible"
                              Width="100"
                              Height="100"
                              x:Name="Dummy"
                              SnapsToDevicePixels="False"
                              StrokeThickness="9"
                              Opacity="0"
          Data="M 0 30 C 2,29 10,30 14,39 M 15,40 C 5,31 55,10 45,20 ">
                          <Path.Stroke>
                            <SolidColorBrush Color="#FF224502" />
                          </Path.Stroke>
                        </Path>                                            
                        <Path Visibility="Visible"
                              Width="100"
                              Height="100"
                              x:Name="CheckBorder"
                              SnapsToDevicePixels="False"
                              StrokeThickness="9"
                              Opacity="0"
          Data="M 0 30 C 2,29 10,30 14,39 M 15,40 C 5,31 55,10 45,20 ">
                          <Path.Stroke>
                            <SolidColorBrush Color="Black" />
                          </Path.Stroke>
                        </Path>                           
                        <Path Visibility="Visible"
                              Width="100"
                              Height="100"
                              x:Name="CheckMark"
                              Opacity="0"
                              SnapsToDevicePixels="False"
                              StrokeThickness="6"
          Data="M 1 30 C 2,29 10,30 14,39 M 15,39 C 5,31 55,10 45,20 ">
                          <Path.Stroke>
                            <SolidColorBrush Color="#FF0C9D0C" />
                          </Path.Stroke>
                        </Path>
                        <Path Visibility="Collapsed"
                              Width="100"
                              Height="100"
                              x:Name="InderminateMark"
                              SnapsToDevicePixels="False"
                              StrokeThickness="5"
                              Data="M 0 0 L 50 50">
                          <Path.Stroke>
                            <SolidColorBrush Color="{DynamicResource GlyphColor}" />
                          </Path.Stroke>
                        </Path>
                      </Grid>
                    </Border>
                  </BulletDecorator.Bullet>
                </BulletDecorator>

                <ControlTemplate.Triggers>

                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True"/>                        
                            <Condition Property="IsChecked" Value="False"/>
                        </MultiTrigger.Conditions>

                        <MultiTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Dummy" To="0.3" Duration="0:0:0.1"/>
                                </Storyboard>
                            </BeginStoryboard>                        
                        </MultiTrigger.EnterActions>
                        <MultiTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Dummy" To="0" Duration="0:0:0.1"/>
                                </Storyboard>
                            </BeginStoryboard>                        
                        </MultiTrigger.ExitActions>                        

                    </MultiTrigger>



                     <Trigger Property="IsChecked" Value="True"> 
                        <Setter TargetName="CheckBorder" Property="Opacity" Value="1"/>
                        <Setter TargetName="CheckMark" Property="Opacity" Value="1"/>
                     </Trigger>



                     <Trigger Property="IsChecked" Value="False"> 
                        <Setter TargetName="CheckBorder" Property="Opacity" Value="0"/>
                        <Setter TargetName="CheckMark" Property="Opacity" Value="0"/>
                     </Trigger>                    


                </ControlTemplate.Triggers>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>



    </Grid.Resources>


        <CheckBox Width="100" Height="100">Hello</CheckBox>
  </Grid>
</Page>

答案 1 :(得分:0)

检查触发器的位置:将IsChecked触发器置于IsMouseOver触发器下。