How to avoid WPF window reduces its dimension - wpf

I read a few post but I can't fix this problem.
I have a Grid defined as follow:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
...
Where in the first row I want a Border with a TextBlock inside. I need that the Border has always the same size without be influenced from the TextBlock.
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="{DynamicResource StandardBorderColor}" BorderThickness="2" Margin="15,10,15,10"
HorizontalAlignment="Stretch"/>
<TextBlock Grid.Row="0" Name="TextBlock" Margin="20, 15, 20, 20"
TextWrapping="Wrap" Foreground="{DynamicResource StandardForegroundColor}" FontSize="18" FontWeight="Bold"
VerticalAlignment="Center" TextAlignment="Left" Text="{Binding Testo}" HorizontalAlignment="Stretch"/>
</Grid>
Do you have any suggestions? Thanks in advance!
Update:
Solution:
I found this as solution:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GroupBox HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"
Margin="15, 10, 15, 10" Header="Avvisi">
<TextBox x:Name="TextBlock" FontSize="16"
VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
TextAlignment="Left" Text="{Binding Testo}" Style="{DynamicResource TxtBoxStyle}" ScrollViewer.VerticalScrollBarVisibility="Visible"
BorderBrush="Transparent" IsReadOnly="True" />
</GroupBox>
...

Related

Button is not showing up in WPF Grid

