如何在silverlight中显示鼠标悬停按钮

时间:2012-05-02 07:28:13

标签: silverlight

我只需要在silverlight上显示一个鼠标按钮。请任何人帮忙解决这个问题。下面是我迄今为止所做的代码。

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

2 个答案:

答案 0 :(得分:4)

您需要将代码更改为以下内容。

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

MouseEnterMouseLeave的EventTriggers添加到StackPanel的触发器,并将按钮的名称TargetName添加到ChangePropertyAction

答案 1 :(得分:2)

你可以写出适当的行为,例如:

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>

你不应该使用visibility属性作为方法,因为当UIElement.Visibility = Collapsed时,它不会收到事件的通知。