HOW TO PROPERLY CENTER A WPF CANVAS?

Ankita Pandey

Total Post:183

Points:1285
Posted by  Ankita Pandey
WPF 
C#
 1750  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>

      Modified On Mar-31-2018 01:50:06 AM

Answer

NEWSLETTER

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