我想要一个在未选中状态下不可见的复选框。未选中时,将鼠标悬停在它上面会使其动画显示为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>
答案 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触发器下。