none
Create overlay (Layers) on canvas

    Question

  • Hi, 

    I want to add multiple layers of canvas but outside of parent canvas due so that i can perform only necessary operations on required layer without affecting other canvas. 

    Please suggest me an appropriate way to overlay multiple canvas.

    Thanks,

    Saturday, November 24, 2012 10:06 AM

Answers

  • Please find some examples of side by side canvases. Grid is a good UIElement to achieve such effect.

    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Grid Background="Linen">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Canvas Grid.Row="0">
                <Canvas Background="Red" Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                <Canvas Background="Orange" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                <Canvas Background="OliveDrab" Width="20" Height="20" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                <Canvas Background="Plum" Width="0" Height="0" HorizontalAlignment="Left" VerticalAlignment="Top">
                    <!-- Notice that a Canvas does not limit its children position with respect to its size [the Rectangle visually appears as if in 2nd Column] -->
                    <!-- This feature is often used by just setting Canvas Width and Height to an implicit 0 value -->
                    <Rectangle Fill="LightBlue" Canvas.Top="200" Canvas.Left="800" Width="100" Height="100"/>
                </Canvas>
            </Canvas>
            <Canvas Grid.Row="1" Background="Red" Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top">
                <Rectangle Fill="DarkBlue" Canvas.Top="200" Canvas.Left="800" Width="100" Height="100"/>
            </Canvas>
            <Canvas Grid.Row="1" Background="Orange" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Canvas Grid.Row="1" Background="OliveDrab" Width="20" Height="20" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        </Grid>
    </Page>
    

    Saturday, November 24, 2012 12:36 PM