Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. General Programming
  3. WPF
  4. how to animate the button in sequencial mode ?

how to animate the button in sequencial mode ?

Scheduled Pinned Locked Moved WPF
wpfquestioncsharpcomtutorial
9 Posts 3 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • F Offline
    F Offline
    Feras Mazen Taleb
    wrote on last edited by
    #1

    hello this is my first animation practice in WPF so I considered it a very big achievment !! but I want to animate the item like carasoul panel (control of Infaragistics) : - how can I animate the buttons that contain advertisement image and when the user hover on button the all buttons stop not only the button - how can I make the same animation for all buttons but not in the same time this is my Powerfull user control code :

    <UserControl x:Class="AdvertisementsPanel.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded">
    <UserControl.Resources>
    <Style x:Key="AdvertisementItem" TargetType="{x:Type Button}">
    <Setter Property="MaxHeight" Value="75" />
    <Setter Property="MinHeight" Value="75" />
    <Setter Property="MaxWidth" Value="110" />
    <Setter Property="MinWidth" Value="110" />
    <Setter Property="Opacity" Value=".5" />
    <Style.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
    <EventTrigger.Actions>
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation
    Duration="0:0:0.2"
    Storyboard.TargetProperty="MaxHeight"
    To="90" />
    <DoubleAnimation
    Duration="0:0:0.2"
    Storyboard.TargetProperty="MaxWidth"
    To="140" />
    <DoubleAnimation
    Duration="0:0:0.2"
    Storyboard.TargetProperty="Opacity"
    To="1.0" />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger.Actions>
    </EventTrigger>

                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
    								Duration="0:0:1" 
    								Storyboard.TargetProperty="MaxHeight" />
                                <DoubleAnimation 
    								Duration="0:0:1" 
    								Storyboard.TargetProperty="MaxWidth" />
                                <DoubleAnimation
    
    A P F 3 Replies Last reply
    0
    • F Feras Mazen Taleb

      hello this is my first animation practice in WPF so I considered it a very big achievment !! but I want to animate the item like carasoul panel (control of Infaragistics) : - how can I animate the buttons that contain advertisement image and when the user hover on button the all buttons stop not only the button - how can I make the same animation for all buttons but not in the same time this is my Powerfull user control code :

      <UserControl x:Class="AdvertisementsPanel.UserControl1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded">
      <UserControl.Resources>
      <Style x:Key="AdvertisementItem" TargetType="{x:Type Button}">
      <Setter Property="MaxHeight" Value="75" />
      <Setter Property="MinHeight" Value="75" />
      <Setter Property="MaxWidth" Value="110" />
      <Setter Property="MinWidth" Value="110" />
      <Setter Property="Opacity" Value=".5" />
      <Style.Triggers>
      <EventTrigger RoutedEvent="Mouse.MouseEnter">
      <EventTrigger.Actions>
      <BeginStoryboard>
      <Storyboard>
      <DoubleAnimation
      Duration="0:0:0.2"
      Storyboard.TargetProperty="MaxHeight"
      To="90" />
      <DoubleAnimation
      Duration="0:0:0.2"
      Storyboard.TargetProperty="MaxWidth"
      To="140" />
      <DoubleAnimation
      Duration="0:0:0.2"
      Storyboard.TargetProperty="Opacity"
      To="1.0" />
      </Storyboard>
      </BeginStoryboard>
      </EventTrigger.Actions>
      </EventTrigger>

                  <EventTrigger RoutedEvent="Mouse.MouseLeave">
                      <EventTrigger.Actions>
                          <BeginStoryboard>
                              <Storyboard>
                                  <DoubleAnimation 
      								Duration="0:0:1" 
      								Storyboard.TargetProperty="MaxHeight" />
                                  <DoubleAnimation 
      								Duration="0:0:1" 
      								Storyboard.TargetProperty="MaxWidth" />
                                  <DoubleAnimation
      
      A Offline
      A Offline
      ABitSmart
      wrote on last edited by
      #2

      Feras Mazen Taleb wrote:

      how can I make the same animation for all buttons but not in the same time

      I don't understand this statement. Take a look at this list of crazy WPF layout panels.[^].

      F 1 Reply Last reply
      0
      • A ABitSmart

        Feras Mazen Taleb wrote:

        how can I make the same animation for all buttons but not in the same time

        I don't understand this statement. Take a look at this list of crazy WPF layout panels.[^].

        F Offline
        F Offline
        Feras Mazen Taleb
        wrote on last edited by
        #3

        ABitSmart wrote:

        Take a look at this list of crazy WPF layout panels.

        thanks for that I will try to clear my idea I need to make a vertical list of photos that animate from up to down this is my simple idea in the previous xaml code you will notice that I put one button that animate from up to down repeatedly I want to put many photos but each photo has its own start and end point and when the photo reach the down I want to push it in the first (ie return it to the top) I hope that i cleared my idea :)

        You have To Search About The Truth Of Your Life Why Are you Here In Life ?

        F 1 Reply Last reply
        0
        • F Feras Mazen Taleb

          ABitSmart wrote:

          Take a look at this list of crazy WPF layout panels.

          thanks for that I will try to clear my idea I need to make a vertical list of photos that animate from up to down this is my simple idea in the previous xaml code you will notice that I put one button that animate from up to down repeatedly I want to put many photos but each photo has its own start and end point and when the photo reach the down I want to push it in the first (ie return it to the top) I hope that i cleared my idea :)

          You have To Search About The Truth Of Your Life Why Are you Here In Life ?

          F Offline
          F Offline
          Feras Mazen Taleb
          wrote on last edited by
          #4

          I'm waiting my friend I just need the starting point to know how to build this control

          You have To Search About The Truth Of Your Life Why Are you Here In Life ?

          F 1 Reply Last reply
          0
          • F Feras Mazen Taleb

            I'm waiting my friend I just need the starting point to know how to build this control

            You have To Search About The Truth Of Your Life Why Are you Here In Life ?

            F Offline
            F Offline
            Feras Mazen Taleb
            wrote on last edited by
            #5

            this is the last thing I Achieved : I added the animation to the buttons programmatically this is the code behind file :

            using System;
            using System.Collections.Generic;
            using System.Linq;
            using System.Text;
            using System.Windows;
            using System.Windows.Controls;
            using System.Windows.Data;
            using System.Windows.Documents;
            using System.Windows.Input;
            using System.Windows.Media;
            using System.Windows.Media.Imaging;
            using System.Windows.Navigation;
            using System.Windows.Shapes;
            using System.Windows.Media.Animation;

            namespace practiceOnAnimationClasses
            {
            /// <summary>
            /// Interaction logic for Window1.xaml
            /// </summary>
            public partial class Window1 : Window
            {
            public Window1()
            {
            InitializeComponent();
            }

                DoubleAnimationUsingPath Animation1 = new DoubleAnimationUsingPath();
            
                private void Window\_Loaded(object sender, RoutedEventArgs e)
                {
                    List<Button> buttons = new List<Button>(5);
                    buttons.Add(new Button() { Width = 120d, Height = 75d, Content = "Advertisement 1" });
                    buttons.Add(new Button() { Width = 120d, Height = 75d, Content = "Advertisement 2" });
                    buttons.Add(new Button() { Width = 120d, Height = 75d, Content = "Advertisement 3" });
                    buttons.Add(new Button() { Width = 120d, Height = 75d, Content = "Advertisement 4" });
                    buttons.Add(new Button() { Width = 120d, Height = 75d, Content = "Advertisement 5" });
            
                    // Storyboard AnimationRectanglePath = (Storyboard)this.Resources\["StoryboardPath"\];
            
                    int count = 0;
                    foreach (var item in buttons)
                    {
                        MainCanvas.Children.Add(item);
                        DoubleAnimation myDoubleAnimation = new DoubleAnimation();
                        myDoubleAnimation.From = 75 + (count \* item.Width);
                        myDoubleAnimation.To = 800;
                        myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(15));
                        myDoubleAnimation.AutoReverse = false;
                        myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
            
                        // Apply the animation to the button's Width property.
                        item.BeginAnimation(Canvas.LeftProperty, myDoubleAnimation);
                        count++;
                    }
                }
            }
            

            }

            Xaml File it only contains the mainCanvas that I will Add Buttons to It the movement is very creasy and wrong How Can I make the movement

            1 Reply Last reply
            0
            • F Feras Mazen Taleb

              hello this is my first animation practice in WPF so I considered it a very big achievment !! but I want to animate the item like carasoul panel (control of Infaragistics) : - how can I animate the buttons that contain advertisement image and when the user hover on button the all buttons stop not only the button - how can I make the same animation for all buttons but not in the same time this is my Powerfull user control code :

              <UserControl x:Class="AdvertisementsPanel.UserControl1"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded">
              <UserControl.Resources>
              <Style x:Key="AdvertisementItem" TargetType="{x:Type Button}">
              <Setter Property="MaxHeight" Value="75" />
              <Setter Property="MinHeight" Value="75" />
              <Setter Property="MaxWidth" Value="110" />
              <Setter Property="MinWidth" Value="110" />
              <Setter Property="Opacity" Value=".5" />
              <Style.Triggers>
              <EventTrigger RoutedEvent="Mouse.MouseEnter">
              <EventTrigger.Actions>
              <BeginStoryboard>
              <Storyboard>
              <DoubleAnimation
              Duration="0:0:0.2"
              Storyboard.TargetProperty="MaxHeight"
              To="90" />
              <DoubleAnimation
              Duration="0:0:0.2"
              Storyboard.TargetProperty="MaxWidth"
              To="140" />
              <DoubleAnimation
              Duration="0:0:0.2"
              Storyboard.TargetProperty="Opacity"
              To="1.0" />
              </Storyboard>
              </BeginStoryboard>
              </EventTrigger.Actions>
              </EventTrigger>

                          <EventTrigger RoutedEvent="Mouse.MouseLeave">
                              <EventTrigger.Actions>
                                  <BeginStoryboard>
                                      <Storyboard>
                                          <DoubleAnimation 
              								Duration="0:0:1" 
              								Storyboard.TargetProperty="MaxHeight" />
                                          <DoubleAnimation 
              								Duration="0:0:1" 
              								Storyboard.TargetProperty="MaxWidth" />
                                          <DoubleAnimation
              
              P Offline
              P Offline
              Pete OHanlon
              wrote on last edited by
              #6

              I would create a bool property called IsSelected, and use a datatrigger to fire the animation when IsSelected is true - then all you need do is loop round in your code setting this value when you need it.

              "WPF has many lovers. It's a veritable porn star!" - Josh Smith

              As Braveheart once said, "You can take our freedom but you'll never take our Hobnobs!" - Martin Hughes.

              My blog | My articles | MoXAML PowerToys | Onyx

              F 1 Reply Last reply
              0
              • P Pete OHanlon

                I would create a bool property called IsSelected, and use a datatrigger to fire the animation when IsSelected is true - then all you need do is loop round in your code setting this value when you need it.

                "WPF has many lovers. It's a veritable porn star!" - Josh Smith

                As Braveheart once said, "You can take our freedom but you'll never take our Hobnobs!" - Martin Hughes.

                My blog | My articles | MoXAML PowerToys | Onyx

                F Offline
                F Offline
                Feras Mazen Taleb
                wrote on last edited by
                #7

                could you explain more ! I will try to explain what I understood I will make A dependency property IsSelected in My UserControl THis Property will e true when Any of the buttons are hovered on mouse All animations will paused when the property is True is this right ? ??? ?? ? second could you see my third replay that I inserted my code that i try to make the movement programmatically thanks a lot MR.O'Hanlon ;)

                You have To Search About The Truth Of Your Life Why Are you Here In Life ?

                1 Reply Last reply
                0
                • F Feras Mazen Taleb

                  hello this is my first animation practice in WPF so I considered it a very big achievment !! but I want to animate the item like carasoul panel (control of Infaragistics) : - how can I animate the buttons that contain advertisement image and when the user hover on button the all buttons stop not only the button - how can I make the same animation for all buttons but not in the same time this is my Powerfull user control code :

                  <UserControl x:Class="AdvertisementsPanel.UserControl1"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded">
                  <UserControl.Resources>
                  <Style x:Key="AdvertisementItem" TargetType="{x:Type Button}">
                  <Setter Property="MaxHeight" Value="75" />
                  <Setter Property="MinHeight" Value="75" />
                  <Setter Property="MaxWidth" Value="110" />
                  <Setter Property="MinWidth" Value="110" />
                  <Setter Property="Opacity" Value=".5" />
                  <Style.Triggers>
                  <EventTrigger RoutedEvent="Mouse.MouseEnter">
                  <EventTrigger.Actions>
                  <BeginStoryboard>
                  <Storyboard>
                  <DoubleAnimation
                  Duration="0:0:0.2"
                  Storyboard.TargetProperty="MaxHeight"
                  To="90" />
                  <DoubleAnimation
                  Duration="0:0:0.2"
                  Storyboard.TargetProperty="MaxWidth"
                  To="140" />
                  <DoubleAnimation
                  Duration="0:0:0.2"
                  Storyboard.TargetProperty="Opacity"
                  To="1.0" />
                  </Storyboard>
                  </BeginStoryboard>
                  </EventTrigger.Actions>
                  </EventTrigger>

                              <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                  <EventTrigger.Actions>
                                      <BeginStoryboard>
                                          <Storyboard>
                                              <DoubleAnimation 
                  								Duration="0:0:1" 
                  								Storyboard.TargetProperty="MaxHeight" />
                                              <DoubleAnimation 
                  								Duration="0:0:1" 
                  								Storyboard.TargetProperty="MaxWidth" />
                                              <DoubleAnimation
                  
                  F Offline
                  F Offline
                  Feras Mazen Taleb
                  wrote on last edited by
                  #8

                  hello this what achieved until now 1- I decided to make the animation programmatically because I thing even if I used blend to design the animation I need to control it programmatically because I will set the same animation to many controls but with deffirent start and end point 2- I will use [DoubleAnimationUsingPath] class to design the animation path 3- Now I'm trying to look for answers for these two questions - How can I make the animation continuos of course (Forever) But What I mean Exactly is : when the control reaches the end point it will return to the start - How can I pause the the animation Programmatically thanks a lot for every one sharing me with his/her ideas

                  You have To Search About The Truth Of Your Life Why Are you Here In Life ?

                  F 1 Reply Last reply
                  0
                  • F Feras Mazen Taleb

                    hello this what achieved until now 1- I decided to make the animation programmatically because I thing even if I used blend to design the animation I need to control it programmatically because I will set the same animation to many controls but with deffirent start and end point 2- I will use [DoubleAnimationUsingPath] class to design the animation path 3- Now I'm trying to look for answers for these two questions - How can I make the animation continuos of course (Forever) But What I mean Exactly is : when the control reaches the end point it will return to the start - How can I pause the the animation Programmatically thanks a lot for every one sharing me with his/her ideas

                    You have To Search About The Truth Of Your Life Why Are you Here In Life ?

                    F Offline
                    F Offline
                    Feras Mazen Taleb
                    wrote on last edited by
                    #9

                    thanks a lot I got it Now , I have gallery control that can display images or videos the animation starts from the left to the right Forever Paused when mouseover any item and resume when mouseLeave the Item I hope to have enough time to make my first article in CodeProject about my control :)

                    You have To Search About The Truth Of Your Life Why Are you Here In Life ?

                    1 Reply Last reply
                    0
                    Reply
                    • Reply as topic
                    Log in to reply
                    • Oldest to Newest
                    • Newest to Oldest
                    • Most Votes


                    • Login

                    • Don't have an account? Register

                    • Login or register to search.
                    • First post
                      Last post
                    0
                    • Categories
                    • Recent
                    • Tags
                    • Popular
                    • World
                    • Users
                    • Groups