WPF-ControlTemplate中的多触发器,奇怪的行为

WPF-ControlTemplate中的多触发器,奇怪的行为,wpf,triggers,styles,controltemplate,multitrigger,Wpf,Triggers,Styles,Controltemplate,Multitrigger,好吧,我最近没有做太多WPF,这让我很困惑 我为单选按钮定义了样式,它使用控制模板和多触发器。要点是,当鼠标悬停在边框上或当它被选中时,边框将变得不透明 因此我有了multi-trigger,它可以在两种条件下设置不透明度输入和输出的动画IsChecked为假,IsMouseOver为真。我还有另外3个触发器。一组是鼠标在其上时要使用的光标。当IsChecked为假时,另一组的边框不透明度设置为0,当IsChecked为真时,最后一组设置不透明度为1 我的问题是,最后的触发器没有按我预期的方式工

好吧,我最近没有做太多WPF,这让我很困惑

我为
单选按钮定义了
样式
,它使用
控制模板
多触发器
。要点是,当鼠标悬停在
边框上或当它被选中时,
边框
将变得不透明

因此我有了
multi-trigger
,它可以在两种条件下设置
不透明度
输入和输出的动画
IsChecked
为假,
IsMouseOver
为真。我还有另外3个触发器。一组是鼠标在其上时要使用的光标。当
IsChecked
为假时,另一组的边框不透明度设置为0,当
IsChecked
为真时,最后一组设置不透明度为1

我的问题是,最后的触发器没有按我预期的方式工作。选中的
单选按钮
不再满足
多触发器
的条件,因此动画不会发生,但单击时边框的不透明度返回到0

必须对
多触发器进行一些操作,因为注释它会使另一个触发器工作

样式的代码如下-

    <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>

我真的不知道为什么当我点击它时边界会消失

一如既往,我们将非常感谢您的帮助

EDIT:我加入了一个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>


这里有一个解决方案, 我修改了OuterOrder以指定不透明度=0:

<Border x:Name="outerBorder" Background="{TemplateBinding Background}" OpacityMask="{StaticResource TallVerticalMask}" Opacity="0">
                            </Border>

将ExitAction的故事板命名为:

<MultiTrigger.ExitActions>
    <BeginStoryboard Name="ExitStoryBoard">
    ...

...
并替换了RadioButton的触发器。检查如下:

    <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>