2009-10-07 4 views
3

Bon, je n'ai pas fait beaucoup de WPF ces derniers temps et cela me perturbe.WPF - MultiTrigger dans ControlTemplate, comportement étrange

J'ai un Style défini pour RadioButton, qui utilise un ControlTemplate avec un MultiTrigger. L'essentiel est que je veux un Border devenir opaque quand la souris passe dessus ou quand c'est IsChecked est vrai.

J'ai donc le MultiTrigger, qui anime le Opacity dans 2 conditions; IsChecked est faux et IsMouseOver est vrai. J'ai alors 3 autres déclencheurs. Un ensemble est le curseur à portée de main lorsque la souris est dessus. Un autre ensemble est l'opacité des frontières à 0 quand il est IsChecked est faux et un dernier à fixer l'opacité à 1 lorsque IsChecked est vrai.

Mon problème est que ce dernier déclencheur ne fonctionne pas comme je l'attendais. Le RadioButton qui est vérifié ne remplit plus les conditions pour le MultiTrigger donc les animations ne se produisent pas mais l'opacité de la bordure remonte à 0 quand je clique.

Quelque chose doit être sur le MultiTrigger parce que commenter cela rend l'autre déclencheur.

Le code pour la Style est inférieure à -

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

Je ne suis pas sûr de savoir pourquoi la frontière esquives quand je clique dessus.

Comme toujours, toute aide sera grandement appréciée.

EDIT: J'ai inclus un extrait amical Kaxaml pour le rendre un peu plus facile pour les gens à aider. . Il suffit de coller ce code dans

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

Répondre

2

Voici une solution, I modifiée outerBorder de préciser Opacité = 0:

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

nommé story-board de l'ExitAction:

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

Et remplacé les déclencheurs pour RadioButton.IsChecked avec ceci: