Nested Canvas

image_pdfimage_print


   
    

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

    <StackPanel>
        <TabControl MinHeight="500" MinWidth="400">
            <TabItem  Header="Canvas" IsSelected="True">
                <Canvas Height="400" Width="400">
                    <Canvas Height="100" Width="100"  Top="0" Left="0">
                        <Rectangle Width="100" Height="100" Fill="red"/>
                    </Canvas>
                    <Canvas Height="100" Width="100" Top="100" Left="100">
                        <Rectangle Width="100" Height="100" Fill="green"/>
                    </Canvas>
                    <Canvas Height="100" Width="100" Top="50" Left="50">
                        <Rectangle Width="100" Height="100" Fill="blue"/>
                    </Canvas>
                </Canvas>
            </TabItem>

        </TabControl>
    </StackPanel>

</Page>

   
    
    
    
     


Positioning on a Canvas

image_pdfimage_print


   
     
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  HorizontalAlignment="Center" VerticalAlignment="Center">
    <Canvas Background="Yellow" Width="150" Height="100">
      <TextBlock Canvas.Left="10" Canvas.Top="20">Hello</TextBlock>
      <TextBlock Canvas.Right="10" Canvas.Bottom="20">world!</TextBlock>
    </Canvas>    
</Page>

   
    
    
    
    
     


Canvas without Viewbox

image_pdfimage_print


   
     

<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>

   
    
    
    
    
     


Animation target Canvas Left, Top

image_pdfimage_print


   
      

<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>

   
    
    
    
    
    
     


Pixel Not Snapped

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

  </Canvas>
</Page>

   
    
    
    
    
    
     


Rotate Shape

image_pdfimage_print


   
      

<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>

   
    
    
    
    
    
     


Canvas dependant

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>
      <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>