Stretch items to fill canvas

wpf canvas controls components
JosephGarrone picture JosephGarrone · Nov 29, 2012 · Viewed 19.9k times · Source

I have a Dockpanel with items inside a Canvas. The Dockpanel and any other items (Grid etc) that I place inside the Canvas, only take up their minimum required space. How do I stretch these items to fill the entire Canvas?

    <Canvas x:Name="InfoCanvas" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="72,53,0,0">
        <DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="ReferenceInfo" Canvas.Left="0" Canvas.Top="0">
            <TextBox x:Name="ReferenceAuthor" GotFocus="FieldEnter" LostFocus="FieldLeave" FontSize="16" FontFamily="Segoe UI Light" Text="Author" Foreground="Gray" Background="Transparent" DockPanel.Dock="Top" VerticalAlignment="Top" HorizontalAlignment="Stretch" BorderThickness="0" Margin="0,2,0,2"/>
            <TextBox x:Name="ReferenceTitle" GotFocus="FieldEnter" LostFocus="FieldLeave" FontSize="16" FontFamily="Segoe UI Light" Text="Title" Foreground="Gray" Background="Transparent" DockPanel.Dock="Top" VerticalAlignment="Top" HorizontalAlignment="Stretch" BorderThickness="0" Margin="0,2,0,2"/>
            <TextBox x:Name="ReferenceDate" GotFocus="FieldEnter" LostFocus="FieldLeave" FontSize="16" FontFamily="Segoe UI Light" Text="Date" Foreground="Gray" Background="Transparent" DockPanel.Dock="Top" VerticalAlignment="Top" HorizontalAlignment="Stretch" BorderThickness="0" Margin="0,2,0,2"/>
        </DockPanel>  
    </Canvas>

Thank you!

Answer

Peter Hansen picture Peter Hansen · Nov 29, 2012

The Canvas panel doesn't really support that.

It's very basic - it just allows you to position children absolutely by using Top, Bottom, Left and Right, and it always gives them just the space they need.

So usually you would use a Grid with just 1 column and 1 row instead.

You can however bind the width and height of the DockPanel to the width and height of the Canvas. That way the DockPanel will always fill the Canvas.

<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
            Margin="0,0,0,0" x:Name="ReferenceInfo" Canvas.Left="0" Canvas.Top="0"
            Width="{Binding ActualWidth, ElementName=InfoCanvas}"
            Height="{Binding ActualHeight, ElementName=InfoCanvas}">

Related questions

Is it possible to bind a Canvas's Children property in XAML?

I'm a little surprised that it is not possible to set up a binding for Canvas.Children through XAML. I've had to resort to a code-behind approach that looks something like this: private void UserControl_Loaded(object sender, RoutedEventArgs e) { …

Read More
WPF Canvas Scaling/Transform to Fit

I'm reposting this question as I didn't get much of a response last time, hopefully a bit of re-wording might help... Essentially what I'm trying to do is to create a databound canvas, that will automatically scale its contents to …

Read More
Get Mouse Position on Canvas (But NOT on window)?

I have a project in WPF 4 and vb.net 2010. I have a canvas inside a window. The window is full screen, but the canvas is set to a solid 640x480 in the center of the window. I need to get …

Read More