Есть ли способ увеличить ширину элемента управления в Silverlight?

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>

Для получения дополнительной информации см. Здесь: Темы для анимации и синхронизации