WPF TabItem style when mouse left button is down

166 Views Asked by At

I am defining a Style for WPF TabControl TabItem. I want to show a slight "pushed down" effect on TabItem when mouse (left button) is pressed down and the TabItem is not selected but I cannot find the Trigger for this.

I have tried to define a MultiTrigger with IsMouseLeftButtonDown and IsPressed properties but neither one is recognized.

<Style TargetType="{x:Type TabItem}">
      <Setter Property="Template">
            <Setter.Value>
                  <ControlTemplate TargetType="TabItem">
                        <Border Name="bd" BorderThickness="1,1,0,0">
                            <Grid>
                                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"
                                                  ContentSource="Header"/>    
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseLeftButtonDown" Value="True" /> <!--NOT RECOGNIZED-->
                                    <Condition Property="IsSelected" Value="False" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="bd" Property="Background" >
                                    <Setter.Value>
                                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                              <GradientStop Color="Green" Offset="0"/>
                                              <GradientStop Color="Yellow" Offset="1"/>
                                         </LinearGradientBrush>
                                    </Setter.Value>
                                 </Setter>
                            </MultiTrigger>
                       </ControlTemplate.Triggers>
                 </ControlTemplate>
            </Setter.Value>
       </Setter>
 </Style>

How to set a Trigger that gets into action when mouse left button is pressed down on a TabItem ?


EDIT

I tried EventTrigger but I don't see any effect with the below

<EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown">
     <BeginStoryboard>
           <Storyboard>
               <ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Green" Duration="0:0:3" />
           </Storyboard>
     <BeginStoryboard/>
<EventTrigger/>

Can it be achieved with this way somehow ?

1

There are 1 best solutions below

0
lokusking On

This example shows you, how to work with EventTriggers.

Note

You might have to set your Highlighting-Logic fully in those Triggers, since values are overridden everytime, the Trigger fires.

<EventTrigger RoutedEvent="PreviewMouseDown" >
    <EventTrigger.Actions>
        <BeginStoryboard>
            <Storyboard >
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="bd" Storyboard.TargetProperty="Background"  Duration="0:0:3" BeginTime="0" AutoReverse="True">
                    <ObjectAnimationUsingKeyFrames.KeyFrames>
                        <DiscreteObjectKeyFrame  KeyTime="0:0:0" Value="{x:Static Brushes.Green}" />
                    </ObjectAnimationUsingKeyFrames.KeyFrames>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="PreviewMouseUp" >
    <EventTrigger.Actions>
        <BeginStoryboard>
            <Storyboard >
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="bd" Storyboard.TargetProperty="Background"  Duration="0:0:3" BeginTime="0" AutoReverse="True">
                    <ObjectAnimationUsingKeyFrames.KeyFrames>
                        <DiscreteObjectKeyFrame  KeyTime="0:0:0" Value="{x:Static Brushes.Transparent}" />
                    </ObjectAnimationUsingKeyFrames.KeyFrames>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger.Actions>
</EventTrigger>