I have a grid with two elements, a scaling Viewbox and a Textblock. I want to have the Viewbox take only the space it needs, but also only the space it can get.
Images explain it much better, the desired image first:
However, when I resize my application to be wider, the Viewbox starts to overtake the Textblock below it:
Here's a dumbed down version of my XAML:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="MainGrid" Margin="0" UseLayoutRounding="False">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
</Grid.ColumnDefinitions>
<Viewbox Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Row="0" x:Name="Zulrah">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Blue" Width="150" Height="250" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Rectangle Grid.Column="1" Fill="Red" Width="150" Height="250" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
</Viewbox>
<TextBlock Grid.Row="1" x:Name="TextOutput" MinHeight="100" MinWidth="100">
Hello world!
<LineBreak />
Life's good
</TextBlock>
</Grid>
You can more or less ignore the second column (with Width="0"), it's used for when the application becomes wide-screen (or landscape). It has the same issue:
In short: I want the TextBlock to obey it's MinHeight="100", while still maximizing the space the Viewbox uses.
PS: Please note that some settings make the Viewbox scale to a larger size than actually fits on the screen, this is not desireable!
Edit: Remarkably, setting a MinHeight="100" on the second row has no effect...
Since you are using ThemeResource in your code, I think you are developing an UWP app as there is no ThemeResource in WPF. If so, please remove WPF in your title and tags as they are two different frameworks. Mixed use of UWP and WPF may cause confusion.
For UWP apps, in Grid, while setting row's height to Auto, the row will size to fit its content. After the Auto rows are calculated, the row which height is set to * will get part of the remaining height.
According to your description, you want the TextBlock to obey it's MinHeight and the Viewbox gets part of the remaining height. So you can change the RowDefinitions like following:
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
And to make the Viewbox fill the remaining area, we can set VerticalAlignment and HorizontalAlignment to Stretch. Besides this, you may also need to set Stretch property to Fill to make the content in Viewbox resize to fill the destination dimensions.
The complete XAML code may like following:
<Grid x:Name="MainGrid"
Margin="0"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
UseLayoutRounding="False">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
</Grid.ColumnDefinitions>
<Viewbox x:Name="Zulrah"
Grid.Row="0"
AllowDrop="True"
Stretch="Fill">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0"
Width="150"
Height="250"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="Blue" />
<Rectangle Grid.Column="1"
Width="150"
Height="250"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="Red" />
</Grid>
</Viewbox>
<TextBlock x:Name="TextOutput"
Grid.Row="1"
MinWidth="100"
MinHeight="100">
Hello world!
<LineBreak />
Life's good
</TextBlock>
</Grid>
Related
I've used a border with negativ margin to mark a grid row. But I get a strange behaviour while resizing the window. Cutting the second column of the row makes the margin of the border disappear:
Of course this is a small example, in the main application I'm using a grid splitter, but the bahaviour stays the same. Is it possible to fix this somehow or is it a WPF bug?
MainWindow.xaml:
<Window x:Class="TestHighlightBorder.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:TestHighlightBorder"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Margin="100,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Border Background="DarkRed" Opacity="0.3" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Margin="-80,0,0,0" Panel.ZIndex="1" />
<TextBlock Text="column 0" Background="LightBlue" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="column 2" Background="LightGreen" Grid.Row="0" Grid.Column="2" />
</Grid>
ps:
This is how the main application looks like. It's some sort of a propertygrid. The amount of the negativ margin depends on the level of nested objects.
I tried your example and it happens just as you said: column 2 gone, margin gone.
This seems to happen whenever the grid can't be displayed completely.
If, for example you set the third column definition to 200, the margin disappears as soon as column 2 isn't shown in it's entirety. Same thing happens when you resize the window from the bottom.
If you put the existing grid in another container (Grid, StackPanel, etc.) and set the MinWidth to something at least the size of the width of the columns + margin (in your example 310), this doesn't happen.
Like so:
<StackPanel MinWidth="310">
<Grid Margin="100,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Border Background="DarkRed" Opacity="0.3" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Margin="-80,0,0,0" Panel.ZIndex="1" />
<TextBlock Text="column 0" Background="LightBlue" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="column 2" Background="LightGreen" Grid.Row="0" Grid.Column="2" />
</Grid>
</StackPanel>
Instead of adding a 100 left-margin to the grid, you could just fix a column at the beginning with the width of 100, set the column-span of the border to 4, replace the negative margin with 20 positive left-margin (100-80=20), and add 1 to the value of Grid.Column for each of your controls. So the final approach would look like that:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Border Background="DarkRed" Opacity="0.3" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" Margin="20,0,0,0" Panel.ZIndex="1" />
<TextBlock Text="column 0" Background="LightBlue" Grid.Row="0" Grid.Column="1" />
<TextBlock Text="column 2" Background="LightGreen" Grid.Row="0" Grid.Column="3" />
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListView Grid.Row="1" Margin="0" Background="Transparent" ItemsSource="{Binding Path=HistoryList, Mode=OneWay}" Name="leftPanelScrollViewer" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="{Binding Background}" Tag="{Binding Id}" ContextMenuOpening="FrameworkElement_OnContextMenuOpening" ContextMenuClosing="FrameworkElement_OnContextMenuClosing" ContextMenuService.HasDropShadow="True" ContextMenuService.Placement="Bottom" ContextMenuService.PlacementTarget="{Binding ElementName=PersonNameHistoryItem}" Padding="10 80" CornerRadius="3" BorderThickness="0" Margin="5,0,5,5" MouseLeftButtonUp="Item_OnMouseDown">
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" VerticalAlignment="Top" Width="44" Height="44" Source="/Size.WPF;component/Assets/default-avatar.png" />
...
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
I have this code in WPF App.
Problem - scroll never appears. Instead of adding scroll ListView make Height bigger.
The same with ListBox.
When I don't need scroll it looks like and When I need scroll it looks like
In what wrapped ListBox : Page > Grid (
<Grid.RowDefinitions>
<RowDefinition Height="90" />
<RowDefinition Height="780" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
) > Grid (Grid.RowSpan="3")> Border > Grid (<RowDefinition Height="*" />) > ListView
You've probably got the grid inside a stack panel or some other control that's unbound in size.
Stack panels grow to what ever size their content needs.
You need to either restrict the maximum size of the stack panel or remove it altogether.
Once you've done that the scrollbar should appear.
My WPF application has a window that contains a ListBox. For some reason that I don't understand, it started growing on screen today after items are inserted into it. I want its height to stay fixed and I don't want it to grow every time an item is inserted.
Here's the XAML for the window:
<Viewbox Stretch="Uniform">
<Grid Background="{DynamicResource WindowBackground}"
Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Background="{DynamicResource AlarmTitleBackground}"
Grid.Row="0"
MouseLeftButtonDown="LeftMouseButtonDown">
. . .
</Grid>
<Rectangle Fill="{DynamicResource AlarmTitleBackground}"
Grid.Row="1"
Height="4" />
<Grid Background="{DynamicResource ControlBackground}"
Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid FocusManager.IsFocusScope="True"
Grid.Column="0"
Grid.Row="0"
Name="PendingAlarmScope">
<ListBox Background="{DynamicResource TextBackground}"
HorizontalContentAlignment="Center"
IsSynchronizedWithCurrentItem="True"
Margin="5"
MinWidth="185"
VerticalAlignment="Stretch"
Name="AlarmsList"
SelectionChanged="AlarmsList_SelectionChanged" />
</Grid>
. . .
</Grid>
</Grid>
</Viewbox>
I found a post in a blog about a TextBox that kept growing as characters were typed. The author indicated that the TextBox was in a ScrollViewer with the HorizontalScrollBarVisibility property set to "Auto". They changed it to "Disabled" and this fixed it for them. I tried adding ScrollViewer.VerticalScrollBarVisiblility="Disabled" to the xaml but this didn't work. I also tried binding theListBox's MaxHeight property to theActualHeight` of another control that's the same exact height as I want & that didn't work, either.
How do I fix the Height of the ListBox without setting it? I want the ListBox to always fill the Grid cell it's in, and the window to grow and rescale itself for different screen resolutions.
<Grid Background="{DynamicResource ControlBackground}"
Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
for grins would you try dropping the view box and some other stuff
<Grid Background="{DynamicResource WindowBackground}"
Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Fill="{DynamicResource AlarmTitleBackground}"
Grid.Row="1"
Height="4" />
<ListBox Grid.Row="2" Background="{DynamicResource TextBackground}"
HorizontalContentAlignment="Center"
IsSynchronizedWithCurrentItem="True"
Margin="5"
MinWidth="185"
VerticalAlignment="Stretch"
Name="AlarmsList"
SelectionChanged="AlarmsList_SelectionChanged" />
</Grid>
After many hours of trying numerous things, I finally bit the bullet & set the Height of the ListBox to a value that I found using Snoop before it started growing. This stopped it from growing every time a new item was inserted. It was the only thing I could find to do that worked. A very frustrating day.
I have a Silverlight application and I try to display a generated text into a Cell of my grid. Unfortunately the TextBox does not seem to be able to have a stretching height and stretching width to his parent size. For the moment, I have simply use a ScrollViewer and Set the content but I can't select the text so I still have a problem.
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500*" />
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Button Content="Generate" Grid.Row="1" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Height="50" Click="GenerateSerialization" />
<ScrollViewer Name="scrollText" Grid.Column="2"></ScrollViewer>
<sdk:GridSplitter Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" Name="gridSplitter1" VerticalAlignment="Stretch" />
</Grid>
Sorry... when I think I understand English I see have a lot of road to travel :o)
Check this:
<ScrollViewer Name="scrollText"
HorizontalScrollBarVisibility="Disabled"
Grid.Column="2">
<TextBox TextWrapping="Wrap"
Text="Bla, bla, bla..." />
</ScrollViewer>
I made this image that shows the controls. The top one is a ListView and the others are ListView controls as well with additional controls.
But I can't figure out how to layout them to look like that.
Currently I use 3 DockPanels for each ListView where the top one uses Top VerticalAlignment, the others use Bottom for VerticalAlignment, Left and Right (for HorizontalAlignment).
But when I look at it, the other 2 controls appear after the top ListView to its right side. I can see this when I scale the top DockPanel to half the size, then the other 2 DockPanels show up, attached to the top DockPanel's right side.
Any ideas on how to fix this?
How about this?
The grid has no fixed widths or heights and should accommodate whatever controls you add.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Background="Aqua" Height="100"/>
<StackPanel Grid.Row="2" Grid.Column="0" Background="Orange" Height="100" Width="150" VerticalAlignment="Bottom"/>
<StackPanel Grid.Row="2" Grid.Column="2" Background="Green" Height="60" Width="200" VerticalAlignment="Bottom"/>
</Grid>
Initial window
Resized window
EDIT in response to comment
If you want a progressbar in the top panel, just use:
<StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
Background="Aqua" Orientation="Vertical">
<ListView Height="50" Background="Purple"></ListView>
<ProgressBar Height="20" IsIndeterminate="True" ></ProgressBar>
</StackPanel>
Do you need them to be DockPanels, or this is a fixed layout?
If it's fixed you could do something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListView Grid.Row="0" Grid.RowSpan="1" Grid.Column="0" Grid.ColumnSpan="3" Name="dockPanel1" Background="CadetBlue">
</ListView>
<ListView Grid.Row="2" Grid.RowSpan="2" Name="dockPanel2" Background="Cyan">
</ListView>
<ListView Grid.Row="3" Grid.RowSpan="1" Grid.Column="2" Name="dockPanel3" Background="DarkRed">
</ListView>
</Grid>
I made the area between your three panels re-sizable as your window resizes.
Instead of the listviews that I used, you can put pretty much anything, a user control, another grid, whatever.
The colors will show you where the listview sections are easily.
You will probably want to adjust the sizes, or change the resize behavior.
You can learn more about grids here
Seems like this is the sort of scenario Alignment, Margins, and Padding are made to handle...