Author: coder

Animate Ellipse RadiusY, RadiusX

Posted on by coder 


   
     

<Window x:Class="Main"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="" Height="300" Width="300">
  <Grid>
    <Path Stroke="Black" StrokeThickness="1">
      <Path.Data>
        <GeometryGroup>
          <EllipseGeometry x:Name="ellipse" Center="150,150" RadiusX="5" RadiusY="5" />
        </GeometryGroup>
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard>
            <Storyboard AutoReverse="True" RepeatBehavior="Forever">
              <ParallelTimeline Storyboard.TargetName="ellipse">
                <DoubleAnimation To="80" Storyboard.TargetProperty="RadiusX" />
                <DoubleAnimation To="80" Storyboard.TargetProperty="RadiusY" />
              </ParallelTimeline>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>
  </Grid>
</Window>

XAML Only Animation

Posted on by coder 



     


<Window x:Class="XamlOnly"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    
xmlns:x=
"http://schemas.microsoft.com/winfx/2006/xaml" 
Title=
"XamlOnly"

    Height="300" Width="300">

    <Grid>

      <StackPanel>

            <TextBlock Name="textBlock" Margin="5"

                TextAlignment="Center" Height="30"

                Text="{Binding ElementName=textBox,Path=Text}" />

            <TextBox Name="textBox" Margin="5" Width="200"

                TextAlignment="Center" Text="Hello, WPF!" />

            <Button Margin="5" Width="200"

                Content="Change Text Color">

                <Button.Triggers>

                    <EventTrigger RoutedEvent="Button.Click">

                        <BeginStoryboard>

                            <Storyboard>

                                <ColorAnimation

                                    Storyboard.TargetName="textBlock"
                                    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                    From="Black" To="Red" Duration="0:0:1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </StackPanel>
   </Grid>
</Window>

  

Two Animations

Posted on by coder 

     

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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


    <Ellipse Width="48" Height="48" Fill="Red"

             Canvas.Left="0" Canvas.Top="0">


        <Ellipse.Triggers>

            <EventTrigger RoutedEvent="Ellipse.MouseDown">

                <BeginStoryboard>

                    <Storyboard>


                        <DoubleAnimation 

                            Storyboard.TargetProperty="(Canvas.Left)"

                            From="0" To="288" Duration="0:0:1"

                            AutoReverse="True" />


                        <DoubleAnimation 

                            Storyboard.TargetProperty="(Canvas.Top)"

                            From="0" To="480" Duration="0:0:5"

                            AutoReverse="True" />


                    </Storyboard>

                </BeginStoryboard>

            </EventTrigger>

        </Ellipse.Triggers>

    </Ellipse>

</Canvas>