CODEWITHSUNDEEP
c#wpfeventtrigger
user1108069
user1108069

Reputation: 513

set ellipse stroke(border color) when mouse enters it in wpf

Ellipse has a property called IsMouseOver, we can use it to set ellipse color, just like this post does. But in practice, when the mouse is over ellipse, the stroke will be changed(image we draw ellipse as a circle), when the mouse is inside the ellipse(circle), the color backs to original value. I know ellipse has an event called MouseEnter, we can use EventTrigger, but only StoryBoard can be set in EventTrigger.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10*" />
        <ColumnDefinition Width="90*" />
    </Grid.ColumnDefinitions>
    <Ellipse x:Name="checkButton" Grid.Column="0" Stroke="Black"></Ellipse>
    <TextBlock x:Name="txtContent" Grid.Column="1" FontWeight="Bold" VerticalAlignment="Center" FontSize="14" HorizontalAlignment="Center" TextAlignment="Center">
        <ContentPresenter />
    </TextBlock>
</Grid>
<ControlTemplate.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard></BeginStoryboard>
        // something like <Setter Property="Stroke" Value="Red" /> here
    </EventTrigger>
</ControlTemplate.Triggers>

All I want is when MouseEnter happens, set ellipse stroke; when MouseLeave happens, set it back. Does anyone have any idea?

Thanks in advance!

Upvotes: 3

Views: 14354

Answers (4)

Rohit
Rohit

Reputation: 10236

All I want is when MouseEnter happens, set ellipse stroke; when MouseLeave happens, set it back.

There are few ways to do this

using simple style triggers and setters

  <Ellipse Fill="White" StrokeThickness="10">
    <Ellipse.Style>
       <Style TargetType="{x:Type Ellipse}">
         <Setter Property="Stroke" Value="Red" />
           <Style.Triggers>
              <Trigger Property="IsMouseOver" Value="True">
                 <Setter Property="Stroke" Value="Green"/>
              </Trigger>
           </Style.Triggers>
       </Style>
   </Ellipse.Style>
</Ellipse>

using blend behavior (using blend SDK)

 <Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
    Title="MainWindow" Height="350" Width="525">

<Grid x:Name="grid">
    <Ellipse x:Name="ellipse" HorizontalAlignment="Left" Height="100" Margin="109,116,0,0" Stroke="Black" VerticalAlignment="Top" Width="100">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseEnter">
                <ei:ChangePropertyAction PropertyName="Stroke">
                    <ei:ChangePropertyAction.Value>
                        <SolidColorBrush Color="Red"/>
                    </ei:ChangePropertyAction.Value>
                </ei:ChangePropertyAction>
            </i:EventTrigger>
            <i:EventTrigger EventName="MouseLeave">
                <ei:ChangePropertyAction PropertyName="Stroke">
                    <ei:ChangePropertyAction.Value>
                        <SolidColorBrush Color="Black"/>
                    </ei:ChangePropertyAction.Value>
                </ei:ChangePropertyAction>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Ellipse>
</Grid>

Don't forget to add references to Microsoft.Expressions.Interactions and System.Windows.Interaactivity

It is pretty verbose if you do this in visual studio.But if you use Expresssion Blend trust me it's just only few clicks.

Upvotes: 0

AnjumSKhan
AnjumSKhan

Reputation: 9827

Complete solution for a custom CheckBox : 

<Window x:Class="WpfControlTemplates.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>
        <ControlTemplate x:Key="CustomChkBox" TargetType="CheckBox">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="10*" />
                    <ColumnDefinition Width="90*" />
                </Grid.ColumnDefinitions>
                <Ellipse x:Name="checkButton" Grid.Column="0" Stroke="{TemplateBinding Property=BorderBrush}"></Ellipse>
                <TextBlock x:Name="txtContent" Grid.Column="1" FontWeight="Bold" Foreground="{TemplateBinding Property=Foreground}" VerticalAlignment="Center" FontSize="14" HorizontalAlignment="Center" TextAlignment="Center">
                    <ContentPresenter />
                </TextBlock>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="checkButton" Property="Stroke" Value="Blue"/>
                    <Setter TargetName="checkButton" Property="Fill" Value="Gray"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

    </Window.Resources>

    <Grid>
        <CheckBox Template="{StaticResource CustomChkBox}" Width="100" Height="25" Foreground="Red" Content="Newsletters " Background="#FF16CF38" BorderBrush="#FF14C9C9"/>
    </Grid>
</Window>

To change Ellipse Stroke properties using Storyboard :

Trick is to set Stroke property differntly so that we can access it from StoryBoard. StoryBoard doesn't have any animation for Brush, but it does have one for Color.

<Ellipse x:Name="checkButton" Grid.Column="1" StrokeThickness="5" Margin="82,0,61,0">

    <Ellipse.Stroke>
        <SolidColorBrush x:Name="StrokeColor" Color="Red"/>
    </Ellipse.Stroke>

    <Ellipse.Triggers>
         <EventTrigger RoutedEvent="MouseEnter">
         <BeginStoryboard  x:Name="EllipseSB">
           <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="StrokeThickness" To="10"/>
            <ColorAnimation Storyboard.TargetName="StrokeColor" Storyboard.TargetProperty="Color" To="Blue"/>
           </Storyboard>
         </BeginStoryboard>
         </EventTrigger>
         <EventTrigger RoutedEvent="MouseLeave">
             <StopStoryboard BeginStoryboardName="EllipseSB"/>
         </EventTrigger>

    </Ellipse.Triggers>
</Ellipse>

Upvotes: 2

Sandesh
Sandesh

Reputation: 3004

Here is one more solution

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10*" />
        <ColumnDefinition Width="90*" />
    </Grid.ColumnDefinitions>
    <Ellipse x:Name="checkButton" Grid.Column="0" Stroke="Black" Fill="AliceBlue">
        <Ellipse.Style>
            <Style TargetType="{x:Type Ellipse}">
                <Style.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Duration="0:0:0" 
                                                    Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)" 
                                                    To="Red" AutoReverse="False"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard >
                                    <ColorAnimation Duration="0:0:0"
                                                    Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)"
                                                    To="Black"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </Ellipse.Style>
    </Ellipse>
    <TextBlock x:Name="txtContent" Grid.Column="1" FontWeight="Bold" VerticalAlignment="Center" FontSize="14" HorizontalAlignment="Center" TextAlignment="Center">
    <ContentPresenter />
    </TextBlock>
</Grid>

Upvotes: 0

fahimalizain
fahimalizain

Reputation: 844

Try this :

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Stroke" Value="Red" TargetName="checkButton"/>
    </Trigger>
</ControlTemplate.Triggers>

Hope it helps :)

Upvotes: 2

Related Questions