Question

我是Silverlight的初学者。我拿了一个边框控件，鼠标悬停在其上我想要增加它的宽度，但是以动画方式慢慢地，并且鼠标恢复正常

<Border BorderBrush="#528CC1" Background="#164A7A" MouseEnter="bHome_MouseEnter"
        MouseLeave="bHome_MouseLeave" Opacity="0.75" BorderThickness="1" Height="75" Width="110"
        Grid.Column="1" x:Name="bProduct" Margin="0,0,0,0" Cursor="Hand" VerticalAlignment="Top">

 private void bHome_MouseEnter(object sender, MouseEventArgs e)
    {
        Border border = (Border)sender;
        border.Width = 160;
        border.Opacity = 100;
    }

    private void bHome_MouseLeave(object sender, MouseEventArgs e)
    {
        Border border = (Border)sender;
        border.Width = 110;
        border.Opacity = 0.75;
    }

Answer 1

如果你真的想用代码来做（这对于视觉状态来说更容易），即使是开箱即用的鼠标过度/出局，也只需要在XAML中设置开始和结束参数，如果值是动态的，那是不可能的，你不能在VisualStateManager标记中进行绑定，因为它不是可视化树的一部分），这是一个例子（来自http://msdn.microsoft.com/en-us/library/cc189069(VS.95).aspx#procedural_code）：

以下示例显示如何创建动画，以动画Canvas.Top和Canvas.Left附加矩形的属性。

private void Create_And_Run_Animation(object sender, EventArgs e)
{
    // Create a red rectangle that will be the target
    // of the animation.
    Rectangle myRectangle = new Rectangle();
    myRectangle.Width = 200;
    myRectangle.Height = 200;
    Color myColor = Color.FromArgb(255, 255, 0, 0);
    SolidColorBrush myBrush = new SolidColorBrush();
    myBrush.Color = myColor;
    myRectangle.Fill = myBrush;

    // Add the rectangle to the tree.
    LayoutRoot.Children.Add(myRectangle);

    // Create a duration of 2 seconds.
    Duration duration = new Duration(TimeSpan.FromSeconds(2));

    // Create two DoubleAnimations and set their properties.
    DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
    DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();

    myDoubleAnimation1.Duration = duration;
    myDoubleAnimation2.Duration = duration;

    Storyboard sb = new Storyboard();
    sb.Duration = duration;

    sb.Children.Add(myDoubleAnimation1);
    sb.Children.Add(myDoubleAnimation2);

    Storyboard.SetTarget(myDoubleAnimation1, myRectangle);
    Storyboard.SetTarget(myDoubleAnimation2, myRectangle);

    // Set the attached properties of Canvas.Left and Canvas.Top
    // to be the target properties of the two respective DoubleAnimations.
    Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));
    Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));

    myDoubleAnimation1.To = 200;
    myDoubleAnimation2.To = 200;

    // Make the Storyboard a resource.
    LayoutRoot.Resources.Add("unique_id", sb);

    // Begin the animation.
    sb.Begin();
}

Answer 2

编辑请参阅下面的评论 - 这是WPF方式而不是Silverlight方式，因此您可能想忽略此答案!!

不要通过代码来做;这不是 Silverlight / WPF方式。而是使用XAML，例如：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


  <Page.Resources>

    <!-- Defines a Button style. -->
    <Style TargetType="{x:Type Button}" x:Key="MyButtonStyle">

     <Style.Triggers>

        <!-- Animate the button width on mouse over. -->
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="(Button.Width)"
                  To="200" Duration="0:0:0.5" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>  

<!-- Returns the button's width to 50 when the mouse leaves. -->
        <EventTrigger RoutedEvent="Button.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="(Button.Width)"
                  To="50" Duration="0:0:0.1" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>   

      </Style.Triggers>
    </Style>
  </Page.Resources>

  <StackPanel Margin="20">
    <Button Style="{StaticResource MyButtonStyle}" Width="50" >Click Me</Button>
  </StackPanel>
</Page>

有关详细信息，请参阅此处：Animation and Timing How-to Topics

有没有办法在silverlight中以动画方式增加控件的宽度

2 个答案: