Canvas.SetTop


   
  
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Canvas_Positioning_Properties.Window1"
    Title="Canvas Positioning Properties">
  <StackPanel>
    <Canvas Name="canvas1" Height="300">
        <TextBlock Name="text1" FontWeight="Bold" Canvas.Left="0" Canvas.Right="0" Canvas.Top="0" Canvas.Bottom="0">A TextBlock.</TextBlock>
  </Canvas>
    <ListBox Grid.Column="5" Grid.Row="1" VerticalAlignment="Top" Width="60" Margin="10,0,0,0" SelectionChanged="ChangeTop">
      <ListBoxItem>Auto</ListBoxItem>      
      <ListBoxItem>10</ListBoxItem>
      <ListBoxItem>20</ListBoxItem>
      <ListBoxItem>30</ListBoxItem>
      <ListBoxItem>40</ListBoxItem>
      <ListBoxItem>50</ListBoxItem>
      <ListBoxItem>60</ListBoxItem>
      <ListBoxItem>70</ListBoxItem>
      <ListBoxItem>80</ListBoxItem>
      <ListBoxItem>90</ListBoxItem>
      <ListBoxItem>100</ListBoxItem>  
    </ListBox>

  </StackPanel>        
</Window>
//File:Window.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Data;

namespace Canvas_Positioning_Properties
{

  public partial class Window1 : Window
  {
    public void ChangeTop(object sender, SelectionChangedEventArgs args)
    {
            ListBoxItem li3 = ((sender as ListBox).SelectedItem as ListBoxItem);
            LengthConverter myLengthConverter = new LengthConverter();
      Double db3 = (Double)myLengthConverter.ConvertFromString(li3.Content.ToString());
      Canvas.SetTop(text1, db3);
      Console.WriteLine(myLengthConverter.ConvertToString(Canvas.GetTop(text1)));
    }


  }
}

   
    
     


Simple Canvas Layout


   
      
<Window x:Class="LayoutPanels.SimpleCanvas"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="LayoutPanels" Height="241.6" Width="240"
    >
    <Canvas>
      <Button Canvas.Left="10" Canvas.Top="10">(10,10)</Button>
      <Button Canvas.Left="120" Canvas.Top="30">(120,30)</Button>
      <Button Canvas.Left="60" Canvas.Top="80" Width="50" Height="50">(60,80)</Button>
      <Button Canvas.Left="70" Canvas.Top="120" Width="100" Height="50">(70,120)</Button>
    </Canvas>
</Window>

   
    
    
    
    
    
     


Canvas dependant


   
      
<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>
      <Ellipse Fill="Yellow" Stroke="Blue" 
               Width="100" Height="50" Margin="5" HorizontalAlignment="Left"></Ellipse>
      <Rectangle Fill="Yellow" Stroke="Blue" 
                 Width="100" Height="50" Margin="5"  HorizontalAlignment="Left"></Rectangle>
      <Ellipse Fill="Yellow" Stroke="Blue" Canvas.Left="100"  Canvas.Top="50"
               Width="100" Height="50" ></Ellipse>
      <Rectangle Fill="Yellow" Stroke="Blue" Canvas.Left="30"  Canvas.Top="40"                 
                 Width="100" Height="50" ></Rectangle>


  </Canvas>
</Page>

   
    
    
    
    
    
     


Rotate Shape


   
      

<Window x:Class="Drawing.RotateShape"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="RotateShape" Height="427" Width="332"
    >
  <Canvas>
    <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" 
          Canvas.Left="100" Canvas.Top="100">      
    </Rectangle>

    <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" 
      Canvas.Left="100" Canvas.Top="100">
      <Rectangle.RenderTransform>
        <RotateTransform Angle="25" />
      </Rectangle.RenderTransform>
    </Rectangle>

    <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" 
          Canvas.Left="100" Canvas.Top="100">
      <Rectangle.RenderTransform>
        <RotateTransform Angle="50" />
      </Rectangle.RenderTransform>
    </Rectangle>

    <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" 
      Canvas.Left="100" Canvas.Top="100">
      <Rectangle.RenderTransform>
        <RotateTransform Angle="75" />
      </Rectangle.RenderTransform>
    </Rectangle>

    <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" 
      Canvas.Left="100" Canvas.Top="100">
      <Rectangle.RenderTransform>
        <RotateTransform Angle="100" />
      </Rectangle.RenderTransform>
    </Rectangle>

    <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" 
          Canvas.Left="100" Canvas.Top="300">
    </Rectangle>

    <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" 
      Canvas.Left="100" Canvas.Top="300">
      <Rectangle.RenderTransform>
        <RotateTransform Angle="25" CenterX="45" CenterY="5" />
      </Rectangle.RenderTransform>
    </Rectangle>

    <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" 
      Canvas.Left="100" Canvas.Top="300">
      <Rectangle.RenderTransform>
        <RotateTransform Angle="50" CenterX="45" CenterY="5" />
      </Rectangle.RenderTransform>
    </Rectangle>
    
    <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" 
      Canvas.Left="100" Canvas.Top="300">
      <Rectangle.RenderTransform>
        <RotateTransform Angle="75" CenterX="45" CenterY="5" />
      </Rectangle.RenderTransform>
    </Rectangle>
    
    <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" 
      Canvas.Left="100" Canvas.Top="300">
      <Rectangle.RenderTransform>
        <RotateTransform Angle="100" CenterX="45" CenterY="5" />
      </Rectangle.RenderTransform>
    </Rectangle>
  </Canvas>


</Window>

   
    
    
    
    
    
     


Pixel Not Snapped


   
      
<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 VerticalAlignment="Center">Not Snapped:</TextBlock>
    <Rectangle SnapsToDevicePixels="False" Margin="10" Height="10" Fill="Red"></Rectangle>

  </Canvas>
</Page>

   
    
    
    
    
    
     


Animation target Canvas Left, Top


   
      

<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="300" Duration="0:0:0.25"
                            AutoReverse="True" 
                            RepeatBehavior="20x" />
                        <DoubleAnimation 
                            Storyboard.TargetProperty="(Canvas.Top)"
                            From="0" To="480" Duration="0:0:5"
                            AutoReverse="True" />
                        <ParallelTimeline BeginTime="0:0:10" FillBehavior="Stop">
                            <DoubleAnimation Storyboard.TargetProperty="Width" From="48" To="480" Duration="0:0:1" />
                            <DoubleAnimation Storyboard.TargetProperty="Height" From="48" To="480" Duration="0:0:1" />
                        </ParallelTimeline>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>
</Canvas>

   
    
    
    
    
    
     


Canvas without Viewbox


   
     

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

  <Canvas Width="18" Height="18" VerticalAlignment="Center">
    <Ellipse Canvas.Left="1" Canvas.Top="1" Width="16" Height="16" Fill="Yellow" Stroke="Black" />
    <Ellipse Canvas.Left="4.5" Canvas.Top="5" Width="2.5" Height="3" Fill="Black" />
    <Ellipse Canvas.Left="11" Canvas.Top="5" Width="2.5" Height="3" Fill="Black" />
    <Path Data="M 5,10 A 3,3 90 0 0 13,10" Stroke="Black" />
  </Canvas>

</Window>