I have this 2 grids:
<Grid Margin="2.0cm, 2.0cm, 1.5cm, 0.5cm" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<DockPanel VerticalAlignment="Stretch" Grid.Row="1" Background="Red">
<Grid Height="100" DockPanel.Dock="Top" Background="Blue"/>
<Grid Height="100" DockPanel.Dock="Bottom" Background="Yellow"/>
</DockPanel>
</Grid>
The result is this:
I would like the blue grid fill all the space until the yellow grid and the yellow grid should to fill all the space until the bottom. So I didn't want to see red color.
Also, I would like that if the yellow grid is collapsed, the blue grid should to fill all the space.
I have to set vertical alignement to stretch, but I don't get the desire behaviour, in this case I wouldn't see the grids.
How could I get the behaviour that I want?
Thanks so much.
SOLUTION
I can solve the problem with this code:
<Grid Margin="2.0cm, 2.0cm, 1.5cm, 0.5cm" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="AUTO"/>
</Grid.RowDefinitions>
<Grid DockPanel.Dock="Top" Background="Yellow" Visibility="Visible" VerticalAlignment="Stretch" Grid.Row="0"/>
<Grid DockPanel.Dock="Bottom" Background="Blue" Visibility="Visible" Height="100" VerticalAlignment="Bottom" Grid.Row="1"/>
</Grid>
I think you should use UniformGrid if you want your grids to equally share the space. If the yellow grid is collapsed the blue grid will fill the entire space.
<Grid Margin="2.0cm, 2.0cm, 1.5cm, 0.5cm" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<UniformGrid Background="Red" Columns="1">
<Grid Background="Blue"/>
<Grid Background="Yellow"/>
</UniformGrid>
</Grid>
Related
I only have the following so far
<Grid>
<DockPanel Background="Red">
<DataGrid DockPanel.Dock="Bottom" Height="357"/>
<StackPanel Background="Gray" DockPanel.Dock="Top" />
</DockPanel>
</Grid>
I want this layout to be retained when the program is enlarged;
and not like it is now when I make it big:
How can i make this?
Is it that, what you have wanted? By default the DockPanel.LastChildFill property is set to true. So if you enlarge the window, StackPanel in your case was enlarged.
<Grid>
<DockPanel Background="Red">
<StackPanel Background="Gray" MinHeight="75" DockPanel.Dock="Top" />
<DataGrid DockPanel.Dock="Bottom"/>
</DockPanel>
</Grid>
Take a look at grids, you can specify the height of the first row to 357 if you wish but Auto will just adjust to the contents on that row for you. * means fill the remaining space of the grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"/>
<DataGrid Grid.Row="1"/>
</Grid>
There are a number of similar questions on SO but so far I have not been able to resolve my problem using them.
I have a bunch of Controls inside a WrapPanel and the WrapPanel is inside a ScrollViewer. The ScrollViewer is inside a Grid.
I am trying to get all the <Border> controls in the WrapPanel to have an Orientation of 'Vertical' (so that they flow down and when there is no more space left vertically they wrap horizontally) with a HorizontalScrollBar that appears when there is no more space left Horizontally.
My code so far is as follows:
<Grid x:Name="configGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Width="{Binding ElementName=configGrid, Path=ActualWidth}" Height="{Binding ElementName=configGrid, Path=ActualHeight}">
<WrapPanel HorizontalAlignment="Left" Orientation="Vertical" x:Name="ConfigWrapPanel" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}">
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="General">
// some controls here
</Expander>
</Border>
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="Another Block">
// some controls here
</Expander>
</Border>
// many more <border> blocks here....
</WrapPanel>
</ScrollViewer>
</Grid>
This almost works as expected, the various content flows vertically and when there is not enough room at the bottom it moves up and right and starts at the top again. But I never get any horizontal scrollbars and the controls just disappear off the right of the screen.
I'm sure this is something really simple I'm missing but I can't quite figure it out.
As a bit of further info, the various Border controls and sub elements are all of dynamic width and height (which is why I opted for a vertical orientation WrapPanel rather than Horizontal)
Any help would be greatly appreciated.
You have to remove the Width from your WrapPanel.
That width wants to stretch to infinity, which prevents the ScrollViewer from corrent measuring the boundaries of the WrapPanel resulting in never showing the ScrollBar.
Code below shows a working example:
<Grid x:Name="configGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Height="{Binding ElementName=configGrid, Path=ActualHeight}">
<WrapPanel HorizontalAlignment="Left" Orientation="Vertical" x:Name="ConfigWrapPanel" >
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="General">
// some controls here
</Expander>
</Border>
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="Another Block">
// some controls here
</Expander>
</Border>
</WrapPanel>
</ScrollViewer>
</Grid>
The following simple XAML puts a border on the base of a grid inside a scroll viewer and links the grid's width to the value of a slider.
<Window x:Class="BorderWidth.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DrawBorder">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid Height="100" VerticalAlignment="Top" HorizontalAlignment="Left" Width="{Binding Value, ElementName=slider}">
<Border BorderBrush="Gray" BorderThickness="0,0,0,1"/>
</Grid>
</ScrollViewer>
<TextBox Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Value, ElementName=slider}"/>
<Slider x:Name="slider" Minimum="124000" Maximum="126000" Grid.Row="2" VerticalAlignment="Center" Margin="10"/>
</Grid>
</Window>
While the width is less than 125000 the border shows, but after that value it vanishes. There is no maximum width mentioned in the documentation for the border control and the maximum width for a control in general is documented to lie somewhere between Single.MaxValue and Double.MaxValue, i.e. far far larger than 125000. Is this 125000 upper bound a bug; or is it documented somewhere?
First off I'm new to XAML so forgive me if I've done something stupid.
I have stripped down my page to the following example XAML (viewable in XamlPad):
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
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"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" MinWidth="150" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<!--<RowDefinition Height="Auto" />-->
<RowDefinition MaxHeight="25" Height="25" MinHeight="25" />
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="4" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
<GridSplitter Grid.Row="0" Grid.RowSpan="4" Width="4" />
<Frame >
</Frame>
<GridSplitter Grid.Row="0" Height="4" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<Grid Grid.Column="2" Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Column="2" Grid.Row="3">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ScrollViewer>
</Grid>
</Page>
What I want to happen is for the Horizontal Grid Splitter to resize the top panel, moving the bottom Grid (which I want to keep at 25 height) and Scrollviewer controls down.
I've tried putting the Horizontal grid splitter into it's own Row and this moves the content down but it shrinks the content of the top grid which is not what I'm looking for.
Any suggestions as to waht I'm doing wrong? Is it something to do with the proportional height?
Firstly you have defined the splitter as if they apply to multiple rows and columns, but they actually have to have a row or column of their own and they apply to the adjacent rows/columns, so you were on the right track before.
The problem is the proportional (star) rows. For a splitter to work at least one of the adjacent rows/columns has to be fixed (pixel) sized or it does not adjust with the mouse but by some weird proportional movement instead.
I did not understand your "but it shrinks the content of the top grid which is not what I'm looking for" comment, so it might need some more explaining and I have made some guesses, but the XAML file shown below has the splitter behaving themselves:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="191.5" />
<ColumnDefinition Width="8.5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="194" />
<RowDefinition Height="0.148*"/>
<RowDefinition MaxHeight="25" Height="25" MinHeight="25" />
<RowDefinition Height="0.852*"/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="4" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2" Margin="0,0,-0.5,0" />
<sdk:GridSplitter Grid.Row="0" Grid.RowSpan="4" Grid.Column="1" HorizontalAlignment="Stretch" Margin="0.5,0,-0.5,0" />
<Frame >
</Frame>
<sdk:GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" Grid.ColumnSpan="3" />
<Grid Grid.Column="2" Grid.Row="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0.5,0,-1,0"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Column="2" Grid.Row="3" Margin="0.5,0,-1,0">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ScrollViewer>
</Grid>
If I understand your problem correctly.
You should be able to take out the VerticalAlignment="Stretch" and HorizontalAlignment="Stretch" from your inner grid and get what you want.
The gridsplitter doesn't like other content in a different row (or col) that has both Allignments set to stretch.
I have the following in my XAML:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="7"/>
<RowDefinition Height="57"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="18">Title Text</TextBlock>
<Rectangle Grid.Row="1" Margin="0,2" Height="3" HorizontalAlignment="Stretch" Fill="#ff000000"/>
<Border Grid.Row="2" Margin="0" Padding="0" BorderBrush="Black" BorderThickness="1">
<TextBlock Margin="0" Padding="0" FontSize="55">123</TextBlock>
</Border>
</Grid>
The problem is that there is a space (about 10px) above the text in the bottom TextBlock. I can only seem to get rid of this space by using a much smaller font size.
Does anyone have an idea of why this space is showing up, and what I can do about it?
Thank you.
I believe it is because the default VerticalAlignment on a TextBlock is Stretch. Try setting it to Center:
<TextBlock Margin="0" Padding="0" FontSize="55" VerticalAlignment="Center">123</TextBlock>
If you really need to nudge it up you could add a negative top margin.