CODEWITHSUNDEEP
c#wpf
Frank
Frank

Reputation: 455

how to properly center a WPF canvas?

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>

Upvotes: 2

Views: 7111

Answers (2)

Tony
Tony

Reputation: 17637

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>

Upvotes: 1

K Mehta
K Mehta

Reputation: 10533

That's because you haven't set a Width and Height on your canvas, and in in the case of a canvas, the ActualWidth and ActualHeight properties (which are used for layout) default to 0.

You can test this by setting the Background on the Canvas - in your case, the background color won't be rendered because of the aforementioned reason.

To work around this do one of the following:

  1. pick another container (Grid, for example) which adapts based on it's children's sizes
  2. set the Width and Height on the Canvas explicitly.

Upvotes: 4

Related Questions