好的,最近我没有做太多WPF,这使我感到困惑。
我有一个为Style
定义的RadioButton
,它使用带有ControlTemplate
的MultiTrigger
。要点是,当鼠标悬停在Border
或IsChecked
为true时,我希望MultiTrigger
变得不透明。
因此,我有了Opacity
,它可以在2种情况下对IsChecked
进行动画处理。 IsMouseOver
为false,IsChecked
为true。然后,我还有另外3个触发器。一组是鼠标悬停在其上时要移动的光标。当IsChecked
为false时,另一组将边界不透明度设置为0,而当RadioButton
为true时,最后一组将不透明度设置为1。
我的问题是最终触发器无法按我期望的方式工作。被选中的MultiTrigger
不再满足MultiTrigger
的条件,因此动画不会发生,但是单击时边框的不透明度恢复为0。Style
必须加上一些东西,因为注释掉它会使另一个触发器起作用。
的代码如下-
<Style TargetType="RadioButton" x:Key="MenuFlameButton">
<Setter Property="Width" Value="80"/>
<Setter Property="FontFamily" Value="/#SlabTallX"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid>
<Border
BorderThickness="1,0,1,0"
BorderBrush="{StaticResource XWhiteX}">
</Border>
<Border x:Name="outerBorder"
Background="{TemplateBinding Background}"
OpacityMask="{StaticResource TallVerticalMask}">
</Border>
<ContentControl
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
<TextBlock x:Name="txt" Style="{StaticResource ButtonText}" IsHitTestVisible="False"
Text="{TemplateBinding Content}"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</ContentControl>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition SourceName="outerBorder" Property="UIElement.IsMouseOver" Value="True"/>
<Condition Property="RadioButton.IsChecked" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="outerBorder" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.5" Storyboard.TargetName="outerBorder" Storyboard.TargetProperty="(UIElement.Opacity)" To="0"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
<Trigger Property="RadioButton.IsChecked" Value="False">
<Setter TargetName="outerBorder" Property="Opacity" Value="0"/>
</Trigger>
<Trigger Property="RadioButton.IsChecked" Value="True">
<Setter TargetName="outerBorder" Property="Opacity" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我真的不确定为什么单击边框时边框会逐渐消失。
一如既往,任何帮助将不胜感激。
编辑:我已包含一个Kaxaml友好的代码段,以使人们更容易获得帮助。只需粘贴此代码。
<Page.Resources>
<Style x:Key="MainWindow" TargetType="Window">
<Setter Property="Height" Value="600"/>
<Setter Property="Height" Value="600"/>
<Setter Property="Height" Value="600"/>
<Setter Property="Height" Value="600"/>
<Setter Property="Height" Value="600"/>
</Style>
<Style x:Key="SplashScreenWindow" TargetType="Window">
<Setter Property="Height" Value="200"/>
<Setter Property="Width" Value="450"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="ResizeMode" Value="NoResize"/>
<Setter Property="Opacity" Value="1"/>
</Style>
<Style x:Key="ActivityBorder" TargetType="Border">
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Setter Property="Background" Value="#0555"/>
<Setter Property="BorderBrush" Value="#999"/>
<Setter Property="Margin" Value="10,3,10,3"/>
</Style>
<Style x:Key="Title" TargetType="TextBlock">
<Setter Property="FontFamily" Value="/#Harabara"/>
<Setter Property="FontSize" Value="42"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="#eee"/>
</Style>
<Style x:Key="SplashTitle" BasedOn="{StaticResource Title}" TargetType="TextBlock">
<Setter Property="FontSize" Value="56"/>
</Style>
<Style x:Key="SubTitle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="/#SlabTallX"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="#eee"/>
<Setter Property="Margin" Value="10"/>
</Style>
<Style x:Key="DescriptionText" TargetType="TextBlock">
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="#eee"/>
<Setter Property="Margin" Value="5,5,5,15"/>
</Style>
<Style x:Key="Strap" TargetType="TextBlock">
<Setter Property="FontFamily" Value="/#SlabTallX"/>
<Setter Property="FontSize" Value="17"/>
<Setter Property="Foreground" Value="#ccc"/>
</Style>
<Style x:Key="StrapActive" TargetType="TextBlock">
<Setter Property="FontFamily" Value="/#SlabTallX"/>
<Setter Property="FontSize" Value="17"/>
<Setter Property="Foreground" Value="#fff"/>
</Style>
<Style x:Key="StrapBold" TargetType="TextBlock">
<Setter Property="FontFamily" Value="/#SlabTallX"/>
<Setter Property="FontSize" Value="17"/>
<Setter Property="Foreground" Value="#cc9"/>
</Style>
<Style x:Key="ButtonText" BasedOn="{StaticResource Strap}" TargetType="TextBlock">
<Setter Property="FontSize" Value="14"/>
</Style>
<Style x:Key="FormLabel" TargetType="Label">
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="#ccc"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Margin" Value="5,5,10,5"/>
</Style>
<Style x:Key="StatusLabel" TargetType="Label">
<Setter Property="FontSize" Value="15"/>
<Setter Property="Foreground" Value="#ccc"/>
<Setter Property="Margin" Value="0,-5,0,0"/>
</Style>
<Style x:Key="StatusText" TargetType="TextBlock">
<Setter Property="FontSize" Value="13"/>
<Setter Property="Foreground" Value="#cc9"/>
<Setter Property="Margin" Value="5,-2,0,0"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Foreground" Value="#cc9"/>
</Style>
<Style x:Key="FormTextBox" TargetType="TextBox">
<Setter Property="Width" Value="250"/>
<Setter Property="Height" Value="25"/>
</Style>
<Style x:Key="PageBorder" TargetType="Border">
<Setter Property="Padding" Value="10,0,10,10"/>
<Setter Property="BorderThickness" Value="2"/>
</Style>
<RadialGradientBrush x:Key="GreyRadial" Center="0,0" RadiusX="1" RadiusY="1">
<GradientStop Color="#555" Offset="0"/>
<GradientStop Color="#333" Offset="1"/>
</RadialGradientBrush>
<LinearGradientBrush x:Key="StripBorderDarkGrey" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#222" Offset="0"/>
<GradientStop Color="#111" Offset=".25"/>
<GradientStop Color="#444" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="StripBorderDarkRed" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#222" Offset="0"/>
<GradientStop Color="#111" Offset=".25"/>
<GradientStop Color="#644" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TitleBar" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#777" Offset="0"/>
<GradientStop Color="#555" Offset=".3"/>
<GradientStop Color="#777" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorFlame" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#f00" Offset="0"/>
<GradientStop Color="#0f00" Offset="0.15"/>
<GradientStop Color="#f0f" Offset="0.25"/>
<GradientStop Color="#0f0f" Offset="0.35"/>
<GradientStop Color="#00f" Offset="0.5"/>
<GradientStop Color="#000f" Offset="0.62"/>
<GradientStop Color="#0f0" Offset="0.75"/>
<GradientStop Color="#00f0" Offset="0.85"/>
<GradientStop Color="#ff0" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="XWhiteX" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="#ddd" Offset="0.5"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorFlameRed" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#f00" Offset="0"/>
<GradientStop Color="#0f00" Offset="0.15"/>
<GradientStop Color="#f00" Offset="0.25"/>
<GradientStop Color="#0f00" Offset="0.35"/>
<GradientStop Color="#f00" Offset="0.5"/>
<GradientStop Color="#0f00" Offset="0.62"/>
<GradientStop Color="#f00" Offset="0.75"/>
<GradientStop Color="#0f00" Offset="0.85"/>
<GradientStop Color="#f00" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorFlamePurple" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#f0f" Offset="0"/>
<GradientStop Color="#0f0f" Offset="0.15"/>
<GradientStop Color="#f0f" Offset="0.25"/>
<GradientStop Color="#0f0f" Offset="0.35"/>
<GradientStop Color="#f0f" Offset="0.5"/>
<GradientStop Color="#0f0f" Offset="0.62"/>
<GradientStop Color="#f0f" Offset="0.75"/>
<GradientStop Color="#0f0f" Offset="0.85"/>
<GradientStop Color="#f0f" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorFlameBlue" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#00f" Offset="0"/>
<GradientStop Color="#000f" Offset="0.15"/>
<GradientStop Color="#00f" Offset="0.25"/>
<GradientStop Color="#000f" Offset="0.35"/>
<GradientStop Color="#00f" Offset="0.5"/>
<GradientStop Color="#000f" Offset="0.62"/>
<GradientStop Color="#00f" Offset="0.75"/>
<GradientStop Color="#000f" Offset="0.85"/>
<GradientStop Color="#00f" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorFlameGreen" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#0f0" Offset="0"/>
<GradientStop Color="#00f0" Offset="0.15"/>
<GradientStop Color="#0f0" Offset="0.25"/>
<GradientStop Color="#00f0" Offset="0.35"/>
<GradientStop Color="#0f0" Offset="0.5"/>
<GradientStop Color="#00f0" Offset="0.62"/>
<GradientStop Color="#0f0" Offset="0.75"/>
<GradientStop Color="#00f0" Offset="0.85"/>
<GradientStop Color="#0f0" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorFlameYellow" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#ff0" Offset="0"/>
<GradientStop Color="#0ff0" Offset="0.15"/>
<GradientStop Color="#ff0" Offset="0.25"/>
<GradientStop Color="#0ff0" Offset="0.35"/>
<GradientStop Color="#ff0" Offset="0.5"/>
<GradientStop Color="#0ff0" Offset="0.62"/>
<GradientStop Color="#ff0" Offset="0.75"/>
<GradientStop Color="#0ff0" Offset="0.85"/>
<GradientStop Color="#ff0" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorFlameSectionRed" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#0f00" Offset="0"/>
<GradientStop Color="#f00" Offset="0.5"/><!--red-->
<GradientStop Color="#0f00" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorFlameSectionPurple" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#0f0f" Offset="0"/>
<GradientStop Color="#f0f" Offset="0.5"/><!--purple-->
<GradientStop Color="#0f0f" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorFlameSectionBlue" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#000f" Offset="0"/>
<GradientStop Color="#00f" Offset="0.5"/><!--blue-->
<GradientStop Color="#000f" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorFlameSectionGreen" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#00f0" Offset="0"/>
<GradientStop Color="#0f0" Offset="0.5"/><!--green-->
<GradientStop Color="#00f0" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorFlameSectionYellow" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#0ff0" Offset="0"/>
<GradientStop Color="#ff0" Offset="0.5"/><!--yellow-->
<GradientStop Color="#0ff0" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ShortVerticalMask" StartPoint="0,1" EndPoint="0,0">
<GradientStop Color="#6FFF" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.25"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="VerticalMask" StartPoint="0,1" EndPoint="0,0">
<GradientStop Color="#6FFF" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.5"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TallVerticalMask" StartPoint="0,1" EndPoint="0,0">
<GradientStop Color="#6FFF" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.9"/>
</LinearGradientBrush>
</Page.Resources>
<DockPanel x:Name="menuDock" DockPanel.Dock="Top" LastChildFill="False" Background="Black">
<DockPanel.Resources>
<Style TargetType="RadioButton" x:Key="MenuFlameButton">
<Setter Property="Width" Value="80"/>
<Setter Property="FontFamily" Value="/#SlabTallX"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid>
<Border
BorderThickness="1,0,1,0"
BorderBrush="{StaticResource XWhiteX}">
</Border>
<Border x:Name="outerBorder"
Background="{TemplateBinding Background}"
OpacityMask="{StaticResource TallVerticalMask}">
</Border>
<ContentControl
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
<TextBlock x:Name="txt" Style="{StaticResource ButtonText}" IsHitTestVisible="False"
Text="{TemplateBinding Content}"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</ContentControl>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition SourceName="outerBorder" Property="UIElement.IsMouseOver" Value="True"/>
<Condition Property="RadioButton.IsChecked" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="outerBorder" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.5" Storyboard.TargetName="outerBorder" Storyboard.TargetProperty="(UIElement.Opacity)" To="0"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
<Trigger Property="RadioButton.IsChecked" Value="False">
<Setter TargetName="outerBorder" Property="Opacity" Value="0"/>
</Trigger>
<Trigger Property="RadioButton.IsChecked" Value="True">
<Setter TargetName="outerBorder" Property="Opacity" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DockPanel.Resources>
<RadioButton
Margin="2,0,10,0"
Background="{StaticResource ColorFlameSectionYellow}"
Content="Tools"
DockPanel.Dock="Right"
Style="{StaticResource MenuFlameButton}"
Tag="Tools"/>
<RadioButton
Margin="2,0,2,0"
Background="{StaticResource ColorFlameSectionGreen}"
Content="Settings"
DockPanel.Dock="Right"
Style="{StaticResource MenuFlameButton}"
Tag="Settings"/>
<RadioButton
Margin="2,0,2,0"
Background="{StaticResource ColorFlameSectionBlue}"
Content="Event Log"
DockPanel.Dock="Right"
Style="{StaticResource MenuFlameButton}"
Tag="EventLog"/>
<RadioButton
Margin="2,0,2,0"
Background="{StaticResource ColorFlameSectionPurple}"
Content="Queue"
DockPanel.Dock="Right"
Style="{StaticResource MenuFlameButton}"
Tag="Queue"/>
<RadioButton
Margin="2,0,2,0"
Background="{StaticResource ColorFlameSectionRed}"
Content="Debug"
DockPanel.Dock="Right"
Style="{StaticResource MenuFlameButton}"
Tag="Debug"/>
</DockPanel>
最佳答案
这是一个解决方案,
我修改了externalBorder以指定Opacity = 0:
<Border x:Name="outerBorder" Background="{TemplateBinding Background}" OpacityMask="{StaticResource TallVerticalMask}" Opacity="0">
</Border>
命名为ExitAction的故事板:
<MultiTrigger.ExitActions>
<BeginStoryboard Name="ExitStoryBoard">
...
并用以下代码替换RadioButton.IsChecked的触发器:
<Trigger Property="RadioButton.IsChecked" Value="True">
<Trigger.EnterActions>
<PauseStoryboard BeginStoryboardName="ExitStoryBoard"/>
</Trigger.EnterActions>
<Trigger.Setters>
<Setter TargetName="outerBorder" Property="Opacity" Value="1"/>
</Trigger.Setters>
<Trigger.ExitActions>
<ResumeStoryboard BeginStoryboardName="ExitStoryBoard"/>
</Trigger.ExitActions>
</Trigger>