CODEWITHSUNDEEP
c#.netsilverlightanimation
BreakHead
BreakHead

Reputation: 10672

Is there a way to increase width of a control in a animated way in silverlight

I am a beginner in Silverlight. I took a border control, on mouse over of which I want to increase its width, but slowly in an animated way, and on mouse out back to normal

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

Upvotes: 0

Views: 796

Answers (2)

Mark Staff
Mark Staff

Reputation: 721

EDIT See comment below - this is the WPF way not the Silverlight way, so you might want to disregard this answer!!

Don't do it through code; that's not the Silverlight / WPF way. Instead use the XAML eg:

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

For more info see here: Animation and Timing How-to Topics

Upvotes: 0

dain
dain

Reputation: 6699

If you really want to do it with code (it's way way easier to do with visual states, even the mouse over / out is handled for you out of the box, just have to set starting and ending parameters in XAML, however if the values are dynamic, it's not possible, you can't do binding in the VisualStateManager markup as it's not part of the visual tree), here's an example (from http://msdn.microsoft.com/en-us/library/cc189069(VS.95).aspx#procedural_code ):

The following example shows how to create an animation that animates Canvas.Top and Canvas.Left attached properties of a rectangle.

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();
}

Upvotes: 1

Related Questions