Extend the style to capture click event

0
votes

I am trying to build a designer like visual studio.

Take a look at the xaml:

<Style x:Key="myStyle" TargetType="{x:Type Border}">
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="2" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="DodgerBlue" />
        </Trigger>
    </Style.Triggers>
</Style>
...
...
...
<Border Style="myStyle">
    <Grid>
        <Border Style="myStyle">
            <Rectangle Fill="Transparent" />
            <TextBlock Text="abc" />
        </Border>        
    </Grid>
</Border>

The above code is working perfectly. Now I want to extend the above style, such that the border's color should change to green when I click on any of the control.

Update :

I have changed the above style to something like below code.

<Style x:Key="BorderStyle" TargetType="{x:Type Border}">
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="2" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="DodgerBlue" />
        </Trigger>
        <EventTrigger RoutedEvent="MouseDown">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="Green" Duration="0:0:0.100" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Style.Triggers>
</Style>

Now I can see the border is changing its color to green when I click on it. But when mouse leaves the textblock, the border changes its color back to transparent.

4
wpfxaml
I know I can use an EventTrigger but Border does not have any Click event. – Khushi
what does "click on any of the control." mean..?? – Vishal
@Farzi I think Click = MouseDown + MouseUp. – Khushi
I am asking click on "any of the control" mean...click on what(?) you want the border change to green.. – Vishal
@Farzi Sorry, I mean Click on any of the Border. – Khushi

4 Answers

0
votes
 <Style.Triggers>
       <EventTrigger RoutedEvent="MouseDown">
            <Setter Property="BorderBrush" Value="DodgerBlue" />                    
       </EventTrigger>
</Style.Triggers>

and you dont want to bind the style for all the border, if you need to apply that style for all the border, just remove the key name of that style. It will apply to all the Targeted Control.

If you need to check and apply the color as like the button click as like a Toggle button, you need to maintain a property and that property is to be given in the trigger and it need to be changed in the button's click..

0
votes

Try this

<Style x:Key="myStyle" TargetType="{x:Type Border}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <SolidColorBrush x:Name="BorderBrushColor" Color="Transparent"></SolidColorBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="2" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter  Property="BorderBrush" Value="DodgerBlue" />
            </Trigger>  
            <EventTrigger RoutedEvent="MouseDown">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames  Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                            <EasingColorKeyFrame KeyTime="0"  Value="Green" />
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
0
votes

Try this

   <Style x:Key="myStyle" TargetType="{x:Type Border}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <SolidColorBrush x:Name="BorderBrushColor" Color="Transparent"></SolidColorBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="2" />            
        <Style.Triggers>            
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames FillBehavior="HoldEnd" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                            <EasingColorKeyFrame KeyTime="0"  Value="DodgerBlue" />
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseDown">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames FillBehavior="HoldEnd" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                            <EasingColorKeyFrame KeyTime="0"  Value="Green" />
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>               
        </Style.Triggers>
    </Style>
0
votes

Add this code in previous style

        <Trigger Property="IsMouseOver" Value="False">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames FillBehavior="HoldEnd" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                <EasingColorKeyFrame KeyTime="0"  Value="Transparent" />
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>                    
            </Trigger>