WPF - ControlTemplate中的MultiTrigger，奇怪的行为

好的，我最近没有做太多的WPF，这让我感到困惑。WPF - ControlTemplate中的MultiTrigger，奇怪的行为

我有一个Style定义为RadioButton，它使用ControlTemplate与MultiTrigger。要点是当鼠标悬停在它上面或者它的IsChecked为真时，我想Border变得不透明。

所以我有MultiTrigger，它动画Opacity进入和退出操作在2个条件; IsChecked为假，IsMouseOver为真。然后我又得到了另外3个触发器。当鼠标悬停在它上面时，一组光标将被移动。当IsChecked为假时，另一组边界不透明为0，当IsChecked为真时，最后一个将不透明度设置为1。

我的问题是，最终的触发器不按我期望的方式工作。被检查的RadioButton不再满足MultiTrigger的条件，因此动画不会发生，但当点击时边框的不透明度会回到0。

一些东西必须与MultiTrigger一起使用，因为注释它会使其他触发器起作用。

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

来源

2009-10-07 Stimul8d

这里是一个解决方案，我修改outerBorder指定不透明度= 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>

来源

2012-04-12 20:51:09 Stephen

WPF - ControlTemplate中的MultiTrigger，奇怪的行为

回答

相关问题