HOW TO PROPERLY CENTER A WPF CANVAS?

Ankita Pandey

Total Post:183

Points:1285
Posted by  Ankita Pandey
C#
 1561  View(s)
Ratings:
Rate this:

I have a full screen dialog and want to center a canvas. It seems to work well with a grid with Vertical/Horizontalalignment for a Label for example, but when I try this the top left corner gets centered instead of the middle of the canvas:

<Window

    Title=""

    Topmost="True" WindowStyle="None" WindowState="Maximized"

    >

<Grid>

    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">

        <Canvas>

            <Border Margin="20"

                Background="White"

                BorderBrush="Black"

                BorderThickness="2"

                Padding="20" >

                <DockPanel Margin="10">

                    <StackPanel DockPanel.Dock="Top" Margin="0 0 0 50"

                                Orientation="Vertical">

                       <Label FontSize="32" Content="Hello"></Label>

                    </StackPanel>

                    <StackPanel HorizontalAlignment="Right"

                                DockPanel.Dock="Bottom"

                                Orientation="Horizontal">

                            <Label FontSize="32" Content="Hello"></Label>

                    </StackPanel>

                </DockPanel>

            </Border>

        </Canvas>

    </Grid>
  1. Pravesh Singh

    Post:412

    Points:2888
    Re: How to properly center a WPF canvas?

    Hi Ankita,

    You can put the Border as child of Grid instead of Canvas. (The Grid can have more than one child) Try this:

    <Window            

        Title=""

        Topmost="True" WindowStyle="None" WindowState="Maximized"

        >

        <Grid>

            <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

                <Rectangle Canvas.Left="40" Canvas.Top="31" Width="630" Height="41" Fill="Blue" />

                <Ellipse Canvas.Left="130" Canvas.Top="79" Width="580" Height="580" Fill="Blue" />

                <Path Canvas.Left="61" Canvas.Top="28" Width="133" Height="98" Fill="Blue" Stretch="Fill" Data="M61,325 L293,28" />

            </Canvas>

            <Border Margin="20"

                    HorizontalAlignment="Center"

                    VerticalAlignment="Center"

                    Background="WhiteSmoke"

                    BorderBrush="Black"

                    BorderThickness="2"

                    Padding="20">

                <DockPanel Margin="10">

                    <StackPanel DockPanel.Dock="Top" Margin="0 0 0 50" Orientation="Vertical">

                        <Label FontSize="32" Content="Hello" />

                    </StackPanel>

                    <StackPanel HorizontalAlignment="Right"

                                    DockPanel.Dock="Bottom"

                                    Orientation="Horizontal">

                        <Label FontSize="32" Content="Hello" />

                    </StackPanel>

                </DockPanel>

            </Border>

        </Grid>

    </Window>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!