So i have WPF application:
<Grid Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="270" />
<RowDefinition Height="200" />
<RowDefinition Height="260" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
</Grid>
In the last Row i have StatusBar:
<Grid Name="gridStatusBar" Grid.Row="3" Margin="0,0,0,0">
<StatusBar>
<StatusBarItem HorizontalAlignment="Left">
<Label
FontSize="13"
FontFamily="Comic Sans MS"
Foreground="Gainsboro"
Margin="0,-3,0,0"/>
</StatusBarItem>
</StatusBar>
</Grid>
So in case of resize my application i cannot see my StatusBar, i try to add VerticalAlignment="Bottom" and VerticalAlignment="Top" but this still
not helped.
Your Grid effectively has a fixed height of 270 + 200 + 260 + 30 = 760.
You should use relative (star *) sizes if you want it to be able to shrink and grow dynamically:
<Grid.RowDefinitions>
<RowDefinition Height="270*" />
<RowDefinition Height="200*" />
<RowDefinition Height="260*" />
<RowDefinition Height="30" /> <!-- only this height is actually fixed -->
</Grid.RowDefinitions>
Another option would be to use another kind of Panel, such as for example a DockPanel and always dock the StatusBar to the bottom:
<DockPanel>
<Grid Name="gridStatusBar" Height="30" DockPanel.Dock="Bottom" Margin="0,0,0,0">
<StatusBar>
<StatusBarItem HorizontalAlignment="Left">
<Label
FontSize="13"
FontFamily="Comic Sans MS"
Foreground="Gainsboro"
Margin="0,-3,0,0"/>
</StatusBarItem>
</StatusBar>
</Grid>
<Grid Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="270" />
<RowDefinition Height="200" />
<RowDefinition Height="260" />
</Grid.RowDefinitions>
</Grid>
</DockPanel>
I have a DockPanel, which contains some controls including a ScrollViewer.
What I WANT to happen, is for the ScrollViewer to allow the grid to be scrolled, without pushing other controls off the bottom of the form.
Instead, the ScrollViewer expands to the height of the window, rather than the top of the Button, pushing the Button off for the bottom of the form. Why is this? How do I fix it?
<Window x:Class="Class1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Class1"
mc:Ignorable="d"
Title="MainWindow" Height="800" Width="600"
WindowStartupLocation="CenterScreen">
<DockPanel LastChildFill="False">
<Menu DockPanel.Dock="Top">
<MenuItem Header="File">
<MenuItem Name="miQuit" Header="Quit" Click="miQuit_Click" />
</MenuItem>
</Menu>
<ToolBarTray DockPanel.Dock="Top" IsLocked="True">
<ToolBar>
<Button Name="btnQuit" ToolBar.OverflowMode="Never" Click="btnQuit_Click">
Quit
</Button>
</ToolBar>
</ToolBarTray>
<ScrollViewer VerticalScrollBarVisibility="Auto" DockPanel.Dock="Top" VerticalAlignment="Stretch">
<Grid Name="gMainGrid" ScrollViewer.CanContentScroll="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox Grid.Column="0" Grid.Row="0" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="1" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="2" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="3" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="4" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="5" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="6" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="7" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="8" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="9" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="10" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="11" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="12" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="13" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="14" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="15" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="16" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="17" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="18" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="19" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="20" Width="100" Margin="10,10,10,10"/>
</Grid>
</ScrollViewer>
<Button Name="btnButton1" DockPanel.Dock="Bottom" Click="btnButton1_Click" >ButtonText</Button>
</DockPanel>
I want the menu bar at the top of the screen, the button at the bottom of the screen, and the grid with the ScrollViewer in the middle. What am I doing wrong?
The problem is that the ScrollViewer doesn't know how much height it should get. ScrollViewer is a control that tries to get as much size as its children need. DockPanel also gives as much size as the ScrollViewer need and therefore your problem. You can fix height of the ScrollViewer with pixels (i.e. Height=100) To make it a fixed height. I don't know your use case so this might be useful if you are showing an image carousel for example.
In more general layout advice I might say that you'd better use a grid instead of a DockPanel:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<!-- Next one is for middle part of the page -->
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<!-- your controls here -->
</Grid>
I found that I could have a dynamic height with the DockPanel if I stuck the whole thing in a Grid. This appears to work, as I can now have a dynamic height for the ScrollViewer.
<Window x:Class="Class1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Class1"
mc:Ignorable="d"
Title="MainWindow" Height="800" Width="600"
WindowStartupLocation="CenterScreen">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<DockPanel Grid.Column="0" Grid.Row="0" LastChildFill="False">
Everything is then as normal EXCEPT that I move my button outside of the DockPanel and into the Grid's second row:
</DockPanel>
<Button Grid.Column="0" Grid.Row="1" Name="btnButton1" DockPanel.Dock="Bottom" Click="btnButton1_Click" >ButtonText</Button>
</Grid>
The rows with a Height of "Auto" will size to fit their content. The rows with a Height of asterisk (*) will size to fill the remaining space after the size of the Autos has been calculated. Thus everything sizes up correctly and nicely.
Alternatively, at this point I can do-away with the DockPanel entirely and have the Menu, ToolBarTray, ScrollViewer, and Button in their own separate grid rows, like Emad suggests in their answer (although I'm not sure what the extra row is for in their example).
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
I ultimately decided to go for that approach, so I'll mark it as the answer, but I'm putting this all here for the full explanation, for completeness (in case people do happen to want to keep their DockPanel).
I have some understanding problems. I have a Grid in WPF with alternating fixed row heights and auto row heights.
If I add a Label to the rows with auto height in the first column, then this works as I expected.
But if I add a control in column 1 with a RowSpan, it was not the rows with the auto height that were resized, but the rows with the fixed height were resized.
Take a look at this example:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="1"
Grid.Column="0"
Content="Label1" />
<Label Grid.Row="3"
Grid.Column="0"
Content="Label2" />
<Label Grid.Row="5"
Grid.Column="0"
Content="Label3" />
<Label Grid.Row="7"
Grid.Column="0"
Content="Label4" />
<Border Grid.Row="1"
Grid.RowSpan="7"
Grid.Column="1"
Height="300"
Background="Red" />
<!--<Label Grid.Row="2"
Grid.Column="0"
Content="Hallo" />-->
</Grid>
And also not logical if I add a label to the fixed with I can not see this label because the size 5 is to small. Although the row is displayed much bigger.
I think that is quite interesting behaviour. If you'll look at GridLines sources you'll see constructor:
public GridLength(double pixels)
: this(pixels, GridUnitType.Pixel)
{
}
It means that by default Height in RowDefenition has second parameter as Pixel.
That is why WPF resizes your grid in your case.
There are several ways to fix it:
If you want to cut your control you should add MaxHeight property to Grid's RowDefenitions:
<RowDefinition Height="5" MaxHeight="5"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="5" MaxHeight="5"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="5" MaxHeight="5"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="5" MaxHeight="5"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="5" MaxHeight="5"/>
If don't want to cur your control you should add another Row with Height="*":
<RowDefinition Height="5" MaxHeight="5"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="5" MaxHeight="5"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="5" MaxHeight="5"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="5" MaxHeight="5"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" MaxHeight="5"/>
And add control to your row:
<Border Grid.Row="1"
Grid.RowSpan="8"
Grid.Column="1"
Height="300"
Background="Red" />
I am trying to dock the 2 buttons at the bottom of the window, so that they are always there when I resize the window. Obviously I am doing it wrong since it won't work. Here is my code. I have also seen from examples that some people uses the DockPanel.Dock on the controls and not the container itself. I can't do this for some reason. Using DockPanel.dock on the button gives an error.
My question is: How do I make the buttons (Or the stackPanel) dock at bottom?
<Window x:Class="MeditCal.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel LastChildFill="True">
<StackPanel DockPanel.Dock="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0">Date</Label>
<TextBox Grid.Row="1" Name="DateTxtBox" Background="WhiteSmoke"/>
<Label Grid.Row="2">Note</Label>
<TextBox Grid.Row="3" Name="noteTxtBox"
Background="WhiteSmoke"></TextBox>
</Grid>
<Popup Height="100" Width="100" Name="popUpWin" StaysOpen="false"
AllowsTransparency="True"
HorizontalAlignment="Center" PopupAnimation="Fade">
<Border BorderThickness="1" Background="AliceBlue">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Record added" />
</StackPanel>
</Border>
</Popup>
<ListView Name="msgArea" Background="WhiteSmoke" MinHeight="150"
Height="138" />
</StackPanel>
<DockPanel LastChildFill="True">
<StackPanel DockPanel.Dock="Bottom">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Name="addButton" Content="Add" Grid.Column="0"
Grid.Row="1" />
<Button Name="getRecordsButton" Content="Get records"
Grid.Column="1" />
</Grid>
</StackPanel>
</DockPanel>
</DockPanel>
It isn't very clear what kind of layout you're trying to achieve. I would suggest you to remove the inner DockPanel and it's StackPanel child, because each of them only contains single child which is an indication that you don't need a panel wrapper there.
Something like this will make the Grid containing buttons placed at bottom, and the StackPanel fill remaining space in the DockPanel :
<DockPanel LastChildFill="True">
<Grid DockPanel.Dock="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Name="addButton" Content="Add" Grid.Column="0" Grid.Row="1" />
<Button Name="getRecordsButton" Content="Get records" Grid.Column="1" />
</Grid>
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0">Date</Label>
<TextBox Grid.Row="1" Name="DateTxtBox" Background="WhiteSmoke"/>
<Label Grid.Row="2">Note</Label>
<TextBox Grid.Row="3" Name="noteTxtBox" Background="WhiteSmoke"></TextBox>
</Grid>
<Popup Height="100" Width="100" Name="popUpWin" StaysOpen="false" AllowsTransparency="True"
HorizontalAlignment="Center" PopupAnimation="Fade">
<Border BorderThickness="1" Background="AliceBlue">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Record added" />
</StackPanel>
</Border>
</Popup>
<ListView Name="msgArea" Background="WhiteSmoke" MinHeight="150" Height="138" />
</StackPanel>
</DockPanel>
I'm trying to use Grid.IsSharedSizeScope to line up databound controls displayed by an ItemsControl next to some contols in the first column of a Grid.
The problem is I can't prevent the controls continuously growing vertically.
How do I stop them from doing this without setting MaxHeight properties. I've tried different settings of VerticalAlignment and VerticalContentAlignment in various places but can't figure it out.
<Grid Grid.IsSharedSizeScope="True" >
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="RowOne" />
<RowDefinition SharedSizeGroup="RowTwo" />
<RowDefinition SharedSizeGroup="RowThree" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<SomeControl Grid.Row="0" Grid.Column="0" />
<SomeControl Grid.Row="1" Grid.Column="0" />
<ItemsControl Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" ItemsSource="{Binding Path=SomeSource}" ItemsPanel="{StaticResource MyHorizontalStackPanel}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="RowOne" />
<RowDefinition SharedSizeGroup="RowTwo" />
<RowDefinition SharedSizeGroup="RowThree" />
</Grid.RowDefinitions>
<SomeControl Grid.Row="0" />
<SomeControl Grid.Row="1" />
<SomeControl Grid.Row="2" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Trying to use Grid.IsSharedSizeScope on nested Grids bad, putting the Grid and ItemsControl side by side inside another Grid with two columns, good.
Here is my own solution to my own stupidity:
<!-- outer grid (could be a stack panel) -->
<Grid Grid.IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- header -->
<Grid Grid.Column="0" Margin="0,10,10,0">
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="RowOne" />
<RowDefinition SharedSizeGroup="RowTwo" />
<RowDefinition SharedSizeGroup="RowThree" />
</Grid.RowDefinitions>
<SomeControl Grid.Row="0" Grid.Column="0" />
<SomeControl Grid.Row="1" Grid.Column="0" />
</Grid>
<!-- rows -->
<ItemsControl Grid.Column="1" ItemsSource="{Binding Path=SomeSource}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="RowOne" Height="Auto" />
<RowDefinition SharedSizeGroup="RowTwo" Height="Auto" />
<RowDefinition SharedSizeGroup="RowThree" Height="Auto" />
</Grid.RowDefinitions>
<!-- define your row here -->
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>