I have a expander which contains a grid in which I have a grid splitter.
The Document Outline and UI is like this
and here is the code.
<Grid x:Name="TopGrid" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="150"/>
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Expander x:Name="CompanyDescriptionExpander" Grid.ColumnSpan="2"
VerticalAlignment="Top" IsExpanded="True" Background="Black" >
<Expander.Header>
<Grid Width="{Binding ElementName=CompanyDescriptionExpander,
Path=ActualWidth}" Background="Aquamarine">
<TextBlock Grid.Column="0" Text="Expander Header" Foreground="Black" />
</Grid>
</Expander.Header>
<Expander.Content>
<Grid x:Name="DescriptionGrid" MaxHeight="130" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="25" MaxHeight="25"/>
<RowDefinition Height="Auto" MinHeight="25" MaxHeight="120"/>
<RowDefinition Height="4" MinHeight="10" MaxHeight="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Background="Orange" Grid.Row="0" Grid.RowSpan="2"
MinHeight="40" MaxHeight="120" x:Name="DescriptionText"
Text="TextBlock Content" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Top"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Auto" />
<Button x:Name="SaveIconButton" Grid.Column="1" Grid.Row="0" Width="20"
Height="20" VerticalAlignment="Top" />
<Button x:Name="CancelIconButton" Grid.Column="1" Grid.Row="1" Width="20"
Height="20" VerticalAlignment="Top" />
<GridSplitter ResizeBehavior="PreviousAndCurrent" ResizeDirection="Rows"
Grid.Row="2" Grid.ColumnSpan="2"
Height="10" MaxHeight="10" HorizontalAlignment="Stretch"
VerticalAlignment="Top" Background="Red" />
</Grid>
</Expander.Content>
</Expander>
<Button Grid.Row="1" Grid.Column="0" Margin="0,5,0,0" Height="20"
VerticalAlignment="Top" Background="Green" />
</Grid>
When we use grid splitter it expands
But it goes on even after textbox reaches its maximum height and gridsplitter goes behind button(green).
My problem scenario can be replicated copying my code in a project
I want that it should stop when textbox reaches its maximum height.
How to do that?
In your DescriptionGrid change the second rows MaxHeight from 120 to 95.
The combined max height of the three rows in that grid exceeds the max height of the grid itself.
Related
My DataGrid should be showing up in the middle of three Grid columns, Column 1, but instead it appears to be showing up in Column 0, as seen here:
You can see there that my Cancel button (Column 0) and my OK button (column 2) are right next to each other because the DataGrid appears to be occupying Column 0, instead of Column 1. However, when I break my code during execution and do Grid.GetColumn(DataGridFilteredFixesReportsTable), it properly returns 1.
I've also tried moving the DataGrid to Column 2 to see what happens, but the visual result was exactly the same.
What am I doing wrong or misunderstanding about how this works?
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid Margin="20,20,20,20" Name="SettingsGrid" Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="600"/>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<DataGrid Grid.Row="0" Grid.Column="1"
Name="DataGridFilteredFixesReportsTable"
ItemsSource="{Binding Path=FilteredFixesReportsTable.DefaultView}"
DataContext="{Binding ElementName=SeeAllFixesReportsWindow}"
AutoGenerateColumns="True"
FontSize="28" FontFamily="Times New Roman"
IsReadOnly="True">
</DataGrid>
</ScrollViewer>
<Button Grid.Row="2" Grid.Column="0"
Name="ButtonCancel"
Click="OkCancel_Click"
Content="Cancel"
FontSize="32" FontFamily="Times New Roman" FontWeight="Bold" Background="Pink"/>
<Button Grid.Row="2" Grid.Column="2"
Name="ButtonOk"
IsDefault="True"
Click="OkCancel_Click"
Content="OK"
FontSize="32" FontFamily="Times New Roman" FontWeight="Bold" Background="PaleGreen"/>
</Grid>
</ScrollViewer>
Direct children of the Grid should have the column and row specifications. Your DataGrid is a child of ScrollViewer, not Grid so it is ignoring those properties.
Try:
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid Margin="20,20,20,20" Name="SettingsGrid" Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="600"/>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<!-- Should be set here -->
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="0" Grid.Column="1" HorizontalScrollBarVisibility="Auto">
<DataGrid
Name="DataGridFilteredFixesReportsTable"
ItemsSource="{Binding Path=FilteredFixesReportsTable.DefaultView}"
DataContext="{Binding ElementName=SeeAllFixesReportsWindow}"
AutoGenerateColumns="True"
FontSize="28" FontFamily="Times New Roman"
IsReadOnly="True">
</DataGrid>
</ScrollViewer>
<Button Grid.Row="2" Grid.Column="0"
Name="ButtonCancel"
Click="OkCancel_Click"
Content="Cancel"
FontSize="32" FontFamily="Times New Roman" FontWeight="Bold" Background="Pink"/>
<Button Grid.Row="2" Grid.Column="2"
Name="ButtonOk"
IsDefault="True"
Click="OkCancel_Click"
Content="OK"
FontSize="32" FontFamily="Times New Roman" FontWeight="Bold" Background="PaleGreen"/>
</Grid>
</ScrollViewer>
Since it isn't set on the ScrollViewer it is defaulting to 0 and 0 for row and column.
I'm using a TreeView in WPF that has an explicit height set. The vertical scrollbar is cut off at the bottom (independent of whether items are bound/shown or not; I've enabled the scrollbar to be able to reproduce the problem without items attached). XAML source below.
<Window x:Class="demo.TreeViewProblem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="..."
ResizeMode="CanResizeWithGrip"
SizeToContent="WidthAndHeight">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock
Grid.Column="0"
Grid.Row="0"
Margin="5,10,5,5"
Text="Some label"/>
<TextBlock
Grid.Column="1"
Grid.Row="0"
Margin="5,10,5,5"
Text="Some value"/>
<TreeView
ScrollViewer.VerticalScrollBarVisibility="Visible"
Grid.Column="1"
Grid.Row="1"
Height="200"
MinHeight="200"
Width="300"
Margin="5,10,5,5"
VerticalAlignment="Top" />
<TextBlock
Grid.Column="0"
Grid.Row="2"
Margin="5,10,5,5"
Text="Some label"/>
<TextBox
Grid.Column="1"
Grid.Row="2"
Width="80"
Margin="5,10,5,5"
HorizontalAlignment="Left"
Text="Some value"/>
<TextBlock
Grid.Column="0"
Grid.Row="3"
Margin="5,10,5,5"
Text="Some label"/>
<TextBox
Grid.Column="1"
Grid.Row="3"
Width="80"
Margin="5,10,5,5"
HorizontalAlignment="Left"
Text="Some value"/>
<Button
HorizontalAlignment="Center"
Margin="10,10,10,10"
Content="Close"
Grid.ColumnSpan="2"
Grid.Column="0"
Grid.Row="4"/>
</Grid>
</Window>
Change the RowDefinition for the row containing your TreeView to this:
<RowDefinition Height="Auto" />
When set to "Auto", the row will calculate how much space it needs.
EDIT: Alternatively, you could set the other rows to Auto and then make your TreeView stretch instead. With this approach your window will scale nicer when the user resizes it.
From the row definitions:
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
From the tree:
<TreeView VerticalAlignment="Stretch"
... />
I want to include ScrollViewer in my Groupbox, but it is not working. My code is:
<GroupBox
Margin="10,10,0,0"
Grid.Row="0"
Grid.ColumnSpan="3"
Height="150"
>
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label
Margin="0,6,0,0"
Content="SSID"
Grid.Row="0"
>
</Label>
<TextBox
Margin="0,6,0,6"
Grid.Column="1">
</TextBox>
<Label
Margin="0,6,0,0"
Content="(1024)"
Grid.Column="2"
>
</Label>
<Label
Margin="0,6,0,0"
Content="Authentication Mode"
Grid.Column="0"
Grid.Row="1"
>
</Label>
<ComboBox
Margin="0,6,0,6"
Grid.Row="1"
Grid.Column="1"
ItemsSource="{Binding ACAvailableSecurityTypes}"
SelectedItem="{Binding ACSelectedSecurityType}"
/>
<Label
Margin="0,6,0,0"
Grid.Row="2"
Grid.Column="0"
Content="VLAN"
/>
<TextBox
Margin="0,6,0,6"
Grid.Row="2"
Grid.Column="1"
/>
<Label Grid.Row="2"
Grid.Column="2"
Content="(1-4094)"/>
<Button
Grid.Row="3"
Grid.Column="2"
Content="Add SSID"
HorizontalAlignment="Left"
Width="70"
Style="{StaticResource AppButtons}"/>
</Grid>
</ScrollViewer>
</GroupBox>
In Order to See your Scroll bar, your scrollviewer should have lesser height than your groupbox, do like this, you can see the scrollbar, Set the height and VerticalScrollBarVisibility
<ScrollViewer Height="100" VerticalScrollBarVisibility="Auto">
<GroupBox
Margin="10,10,0,0"
Grid.Row="0"
Grid.ColumnSpan="3"
Height="150"
>
......
</GroupBox>
</ScrollViewer>
Place the ScrollViewer outside the GroupBox, not inside:
<ScrollViewer>
<GroupBox Margin="10,10,0,0"
Grid.Row="0"
Grid.ColumnSpan="3"
Height="150" >
...
...
</GroupBox>
</ScrollViewer>
Placing the GroupBox inside the ScrollViewer cause GroupBox header to disappear when scrolling.
I solved the problem, keeping the ScollViewer inside the GroupBox by setting the Height of the ScrollViewer to match GroupBox Height:
<GroupBox Header="Testing 123">
<ScrollViewer Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=GroupBox}, Path=ActualHeight}">
<Image .../>
</ScrollViewer>
</GroupBox>
I have a big main grid with several rows and columns. I want to place in one of these cells a vertical stackpanel. In this stackpanel there is a textblock and a scrollviewer. My problem is, that the stackpanel doesn't get limited by the cell, instead the stackpanel gets big enough to fit the whole scrollviewer.
How can I solve this?
EDIT: my xaml code:
<Grid x:Name="Grid1" Margin="120,0,0,0" Width="1244">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="33*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="71"/>
<RowDefinition Height="40"/>
<RowDefinition/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="2" Margin="0">
<TextBlock TextWrapping="Wrap" FontSize="48" Margin="0" VerticalAlignment="Top" Foreground="#FF0083FF" Text="Top 10:" HorizontalAlignment="Left" FontFamily="Segoe UI Light"/>
<ScrollViewer Margin="0,20,0,0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible">
<StackPanel>
<ListView x:Name="TopListView" ItemsSource="{Binding}" SelectionMode="None" Foreground="White" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel >
<TextBlock FontSize="32" Text="1" Foreground="#FF0083FF"/>
</StackPanel>
<TextBlock Text="{Binding Text}" Foreground="Black"
FontSize="16" Margin="0,0,0,0" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
Use another Grid instead of a StackPanel:
<Grid Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="2" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock FontSize="48" FontFamily="Segoe UI Light"
Foreground="#FF0083FF" HorizontalAlignment="Left"
TextWrapping="Wrap" Text="Top 10:"/>
<ScrollViewer Grid.Row="1" Margin="0,20,0,0"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Visible">
...
</ScrollViewer>
</Grid >
I'm trying to visually align the top of the content of 2 (or more) blocks of Text.
The content and the Font (Size, Family, Weight) of each block can be modified by user.
I tried to play with the GetCellAscent, GetCellDescent and GetLineSpacing functions but the results depends only on the font and not the real content. And anyway I can't find how is distributed the difference between LineSpacing and Ascent+ Descent at the top and bottom of the block.
For example I want to produce this kind of output:
Any help?
Try This.....
<Grid Width="171" Height="100" Background="Black" Margin="257,78,75,133">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Name="aaa" Text="12" FontSize="40" HorizontalAlignment="Center" VerticalAlignment="Stretch" Grid.Row="1" FontWeight="Bold" Foreground="White" />
<TextBlock Text="$" HorizontalAlignment="Left" FontSize="20" Grid.Column="1" FontFamily="Euphemia" FontWeight="Bold" Foreground="White" Margin="8,0,72,0" />
<TextBlock Text="00 le Kg" FontSize="15" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" Grid.IsSharedSizeScope="True" FontFamily="Euphemia" FontWeight="Bold" Foreground="White"/>
</Grid>