Как создать шаблон элемента управления WPF CheckBox в XAML со следующими требованиями? - PullRequest
Новая
       42

Как создать шаблон элемента управления WPF CheckBox в XAML со следующими требованиями?

0 голосов
/ 18 сентября 2011

Мне нужен флажок, который невидим в своем непроверенном состоянии. Если флажок снят, при наведении курсора мыши он будет анимирован с прозрачностью 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 ]

2 голосов
/ 19 сентября 2011

Ну, я просто пошел с несколько дьявольским обходным путем.При наведении курсора мыши используется фиктивный фоновый путь / изображение, в то время как проверка и снятие флажка работают с основным путем / изображением.

Дамп кода 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>
0 голосов
/ 18 сентября 2011

Проверьте местоположение ваших триггеров: поместите триггер IsChecked под триггер IsMouseOver.

...