How to make Animations in WPF C#?

Question

I am trying to create a similar project with what this guy has made Youtube Video

Of course, not that awesome, it is way beyond my skills. But what I am trying to make now is very simple (compared to the video)

this is what I have done so far

This is what I've made, With Drag and drop of course, cant figure out how to create a shape (Rectangle or any other shape) in a short distance from the specific button, and then connected with an other shape or something similar.

This what I've done is just when you press the button to show those two Rectangles.

Also, trying to make it in different Angles too. for example like in this pic

To give you a better understanding in the project I am making, please read bellow.

This is a school project I am making, I have some data in a database in SQL and want to demonstrate those not in a table or any label, but as in the photos I show you. For example. When the form loads, it gets the first row, and lists items like Name (will be the button) then the other rectangles will be created from the information listed. for example. When you click the Name of the person(button) it will show 2-3 Rectangles(the green rectangles) with the labels of Age, School, Gender or anything else.

How can I do this? Is it able to be done? I know its really hard, but can any one refer me in any tutorial for this? What I've searched on google, most of the tutorials are outdated, 6-7 years old.

Thanks for your Consideration

Answer 1

Ya I know what you're trying to accomplish, but like I said it's the type of reason places hire specialty front-end "devigner" guys to make that stuff.

So I apologize for the delayed response but I had to get my normal workday stuff out of the way first, and I spent about 15mins on this little example before I head off for the day soon to get you started with an idea or two.

I did however leave out the Exit actions for when Toggle IsChecked=False. There's also a lot of other ways I might do things if it was my project but something like this could eat up most of a day or more real easily (especially depending how cool you make it) so this is just a pseudo example but I hope it helps.

As a ToggleButton template (SUPER SIMPLE CONCEPT EXAMPLE);

<ToggleButton Content="Boaty McBoatFace" HorizontalAlignment="Center" VerticalAlignment="Center">
            <ToggleButton.Template>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <ControlTemplate.Resources>

                        <Storyboard x:Key="bubbleAnim">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble1">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="55"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble1">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="55"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble2">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="55"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble3">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="210"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble3">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="55"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble4">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="210"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble4">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="133"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble5">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="210"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble5">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="205"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble6">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="205"/>
                            </DoubleAnimationUsingKeyFrames>
                            <Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="bubble6">
                                <EasingInt32KeyFrame KeyTime="0:0:0.7" Value="-5"/>
                            </Int32AnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble7">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="55"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble7">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="205"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble8">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="55"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble8">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="133"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble1">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble2">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble3">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble4">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble5">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble6">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.985"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble7">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble8">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line1">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line2">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line3">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line4">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line5">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line6">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line7">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line8">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>

                    </ControlTemplate.Resources>

                    <Border Height="300" Width="300">
                        <Canvas>
                            <Canvas.Resources>
                                <Style TargetType="Line">
                                    <Setter Property="VerticalAlignment" Value="Center"/>
                                    <Setter Property="Stroke" Value="Red"/>
                                    <Setter Property="StrokeThickness" Value="2"/>
                                </Style>
                                <Style TargetType="Border">
                                    <Setter Property="Background" Value="White"/>
                                    <Setter Property="BorderBrush" Value="Purple"/>
                                    <Setter Property="BorderThickness" Value="3"/>
                                    <Setter Property="CornerRadius" Value="50"/>
                                    <Setter Property="Padding" Value="10,5"/>
                                </Style>
                            </Canvas.Resources>

                            <Line x:Name="line1" Opacity="0" 
                                      X1="75" Y1="75"
                                      X2="150" Y2="150"/>
                            <Line x:Name="line2" Opacity="0"
                                      X1="150" Y1="75"
                                      X2="150" Y2="150" Stroke="Blue"/>
                            <Line x:Name="line3" Opacity="0"
                                      X1="225" Y1="75"
                                      X2="150" Y2="150"/>
                            <Line x:Name="line4" Opacity="0"
                                      X1="225" Y1="150"
                                      X2="150" Y2="150" Stroke="Blue"/>
                            <Line x:Name="line5" Opacity="0"
                                      X1="150" Y1="150"
                                      X2="75" Y2="225"/>
                            <Line x:Name="line6" Opacity="0"
                                      X1="150" Y1="150"
                                      X2="150" Y2="225" Stroke="Blue"/>
                            <Line x:Name="line7" Opacity="0"
                                      X1="150" Y1="150"
                                      X2="225" Y2="225"/>
                            <Line x:Name="line8" Opacity="0"
                                      X1="150" Y1="150"
                                      X2="75" Y2="150" Stroke="Blue"/>


                            <Border x:Name="bubble1" Opacity="0"
                                    Canvas.Left="133" Canvas.Top="134">
                                <TextBlock Text="1"/>
                            </Border>

                            <Border x:Name="bubble2" Opacity="0"
                                    Canvas.Left="133" Canvas.Top="134">
                                <TextBlock Text="2"/>
                            </Border>

                            <Border x:Name="bubble3" Opacity="0"
                                    Canvas.Left="133" Canvas.Top="134">
                                <TextBlock Text="3"/>
                            </Border>

                            <Border x:Name="bubble4" Opacity="0"
                                    Canvas.Left="133" Canvas.Top="134">
                                <TextBlock Text="4"/>
                            </Border>

                            <Border x:Name="bubble5" Opacity="0"
                                    Canvas.Left="133" Canvas.Top="134">
                                <TextBlock Text="5"/>
                            </Border>

                            <Border x:Name="bubble6" Opacity="0"
                                    Canvas.Left="133" Canvas.Top="134">
                                <TextBlock Text="6"/>
                            </Border>

                            <Border x:Name="bubble7" Opacity="0"
                                    Canvas.Left="133" Canvas.Top="134">
                                <TextBlock Text="7"/>
                            </Border>

                            <Border x:Name="bubble8" Opacity="0"
                                    Canvas.Left="133" Canvas.Top="134">
                                <TextBlock Text="8"/>
                            </Border>

                            <Border CornerRadius="3" Background="{TemplateBinding Background}"
                                    Canvas.Left="95" Canvas.Top="138" Padding="1">
                                <ContentPresenter />
                            </Border>


                        </Canvas>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource bubbleAnim}"/>
                            </Trigger.EnterActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>