Pulsating Rectangle

image_pdfimage_print


   
     

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

    <Rectangle Name="rect"
               Canvas.Left="96" Canvas.Top="96" 
               Width="192" Height="192"
               Stroke="Black">

    </Rectangle>

    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="rect"
                                     Storyboard.TargetProperty="Width"
                                     From="192" To="204" Duration="0:0:0.1"
                                     AutoReverse="True"
                                     RepeatBehavior="Forever" />

                    <DoubleAnimation Storyboard.TargetName="rect"
                                     Storyboard.TargetProperty="Height"
                                     From="192" To="204" Duration="0:0:0.1"
                                     AutoReverse="True"
                                     RepeatBehavior="Forever" />

                    <DoubleAnimation Storyboard.TargetName="rect"
                                     Storyboard.TargetProperty="(Canvas.Left)"
                                     From="96" To="90" Duration="0:0:0.1"
                                     AutoReverse="True"
                                     RepeatBehavior="Forever" />

                    <DoubleAnimation Storyboard.TargetName="rect"
                                     Storyboard.TargetProperty="(Canvas.Top)"
                                     From="96" To="90" Duration="0:0:0.1"
                                     AutoReverse="True"
                                     RepeatBehavior="Forever" />


                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
</Canvas>

   
    
    
    
    
     


Rounded Rectangle Corner radius of 5

image_pdfimage_print


   
     

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Microsoft.Samples.Graphics.RectangleExample"
    WindowTitle="Example">
  <Canvas>
    <TextBlock Margin="5,5,0,0">Corner radius of 5.</TextBlock>
    <Rectangle Fill="Yellow" Stroke="Blue" RadiusX="5" RadiusY="5"
               Width="100" Height="60" Margin="5"  HorizontalAlignment="Left">
    </Rectangle>

  </Canvas>
</Page>

   
    
    
    
    
     


Rounded Rectangle Corner radius of 10 (X) and 25 (Y)

image_pdfimage_print


   
     

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Microsoft.Samples.Graphics.RectangleExample"
    WindowTitle="Example">
  <Canvas>
  <TextBlock Margin="5,5,0,0">Corner radius of 10 (X) and 25 (Y).</TextBlock>
    <Rectangle Fill="Yellow" Stroke="Blue" RadiusX="10" RadiusY="25"
               Width="100" Height="60" Margin="5"  HorizontalAlignment="Left"></Rectangle>

  </Canvas>
</Page>

   
    
    
    
    
     


Rounded Rectangle Corner radius of 100 (X) and 60 (Y)

image_pdfimage_print


   
     

<Window x:Class="Drawing.RoundedRectangles"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="RoundedRectangles" Height="449" Width="340"
    >
  <StackPanel>


    <TextBlock Margin="5,5,0,0">Corner radius of 100 (X) and 60 (Y).</TextBlock>
    <Rectangle Fill="Yellow" Stroke="Blue" RadiusX="100" RadiusY="60"
               Width="100" Height="60" Margin="5"  HorizontalAlignment="Left"></Rectangle>
  </StackPanel>
</Window>

   
    
    
    
    
     


A rectangle with a rotate transformation

image_pdfimage_print


   
     
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:sys="clr-namespace:System;assembly=mscorlib" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <Grid>

    <Rectangle Height ="100" Width ="40" Fill ="Red" Grid.Row="0" Grid.Column="0">
      <Rectangle.LayoutTransform>
        <RotateTransform Angle ="45"/>
      </Rectangle.LayoutTransform>
    </Rectangle>

  </Grid>

</Window>

   
    
    
    
    
     


Trigger animation with Rectangle.MouseEnter

image_pdfimage_print


   
     
<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>
    <Rectangle Height="100" Width="100" Fill="Firebrick" Stroke="Black" StrokeThickness="1">
      <Rectangle.Style>
        <Style TargetType="Rectangle">
          <Style.Triggers>
            <EventTrigger RoutedEvent="Rectangle.MouseEnter">
              <BeginStoryboard>
                <Storyboard>
                  <ParallelTimeline RepeatBehavior="Forever" AutoReverse="True">
                    <DoubleAnimation Storyboard.TargetProperty="Width" To="150" />
                    <DoubleAnimation Storyboard.TargetProperty="Height" To="150" />
                    <ColorAnimation Storyboard.TargetProperty="Fill.Color" To="Orange" />
                  </ParallelTimeline>
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Style.Triggers>
        </Style>
      </Rectangle.Style>
    </Rectangle>
  </Grid>
</Window>