Develop Reference

UWP XAML: Filling the screen with 2 elements, one Viewbox

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>

Listview is resizing correctly in Universal App Windows 10

I've got a XAML page which is broken down with a grid as follows:
<Grid Background="Green">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
The first and third row contain a TextBlock each and are set to auto-resize to their height and the ListView is contained in the middle row and it is suppose to stretch within the area.
The ListView appears to be resized based on the number of items rather than the available visible area that should be allocated to the middle row.
This has 2 side effects:
I can't scroll to view the other items
It pushes the TextBlock in the third row out of the screen.
If I set a specific height on the ListView, it works as expected but I want my ListView to use the entire area of the screen between the top and bottom rows.
It displays as expected in the IDE, but no data is loaded but I can clearly see my top and bottom row (in green) and I can see the ListView is stretched between these 2 rows.
I've used this numerous times in the past but with a universal app for Windows 10, so I'm wondering if this is a new behaviour I'm not aware of or is this a bug?
This is full code without the DataTemplate for clarity sake. Just to be clear, my DataTemplate is displaying correctly, but I just can't scroll as there is no scrollbar since the listview is stretched based on the items, rather than being restricted to the available area of the middle row.
<Grid Background="Green">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Top Row" />
<ListView ItemsSource="{Binding Items}"
Grid.Row="1"
Background="Red">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
....
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<TextBlock Text="bottom row" Grid.Row="2"/>
</Grid>

You need to wrap your ListView in a ScrollView. This will fill the empty area and add a scroll bar as the list overflows the empty area.

I figured out the problem. It isn't a change in behaviour or a bug!
As someone mentioned that they tried to reproduce the problem and couldn't, I decided to do the same.
When I put my grid and ListView directly on the MainPage, I couldn't reproduce it.
When I put my grid and ListView on a sub-page (i.e. GridPage) and loaded it into the frame contained on the MainPage, I couldn't reproduce it
and that's when the penny dropped!!
In my code, I used (for the first time) a SplitView and this SplitView was contained in a grid with 2 rows and stupidly, both rows were set to "Auto" when I should have set the first one to Auto for my hamburger menu, logo and title and the second one should have been set to '*'.
The second I changed my second row to '*', the problem got sorted. It had nothing to do with the Grid Page which contained the grid I originally posted problem with.
<Grid Background="{ThemeResource FocusVisualWhiteStrokeThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Here is the full code:
<Grid Background="{ThemeResource FocusVisualWhiteStrokeThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Background="White"
Grid.Row="0"
Grid.Column="0"
Margin="0,10,0,10">
<ToggleButton Style="{StaticResource SymbolButton}"
Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
FontSize="{ThemeResource ControlContentThemeFontSize}"
Command="{Binding HamburgerCommand}" >
<FontIcon x:Name="Hamburger"
FontFamily="Segoe MDL2 Assets"
Glyph=""
Foreground="#ff6600" />
</ToggleButton>
</Border>
<Border Background="White" Grid.Row="0"
Grid.Column="1" Margin="10,0,0,0">
<Image Stretch="Fill" Source="{Binding SelectedSection,
Converter={StaticResource SectionImageConverter}}"
Height="20" Width="20" />
</Border>
<Border Background="White"
Grid.Row="0"
Grid.Column="2"
Margin="10,0,0,0">
<TextBlock x:Name="Header" Text="{Binding SelectedSection,
Converter={StaticResource
SectionTitleConverter}}"
Style="{StaticResource TagLineTextStyle}"
Foreground="#ff6600"
VerticalAlignment="Center"
Margin="10,0,0,0"/>
</Border>
</Grid>
<SplitView x:Name="Splitter"
IsPaneOpen="{Binding IsPageOpen}"
DisplayMode="Inline"
Grid.Row="1">
<SplitView.Pane>
<ListBox x:Name="SectionControl" SelectionMode="Single"
ItemsSource="{Binding Sections}"
HorizontalAlignment="Left"
Background="White"
BorderThickness="0"
VerticalAlignment="Top"
SelectedItem="{Binding
SelectedSection, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Converter={StaticResource
SectionImageConverter}}"
Height="17" Width="17"/>
<TextBlock Text="{Binding
Converter={StaticResource
SectionTitleConverter}}"
Margin="20,0,0,0"
Foreground="#ff6600" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="SelectionChanged">
<Core:InvokeCommandAction Command="{Binding
ItemClickCommand}"
CommandParameter="{Binding SelectedSection}" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</ListBox>
</SplitView.Pane>
<SplitView.Content>
<Frame x:Name="SectionFrame"/>
</SplitView.Content>
</SplitView>
</Grid>
Thanks again for the feedback/help. Much appreciated!

How to stop Listbox from growing on screen as new items are inserted

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.

How to use SharedSizeScope between 2 wpf controls with parent child relation?

I have a scenario where i have one control, which is using another control thru ListBox.ItemTemplate. I need to share Height and width between these 2 controls. How can we achieve that?
Main Conrol Xaml looks like as followings:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Text="{Binding Path=Caption,
Mode=OneWay}" />
<TextBlock Grid.Row="1"
Text="{Binding Path=Caption2,
Mode=OneWay}" />
</Grid>
<ListBox Grid.Row="0"
Grid.Column="1"
ItemsSource="{Binding Path=ViewModels}">
<ListBox.ItemTemplate>
<DataTemplate>
<Views:View2 />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
View2 xaml looks like as following:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="{Binding Path=Value,
Mode=OneWay}"/>
<TextBlock Text="{Binding Path=Value2,
Mode=OneWay}"
Grid.Row="1"
Grid.Column="0"
/>
</Grid>

You can synchronize row height and column width using Grid.IsSharedSizeScope and the SharedSizeGroup attribute on ColumnDefinition and RowDefinition.
I'm not sure which elements you need to synchronize in your Xaml, but an example might be as follows:
Ia a parent element you use Grid.IsSharedSizeScope="True"
<Grid IsSharedSizeScope="true">
..
</Grid>
This synchronizes any columns (or rows) that have the same SharedSizeGroup within that scope (you can have multiple nested scopes).
So if your view.xaml looks like this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="column1"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Path=Value, Mode=OneWay}"/>
<TextBlock Text="{Binding Path=Value2, Mode=OneWay}" Grid.Row="1" Grid.Column="0"/>
</Grid>
Then all the textblocks will have the same width.

How to make selectable text with 100% height and 100% width of a Grid Cell

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>