Grid layout and expanding controls (TextBox) - wpf

I seem to not understand the layout behavior in my application. In the following sketch I have a TextBox that expands as text is being entered. How can I prevent that from happening and have the Height stay constant and get a Scrollbar instead? The size of the right TextBox should the size the left three TextBoxes take.
Initial state:
After adding several values:
Here's the XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="LightBlue">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Text="One" Margin="5" />
<TextBox Grid.Row="1" Grid.Column="0" Text="Two" Margin="5" />
<TextBox Grid.Row="2" Grid.Column="0" Text="Three" Margin="5" />
<TextBox
Grid.RowSpan="3" Grid.Column="1" Margin="5"
AcceptsReturn="True"
Text="Hello World!"
VerticalScrollBarVisibility="Auto"
/>
</Grid>
<Rectangle Grid.Row="1" Fill="Blue" />
</Grid>

Simple Answer
Assuming that the font size and margins of the TextBoxes are going to remain constant, and that the TextBoxes on the left are single-line only, you can just set a fixed height for the top RowDefinition:
<Grid.RowDefinitions>
<RowDefinition Height="84" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
Complicated Answer
If the left TextBoxes are multiline, or if the font size or margins can change, then you'll have to get a bit more complicated. I don't think there's an existing Panel that can handle that, you'd have to manually set the Height of the right TextBox to match the sum of the ActualHeight + Margin.Top + Margin.Bottom for all of the left TextBoxes. This would need to be done whenever SizeChanged was raised on any of the left TextBoxes.

Related

WPP vertical scrollViewer is not apprearing

I have a wpf user control which has Grid with row definitions as Auto. and controls defined in that in grid. Outside of this this i have scroll viewer VerticalScrollBarVisibility as set to Auto.
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name" />
<telerik:RadRichTextBox Name="Name" Grid.Row="0" Margin="2"
Padding="0" HorizontalAlignment="Left" AcceptsReturn="True"
Height="500" Width="750" DocumentInheritsDefaultStyleSettings="True" FontFamily="Calibri" FontSize="13">
<telerik:RadRichTextBox.Document>
<telerik:RadDocument LineSpacingType="AtLeast" LineSpacing="0"
ParagraphDefaultSpacingAfter="0" ParagraphDefaultSpacingBefore="0">
</telerik:RadDocument>
</telerik:RadRichTextBox.Document>
</telerik:RadRichTextBox>
</Grid>
</ScrollViewer>
I am loading the above control as content of Rad tab item from another view.
I could not able to view vertical scroll bar when i resize the window.
You can do this
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
......
<telerik:RadRichTextBox Grid.Row="1" ......
/>

WPF ScrollViewer pushing control out of window

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).

WPF why are all row heights expanding when last row is *

I have a form with several columns and rows defined as follows:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="280" />
<ColumnDefinition Width="120" />
<ColumnDefinition Width="280" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="35" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
Then I have a StackPanel which spans columns and rows:
<StackPanel Name="foo" Margin="0,0,0,0" Grid.Column="2" Grid.ColumnSpan="3" Grid.Row="2" Grid.RowSpan="7"></StackPanel>
When StackPanel "foo" contains items which cause the total height to be more than all the rows combined, I want only the last row height to expand. Instead, all the row heights are expanding equally, creating a lot of space between the controls.
Before "foo" is filled with data:
After "foo" is filled with data:
How can I code this so that only that last row with height="*" expands, and the other row heights stay the same?
This is more of a workaround than a solution, but what I ended up doing was to remove the ScrollViewer which wrapped around my grid, and wrapped the StackPanel with a ScrollViewer instead. This prevented the StackPanel from expanding the grid.

WPF: Inner content wont scroll

I have a Window with a Grid inside:
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="70" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<ContentControl Grid.Row="0" Content="{Binding ChildViewModel.View}" />
<DockPanel Grid.Row="1" Visibility="{Binding SearchResultViewVisibility}">
<GridSplitter DockPanel.Dock="Top" Background="LightGray" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top" IsTabStop="False"/>
<Views:SearchResultView DataContext="{Binding SearchResultViewModel}" />
</DockPanel>
<UserControls:GradientBackgroundControl Grid.Row="2" Height="25">
<Validators:FocusSummaryControl x:Name="FocusSummary" ValidateOnlyFocusedElement="False" />
</UserControls:GradientBackgroundControl>
</Grid>
The ContentControl gets a UserControl with this Grid set:
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.ColumnSpan="4">
<StackPanel>
...
</StackPanel>
</ScrollViewer>
The problem now is, that the ScrollViewer in the UserControl doesn't scroll. The content of the UserControl set to the ContentControl is heigher and the overflow ist just hidden.
If I am not wrong, StackPanel requires a Height to be set for scroll functionality to work because StackPanel, by design, grows in one direction (based on Orientation).
To confirm whether this is the cause of your problem, please test by setting the height of StackPanel to a fixed height. Alternately, you may want to replace the StackPanel with say DockPanel and see the behaviour. Also there is a ScrollViewer.CanContentScroll property that you may want to fiddle with.
Let us know the result of this test.
I think you need to rearrange things a little bit. My suggestions (I'm sure there are infinite variations that would work):
First, add a new row to your grid (Height="Auto") and set the height of your top row (with your ContentControl in it) to "*"
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="70" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
Second, move your GridSplitter out of the DockPanel. Put the splitter in row 1 and the dockpanel in row 2.
<ContentControl Grid.Row="0" Content="{Binding ChildViewModel.View}" />
<GridSplitter Grid.Row="1" Background="LightGray" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top" IsTabStop="False" ResizeBehavior="PreviousAndNext"/>
<DockPanel Grid.Row="2" Visibility="{Binding SearchResultViewVisibility}">
<Views:SearchResultView DataContext="{Binding SearchResultViewModel}" />
</DockPanel>
Note that you'll probably also have to set the ResizeBehavior for your GridSplitter as shown above. I hope this will get you close to what you want.

Silverlight Grid does not fill

I have Border control defined like so:
<Border Background="Azure" Grid.Row="2">
<ContentControl Width="Auto" Height="Auto" Regions:RegionManager.RegionName="MainContent" />
</Border>
I can see Azure background in whole area
Now I inject my view into this ContentControl (it's PRISM). View looks like this..
<toolkit:BusyIndicator IsBusy="{Binding IsBusy}">
<Grid Margin="10" DataContext="{Binding}"
infBehaviors:RegionPopupBehaviors.CreatePopupRegionWithName="ViewPopup"
infBehaviors:RegionPopupBehaviors.ContainerWindowStyle="{StaticResource PopupStyle}">
<!--Define rows in a grid-->
<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="*" />
</Grid.RowDefinitions>
<!--Define columns in a grid-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="65" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Now when I place new UserCOntrol on top of my Grid - I expect it to cover whole "Azure" area. But I only see overlay with size of my data entry form. It seems that second grid does not "fill" ContentControl - only takes as much space as needed. How do I force it to fill? I set Auto column and row - thinking they will stretch but no..
EDIT:
Screenshot from Silverlight Spy.. It shows that ContentControl from Shell covers whole area but grid inside totally ignores my "*" sizes. Also it does work in design mode - it stretches to whole design area...
Make sure you have HorizontalContentAlignment and VerticalContentAlignment of the ContentControl set to Stretch. ^_^
e.g.
<Border Background="Azure" Grid.Row="2">
<ContentControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Width="Auto" Height="Auto" Regions:RegionManager.RegionName="MainContent" />
</Border>

Resources