Home > DeveloperSection > Forums > How to properly center a WPF canvas?
Ankita Pandey
Ankita Pandey

Total Post:183

Points:1285
Posted on    September-24-2013 4:55 AM

 C#
Ratings:


 1 Reply(s)
 1269  View(s)
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>


Pravesh Singh

Total Post:411

Points:2881
Posted on    September-24-2013 7:49 AM

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>


Don't want to miss updates? Please click the below button!

Follow MindStick