locked
How do I dock a footer to the bottom of the main window? RRS feed

  • Question

  • Hi everyone,

    I'm new on Blend and I'm putting together my first WPF app. I managed to create and place all the elemens in a grid layout, but I want the footer to be always docked to the bottom of the window, no matter if the window is re-sized. How can I do this?

    Thanks in advance!

    Wednesday, March 14, 2012 7:52 PM

All replies

  • You want the DockPanel.Dock property added as dependency so like DockPanel.Dock="bottom"

    http://msdn.microsoft.com/en-us/library/system.windows.controls.dockpanel.dock.aspx

    Or if you've ordered your elements well and are stretching the horizontal alignment it would accomplish the same thing.


    Please mark answers as helpful when used, and answered when completed.


    Wednesday, March 14, 2012 8:01 PM
  • Like KS said, you can use a DockPanel, or you could create a row in a grid that is set up that way.

    	<DockPanel x:Name="LayoutRoot">
    		<Rectangle Fill="Red" Height="48" Stroke="Black" DockPanel.Dock="Bottom"/>
    		<Grid DockPanel.Dock="Top"/>
    	</DockPanel>

    <Grid x:Name="LayoutRoot">
    		<Grid.RowDefinitions>
    			<RowDefinition Height="*"/>
    			<RowDefinition Height="40"/>
    		</Grid.RowDefinitions>
    		<Rectangle Fill="Red" Stroke="Black" Grid.Row="1"/>
    	</Grid>


    Wednesday, March 14, 2012 9:22 PM
    Moderator
  • Thank you both for your replies. I tried your suggestions but the result it's a footer docked to the bottom of the LayoutRoot grid, not to the bottom of the window. Maybe I chose the wrong layout from  the beginning?
    Thursday, March 15, 2012 2:59 PM
  • Please post your xaml and we can help you further. Normally LayoutRoot spans the entire Window object, so normally that would be what you want.
    Thursday, March 15, 2012 3:31 PM
    Moderator
  • Claudia,

    Are you by chance talking about a website application and not a WPF application?

    If you are then something similar to this will work...

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="SilverlightApplication1.MainPage">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<Grid x:Name="Header" Height="100" VerticalAlignment="Top" Background="Red"/>
    		<Grid x:Name="Footer" VerticalAlignment="Bottom" Height="100" Background="Blue"/>
    	</Grid>
    </UserControl>

    Setting the UserControl and LayoutRoot height and width to auto allows it to expand with the browser.

    This will fill up the entire browser.

    If you are talking about a WPF application that uses "Windows" then typically the LayoutRoot spans the entire window.  If yours does not then check your settings.

    Setting width and height to auto and the alignment to stretch will have it span the full window.

    For WPF...

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="WpfApplication1.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot">
    		<Grid x:Name="header" Height="100" VerticalAlignment="Top" Background="Red"/>
    		<Grid x:Name="footer" Height="100" VerticalAlignment="Bottom" Background="Blue"/>
    	</Grid>
    </Window>

    ~Christine
    Saturday, March 17, 2012 3:07 PM