CODEWITHSUNDEEP
silverlight
Arun
Arun

Reputation: 1704

How to display a button on mouse over in silverlight

I need to display a button on mouse over only in silverlight.Please anyone help to solve this issue.Below is my code wt i have done so far.,

<StackPanel x:Name="spDeleteContent" VerticalAlignment="Center" Margin="10,0,0,0"  Width="20" Height="20" HorizontalAlignment="Center" Orientation="Vertical">
<Button x:Name="btnDeleteContent" Height="20" Width="20" Click="btnDeleteContent_Click"        BorderThickness="0" Visibility="Collapsed">
    <Image Source="/Assets/Images/close.png" Height="10" Width="10" Cursor="Hand" Margin="0"/>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <ei:ChangePropertyAction PropertyName="Visibility" Value="Visible"></ei:ChangePropertyAction>
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseLeave">
            <ei:ChangePropertyAction PropertyName="Visibility" Value="Collapsed"></ei:ChangePropertyAction>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>
</StackPanel>

Upvotes: 2

Views: 1239

Answers (2)

Jehof
Jehof

Reputation: 35564

You need to change the code to the following.

<StackPanel x:Name="spDeleteContent">
  <Button x:Name="btnDeleteContent" Visibility="Collapsed">
    <Image Source="/Assets/Images/close.png" Height="10" Width="10"  
           Cursor="Hand" Margin="0"/> 
  </Button>
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseEnter">
     <ei:ChangePropertyAction TargetName="btnDeleteContent" PropertyName="Visibility" 
                              Value="Visible"></ei:ChangePropertyAction>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseLeave">
      <ei:ChangePropertyAction  TargetName="btnDeleteContent"  PropertyName="Visibility" 
                                Value="Collapsed"></ei:ChangePropertyAction>
    </i:EventTrigger>
  </i:Interaction.Triggers>
</StackPanel>

Add the EventTriggers for MouseEnter and MouseLeave to the Triggers of the StackPanel and add the name of the Button as TargetName to the ChangePropertyAction.

Upvotes: 4

martavoi
martavoi

Reputation: 7092

u can write appropriate behavior, for example:

namespace SilverlightApplication1.Helpers.Behaviors
{
   public class MouseOverOpacity : System.Windows.Interactivity.Behavior<UIElement>
   {
    protected override void OnAttached()
    {
        AssociatedObject.Opacity = 0;

        AssociatedObject.MouseEnter += AssociatedObjectOnMouseEnter;
        AssociatedObject.MouseLeave += AssociatedObjectOnMouseLeave;
    }

    protected override void OnDetaching()
    {
        AssociatedObject.Opacity = 1;

        AssociatedObject.MouseEnter -= AssociatedObjectOnMouseEnter;
        AssociatedObject.MouseLeave -= AssociatedObjectOnMouseLeave;
    }

    private void AssociatedObjectOnMouseLeave(object sender, MouseEventArgs mouseEventArgs)
    {
        AssociatedObject.Opacity = 0;
    }

    private void AssociatedObjectOnMouseEnter(object sender, MouseEventArgs mouseEventArgs)
    {
        AssociatedObject.Opacity = 1.0;
    }
}

}

XAML:

<Border BorderThickness="2" BorderBrush="Red" Height="100" Width="100">
        <Button Content="Button">
            <i:Interaction.Behaviors>
                <behaviors:MouseOverOpacity />
            </i:Interaction.Behaviors>
        </Button>
</Border>

u should'n use visibility property as approach, coz when UIElement.Visibility = Collapsed, it will not receive event's notifications.

Upvotes: 2

Related Questions