Positioning elements on a Silverlight Canvas

The Canvas.Top and Canvas.Left attributes can be set within the children control’s XAML to position within the Canvas relatively.

<UserControl x:Class='TestSilverlightApplication.MainPage'
    xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
    xmlns:d='http://schemas.microsoft.com/expression/blend/2008' 
    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' 
    mc:Ignorable='d' 
    d:DesignWidth='640' 
    d:DesignHeight='480'>
    <StackPanel Orientation="Vertical" Background="Blue">
        <Canvas x:Name="MyCanvas" HorizontalAlignment="Left" VerticalAlignment="Top"
            Height="200" Width="400" Background="White" Margin="10">            
            <TextBlock Canvas.Top="10" Canvas.Left="15" FontSize="40" Foreground="Red" Text="Sample Canvas Text" />
            <Rectangle Canvas.Top="40" Canvas.Left="50" Height="60" Width="100" Fill="Green" Canvas.ZIndex="-1" />
            <TextBlock Canvas.Top="60" Canvas.Left="200" FontSize="20" Foreground="Gray" Text="Some More Example Text..." />
        </Canvas>
    </StackPanel>
</UserControl>

Enjoyed this post? Share it!

 

Leave a comment

Your email address will not be published.