I have a Grid inside of a Grid but when i try to display a button with text, it doesn't show up.
My WPF has a Grid nested inside of a parent Grid.
<Grid Margin="124,0,0,225">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Test" FontSize="14" HorizontalAlignment="Center"/>
<TextBox Width="400" Grid.Column="0" Grid.Row="1" FontSize="14" HorizontalAlignment="Center" KeyDown="HandleEnterKey"/>
<TextBlock Grid.Column="0" Grid.Row="2" Text="Enter Amount" FontSize="14" HorizontalAlignment="Center"/>
<TextBox Width="250" Grid.Column="0" Grid.Row="3" FontSize="14" HorizontalAlignment="Center" KeyDown="HandleEnterKey"/>
<TextBlock Grid.Column="0" Grid.Row="5" FontSize="14" HorizontalAlignment="Center"/>
<Grid
x:Name="chilGrid"
Width="auto"
Height="auto"
Background="Black"
Grid.Column="0"
Grid.Row="7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Button Margin="10, 10, 5, 5" Grid.Column="0" Content="test" Grid.Row="0" Background="Pink"
BorderBrush="Black" BorderThickness="10">
</Button>
</Grid>
</Grid>
Edit# 1:
Modified the button section to this:
<Button Grid.Column="0" Content="test" Grid.Row="0" Background="Pink"
BorderBrush="Black" BorderThickness="1">
</Button>
Still did not work?
`The 'Test' button is not showing up inside the nested Grid?
Your button resides in below grid and it has several values that affect the visibility, like border thickness, margin etc. You can use stackpanel or even simply your existing grid. You don't need column for main grid (for example).
Try below code.
<Grid Margin="124,0,0,225">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Test" FontSize="14" HorizontalAlignment="Center"/>
<TextBox Width="400" Grid.Row="1" FontSize="14" HorizontalAlignment="Center" KeyDown="HandleEnterKey"/>
<TextBlock Grid.Row="2" Text="Enter Amount" FontSize="14" HorizontalAlignment="Center"/>
<TextBox Width="250" Grid.Row="3" FontSize="14" HorizontalAlignment="Center" KeyDown="HandleEnterKey"/>
<TextBlock Grid.Row="5" FontSize="14" HorizontalAlignment="Center"/>
<Grid
x:Name="chilGrid"
Width="auto"
Height="auto"
Background="Black"
Grid.Column="0"
Grid.Row="7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="test" Background="Pink"
BorderBrush="Black" BorderThickness="1">
</Button>
</Grid>
</Grid>
and you get something like below.
It's there, but the combination of your margins, and border thickness means it blends in with the black background of the grid.
Make your border thickness 1, and remove the margin and you will see the button.

WPF - GridSplitter not working between two grids

I have some issues with getting the grid splitter to work properly.
I have placed the GridSplitter between two grids but the problem is that the grid splitter attaches to left grid which is the only one I can move with the splitter. If I move the left grid towards the right grid, the right grid will get smaller but if I move it away from the right grid it will not expand more than its initial size.
How can I place the GridSplitter in such a way that it allows me to adjust the width of the right grid and then reducing the width of the left grid if it is dragged that way.
I did add a SharedSizeGroup to one of the child grids of the right grid but I'm not sure if that is relevant to my problem, removing it didn't solve anything.
I have also tried to play around with the ResizeBehavor of the GridSplitter also without luck.
I hope it makes sense.
XAML:
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="3"></TextBlock>
<Label Grid.Row="0" Grid.Column="0" VerticalContentAlignment="Center" Margin="5"/>
<ComboBox Grid.Row="0" Grid.Column="1" MinWidth="200px"/>
<Label Grid.Column="2" VerticalContentAlignment="Center" Margin="10 5 5 5"/>
<ComboBox Grid.Row="0" Grid.Column="3" IsEditable="True" MinWidth="250px"/>
</Grid>
<!--Below grid only shown when errors are present. Not relevant for problem -->
<Grid Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="2" Grid.Column="0">
<TextBlock/>
</Grid>
<!-- The "Left" Grid -->
<Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="0">
<WebBrowser></WebBrowser>
</Grid>
<GridSplitter HorizontalAlignment="Stretch" ResizeDirection="Columns" Width="10" Grid.Row="1" Grid.Column="1" ResizeBehavior="PreviousAndNext"/>
<!-- The "Right" Grid -->
<Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Panel.ZIndex="2" MinWidth="200" HorizontalAlignment="Right">
<Border BorderBrush="Blue" BorderThickness="1" MinWidth="200" Background="#4C808080" >
<GroupBox MinWidth="200">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Margin="5"/>
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True" />
<Label Grid.Column="0" Grid.Row="1" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="1" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True"/>
<ItemsControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5" VerticalAlignment="Center" IsReadOnly="True"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</Border>
</Grid>
</Grid>
</Grid>
Have a look at this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="3"></TextBlock>
<Label Grid.Row="0"
Grid.Column="0"
VerticalContentAlignment="Center"
Margin="5" />
<ComboBox Grid.Row="0"
Grid.Column="1"
MinWidth="200px" />
<Label Grid.Column="2"
VerticalContentAlignment="Center"
Margin="10 5 5 5" />
<ComboBox Grid.Row="0"
Grid.Column="3"
IsEditable="True"
MinWidth="250px" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- The "Left" Grid -->
<Grid Grid.Column="0"
Background="Aqua">
</Grid>
<GridSplitter HorizontalAlignment="Stretch"
ResizeDirection="Columns"
Width="10"
Grid.Column="1"
ResizeBehavior="PreviousAndNext" />
<!-- The "Right" Grid -->
<Grid Grid.Column="2"
Panel.ZIndex="2"
MinWidth="200"
Background="Yellow">
<Border BorderBrush="Blue"
BorderThickness="1"
MinWidth="200"
Background="#4C808080">
<GroupBox MinWidth="200">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="5" />
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5,7"
VerticalAlignment="Center"
IsReadOnly="True" />
<Label Grid.Column="0"
Grid.Row="1"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="1"
Margin="5,7"
VerticalAlignment="Center"
IsReadOnly="True" />
<ItemsControl Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center"
IsReadOnly="True" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</Border>
</Grid>
</Grid>
<!--Below grid only shown when errors are present. Not relevant for problem -->
<Grid Grid.Row="2">
<TextBlock />
</Grid>
</Grid>
I changed the Grid "logic" a bit. As I understand you correct you want the GridSplitter for the middle part. Thats why I put the top and bottom part in extra rows to keep them away from the GridSplitter. I had to remove the HorizontalAlignment="Right" from your right Grid, too. Otherwise it would have not changed it's size.
Just to be sure the GridSplitter is working I removed the WebBrowser and added Background colors to the left and right Grid. You can replace that. Thought maybe it would be helpfull for you to see if it's working like expected.
/edit added width relation
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- The "Left" Grid -->
This means when you start the application the first column will take twice the size then the third.
This should be a decent showcase, it's exactly the same for columns, just sideways.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="300"/> //sets the height of the first row
<RowDefinition Height="*"/> //* sets the remainder of the height, doesn't work like auto!
</Grid.RowDefinitions>
<Grid Grid.Row="0"
HorizontalAlignment="Left"
Width="400"
Background="Green" />
<Grid Grid.Row="0"
Margin="400,0,0,0"
Background="Red"/>
<Grid Grid.Row="1"
Background="Blue"/>
<GridSplitter Grid.Row="0"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Height="2.5"
Background="Black" />
</Grid>

How to make contents having equal space (width & hight) to resize upon changing of window size in XAML?

I have the following code of XAML in WPF. This generates the grid with equal size of columns & rows (as shown in figure 1.)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="A" Background="Green"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="AB" Background="Red"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="ABC" Background="Blue"/>
<TextBlock Grid.Row="3" Grid.Column="3" Text="ABCD" Background="Yellow"/>
</Grid>
Figure 1.
But when I put this grid in a viewbox (like the code below), the rows & column remains no more equally in size (as shown in figure 2.).
<Viewbox Stretch="Uniform">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="A" Background="Green"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="AB" Background="Red"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="ABC" Background="Blue"/>
<TextBlock Grid.Row="3" Grid.Column="3" Text="ABCD" Background="Yellow"/>
</Grid>
</Viewbox>
Figure 2.
How can I make this grid with equal size of rows & column inside a viewbox?
You can enforce size-sharing like this:
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition SharedSizeGroup="A"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="B"/>
</Grid.ColumnDefinitions>
That's the behavior of ViewBox
Taken from internet
The ViewBox is a very useful control in WPF. If does nothing more than
scale to fit the content to the available size. It does not resize the
content, but it transforms it.
why use viewbox when you don't want this, try another control.
Instead of using a Grid try using a UniformGrid:
<Viewbox Stretch="Uniform">
<UniformGrid Rows="4" Columns="4">
<TextBlock Grid.Row="0" Grid.Column="0" Text="A" Background="Green"/>
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock Grid.Row="1" Grid.Column="1" Text="AB" Background="Red"/>
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock Grid.Row="2" Grid.Column="2" Text="ABC" Background="Blue"/>
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock Grid.Row="3" Grid.Column="3" Text="ABCD" Background="Yellow"/>
</UniformGrid>
</Viewbox>
Just make sure you set Rows And Columns, and instead of saying which row/column each child element is, you just enter them in order.

WPF-GridSplitter does not move

I have a Grid with 2 rows and in the first row 2 columns each with 2 rows.
The GridSplitter is inside the 2nd column. I do not know why the it does not move. I am thankfull for any help. ( I'm new here :-) )
With regards
Below XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="yyy:" Margin="10" MinWidth="50"/>
</StackPanel>
</StackPanel>
<TreeView Grid.Row="1" x:Name="TreeView0"></TreeView>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="10" Text="xxx:" HorizontalAlignment="Left" MinWidth="140"/>
</StackPanel>
</StackPanel>
<TreeView Grid.Row="1" x:Name="TreeView1"></TreeView>
<GridSplitter Grid.Row="1" Width="2" Background="Gray" HorizontalAlignment="Left" VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext"/>
</Grid>
</Grid>
<Grid Grid.Row="1">
<ListView Margin="10">
<ListView.View>
<GridView></GridView>
</ListView.View>
</ListView>
</Grid>
</Grid>
After rearranging some rows and cloumns, I could solve my problem.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="x:" Margin="10" HorizontalAlignment="Left" MinWidth="50"/>
</StackPanel>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="10" Text="y:" HorizontalAlignment="Left" MinWidth="140"/>
</StackPanel>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<TreeView x:Name="TreeView0"></TreeView>
</Grid>
<GridSplitter Grid.Column="1" Width="2" Background="Red" HorizontalAlignment="Center"/>
<Grid Grid.Column="2">
<TreeView x:Name="TreeView1"></TreeView>
</Grid>
</Grid>
<Grid Grid.Row="2">
<ListView Margin="10">
<ListView.View>
<GridView></GridView>
</ListView.View>
</ListView>
</Grid>
</Grid>
#Frisbee I am not ashamed to refer at MSDN or somewhere else. I came here in search of help. I did not ask you to fix my problem. Your approach of helping someone is realy disgusting and boaring. Instead of responding with rubbish words you could have concentrated on the issue.
You have the splitter in a row height *
Wrong
The splitter needs to be in an auto with height * above and below

Grid creating extra spacing that I don't want

I created a somewhat large input form in a WPF application, using nested Grids. I'm using VS2010 and VS2012 Ultimate.
Here is the code:
<Window x:Class="Gridtest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16*"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="136*"/>
<ColumnDefinition Width="271*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Battery Name"/>
<Label Grid.Row="1" Grid.Column="0" Content="FDC Callsign"/>
<Label Grid.Row="2" Grid.Column="0" Content="Battery Type"/>
<Label Grid.Row="3" Grid.Column="0" Content="GRID"/>
<Label Grid.Row="4" Grid.Column="0" Content="ALT"/>
<Label Grid.Row="5" Grid.Column="0" Content="Dir. of Fire"/>
<Label Grid.Row="6" Grid.Column="0" Content="Target Prefix"/>
<Label Grid.Row="7" Grid.Column="0" Content="Target # Start"/>
<Grid Grid.Column="1" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ComboBox x:Name="EBattName" IsEditable="True" ItemsSource="{Binding BatteryList}" SelectedItem="{Binding SelectedBattery, Mode=TwoWay}" DisplayMemberPath="Name"/>
<Button x:Name="EBattSave" Grid.Column="1" Content="Add"/>
</Grid>
<TextBox x:Name="EBattCallsign" Grid.Row="1" Grid.Column="1" DataContext="{Binding SelectedBattery}" Text="{Binding Callsign}" Grid.ColumnSpan="2"/>
<ComboBox x:Name="EBattType" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" DataContext="{Binding SelectedBattery}" SelectedItem="{Binding BWeapon}" DisplayMemberPath="Designation"/>
<TextBox x:Name="EBattGrid" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" DataContext="{Binding SelectedBattery}" Text="{Binding Coords.Grid}"/>
<TextBox x:Name="EBattAlt" Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2" DataContext="{Binding SelectedBattery}" Text="{Binding Coords.Altitude}"/>
<TextBox x:Name="EBattDir" Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2" DataContext="{Binding SelectedBattery}" Text="{Binding Dir}"/>
<TextBox x:Name="EBattPre" Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2" DataContext="{Binding SelectedBattery}" Text="{Binding Prefix}"/>
<TextBox x:Name="EBattStart" Grid.Row="7" Grid.Column="1" Grid.ColumnSpan="2" DataContext="{Binding SelectedBattery}" Text="{Binding Start}"/>
</Grid>
<Grid Grid.Column="0" Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.ColumnSpan="3" Content="NEW MISSION"/>
<Button x:Name="BMissionGrid" Grid.Row="1" Content="GRID"/>
<Button x:Name="BMissionPolar" Grid.Column="1" Grid.Row="1" Content="POLAR"/>
<Button x:Name="BMissionShift" Grid.Column="2" Grid.Row="1" Content="SHIFT"/>
</Grid>
<!-- Adding negative bottom margin to this grid helps... -->
<Grid Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.ColumnSpan="2" Content="OBSERVER INFORMATION"/>
<Label Grid.Row="1" Grid.Column="0" Content="Select"/>
<Label Grid.Row="2" Grid.Column="0" Content="Name"/>
<Label Grid.Row="3" Grid.Column="0" Content="Grid"/>
<Label Grid.Row="4" Grid.Column="0" Content="Alt"/>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="0" x:Name="EObsSelect" ItemsSource="{Binding SelectedBattery.Observers}" SelectedItem="{Binding SelectedObserver, Mode=TwoWay}" DisplayMemberPath="Name" />
<Button Grid.Column="1" x:Name="BObserverAdd" Content="New"/>
</Grid>
<TextBox x:Name="EObsName" Grid.Row="2" Grid.Column="1" Text="{Binding SelectedObserver.Name}" />
<TextBox x:Name="EObsGrid" Grid.Row="3" Grid.Column="1" Text="{Binding SelectedObserver.Coord.Grid}" />
<TextBox x:Name="EObsAlt" Grid.Row="4" Grid.Column="1" Text="{Binding SelectedObserver.Coord.Altitude}"/>
<Label Grid.ColumnSpan="2" Grid.Row="5" Content="KNOWN POINTS"/>
<Label Grid.Row="6" Grid.Column="0" Content="Select"/>
<Label Grid.Row="7" Grid.Column="0" Content="Name"/>
<Label Grid.Row="8" Grid.Column="0" Content="Grid"/>
<Label Grid.Row="9" Grid.Column="0" Content="Alt"/>
<Grid Grid.Row="6" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ComboBox x:Name="EKPSelect" Grid.Column="0" ItemsSource="{Binding SelectedBattery.Knownpoints}" SelectedItem="{Binding SelectedPoint, Mode=TwoWay}" DisplayMemberPath="Name"/>
<Button Grid.Column="1" x:Name="BKnownpointAdd" Content="New"/>
</Grid>
<TextBox x:Name="EKPName" Grid.Row="7" Grid.Column="1" Text="{Binding SelectedItem.Name, ElementName=EKPSelect}" />
<TextBox x:Name="EKPGrid" Grid.Row="8" Grid.Column="1" Text="{Binding SelectedItem.Coord.Grid, ElementName=EKPSelect}" />
<TextBox x:Name="EKPAlt" Grid.Row="9" Grid.Column="1" Text="{Binding SelectedItem.Coord.Altitude, ElementName=EKPSelect}"/>
</Grid>
<Grid Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Content="MISSION LIST"/>
<ListView Grid.Row="1" SelectionMode="Single"
DataContext="{Binding SelectedBattery}"
ItemsSource="{Binding Missions}"
>
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding TargetNumber}" Header="Target No"/>
<GridViewColumn DisplayMemberBinding="{Binding TargetDescription}" Header="Description"/>
<GridViewColumn DisplayMemberBinding="{Binding Coords.Grid}" Header="Location"/>
<GridViewColumn DisplayMemberBinding="{Binding Coords.Altitude}" Header="Altitude"/>
<GridViewColumn DisplayMemberBinding="{Binding Attitude}" Header="Attitude"/>
<GridViewColumn DisplayMemberBinding="{Binding Length}" Header="Length"/>
<GridViewColumn DisplayMemberBinding="{Binding Radius}" Header="Radius"/>
<GridViewColumn DisplayMemberBinding="{Binding Notes}" Header="Remarks"/>
</GridView>
</ListView.View>
</ListView>
</Grid>
</Grid>
I extracted it from my project and removed all the event handlers and bindings pointing into my project namespace so you can take this and paste it into a new WPF Application project and see for yourself.
Here is the resulting window:
Design view: (extra spacing marked in red there)
Runtime view:
ASCII View of what it should look like:
---------------
| 1 | |
--------| 3 |
| 2 | |
---------------
| 4 |
---------------
It creates humongous amounts of vertical spacing that I don't want.
Where is this coming from? How can I fix it? As I marked in the code above, adding Margin="0,0,0,-200" to one of the grids helps somewhat, but that seems very ugly.
I'm probably going to rebuild the grid from the ground up to make it less nested, but still, it seems to me like this shouldn't be happening.
EDIT: I rebuilt the grid with minimal nesting, so it's just one big grid with all the elements put into it:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/><!-- Left Labels -->
<ColumnDefinition Width="10*"/><!-- Left Edit controls -->
<ColumnDefinition Width="Auto"/><!-- Right labels -->
<ColumnDefinition Width="7*"/><!-- Right Edit controls -->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" /> <!-- Everything in its own row -->
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" /> <!-- Listview in this row -->
</Grid.RowDefinitions>
<!-- Elements here -->
</Grid>
And that works without any apparent issues.
I was testing with your code and noticed some strange behavior. Your panels should render like this:
---------------
| 1 | |
--------| 3 |
| 2 | |
---------------
| 4 |
---------------
But they're currently rendering like this, with extra space being added to the bottom of both the 2 and 3 cells.
---------------
| 1 | |
--------| 3 |
| 2 | |
| | |
---------------
| 4 |
---------------
For some reason, elements added in cell #3 are extending the cell height by adding extra space at the bottom.
Strangely enough, I found this only occurs when your RowSpan for cell #3 is set to an odd number. If you set that to 2 or 4, it appears to render just fine.
<Grid>
<Grid x:Name="1" Grid.Column="0" Grid.Row="0" ... />
<Grid x:Name="2" Grid.Column="0" Grid.Row="1" ... />
<Grid x:Name="3" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" ... />
<Grid x:Name="4" Grid.Column="0" Grid.Row="3" Grod.ColumnSpan="2" ... />
</Grid>
<Grid>
<Grid x:Name="1" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" ... />
<Grid x:Name="2" Grid.Column="0" Grid.Row="3" ... />
<Grid x:Name="3" Grid.Column="1" Grid.Row="0" Grid.RowSpan="4" ... />
<Grid x:Name="4" Grid.Column="0" Grid.Row="4" Grod.ColumnSpan="2" ... />
</Grid>
Removing most of the elements in cell #3 correctly draws the cells to the correct height, and reducing the number of elements in #3 will shrink the height, but not eliminate it, so perhaps it has something to do with calculating the margin or padding?
So my suggestion would be to make the RowSpan=2 like the first example, or change your panel layout so it's like this:
<StackPanel>
<DockPanel>
<Grid x:Name="3" DockPanel.Dock="Right" ... />
<Grid x:Name="2" DockPanel.Dock="Top" ... />
<Grid x:Name="1" ... />
</DockPanel>
<Grid x:Name="4" ... />
</StackPanel>
A Grid is designed to make its children fill all available space if possible.
You are setting Height="Auto" on all your rows, which means rows will by default take up only the amount of space they need to render their controls. However because of the way a Grid works, it's going to try and stretch at least one of those rows to fill all available space.
Typically this stretch is done equally, with all the rows getting assigned an equal amount of the extra space, as you can see in your Design Time window. But since your 2nd column has only two objects, one with RowSpan=3, it looks like at runtime it decided to split the extra space equally between the combined 1-2-3 row, and row 4.
To avoid this behavior, make sure to specify at least one * height row to take up all remaining space, even if that is a blank row at the bottom.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16*"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/> <!-- 5th row to take up all available space -->
</Grid.RowDefinitions>
Or switch to a different Panel that doesn't have this behavior, such as a DockPanel with LastChildFill="False", or StackPanel

Resources