We Keep Coding

UWP: Cannot make ListView scrollable

I have a page with a simple grid (2x2). In one grid on the bottom left corner is another Grid and inside this grid is a ListView bound to a collection. Entries can be added to the collection so the ListView grows in height (height of ListView is set to auto, so that all space available is used).
What I want is, if all available space (from the screen height) is used, scrollbars for the ListView should appear and should be usable. Funny (unfunny) thing is: scrollbars do appear but I cannot use them, I cannot scroll the ListView with the vertical scrollbar that appears when I hover the ListView.
It works, when I set the height of the ListView to a fixed value, but I don't want it that way, because then it doesn't use all the available space on the screen.
This is the XAML of the page (I removed some parts for demonstration purposes) :
<Page
x:Class="Qooli.TimeTracker.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Qooli.TimeTracker"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
...
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Name="spAddEntry" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30">
<TextBlock Text="Add new entry:" Name="lblAddNewEntry" />
...
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30">
<TextBlock Text="Allocated time:" Name="lblAllocatedTime" />
...
</StackPanel>
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Margin="30">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Daily overview:" Name="lblDailyOverview" Grid.Row="0" Grid.Column="0" />
<ListView Name="lvTimeEntries" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left"
Height="Auto"
MinHeight="100"
VerticalAlignment="Top"
MinWidth="300"
SelectionMode="Single"
ItemsSource="{x:Bind ViewModel.TimeEntriesAdvancedCollectionView, Mode=OneWay}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.IsVerticalRailEnabled="True"
ScrollViewer.VerticalScrollMode="Enabled">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="local:TimeEntry">
<Grid Background="{Binding Type, Converter={StaticResource TimeEntryTypeColorConverter}}" Padding="5">
<Grid.RowDefinitions>
<RowDefinition Height="200"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind Time, Mode=OneWay}" Style="{StaticResource TitleTextBlockStyle}"
MinWidth="60"
MaxWidth="60"
Grid.Row="0" Grid.Column="0">
</TextBlock>
<TextBlock Text="{x:Bind Title, Mode=OneWay}" Style="{StaticResource BodyTextBlockStyle}" Margin="5,0,0,0"
MinWidth="100"
MaxWidth="100"
Grid.Row="0" Grid.Column="1">
</TextBlock>
<Button Name="btnEditTimeEntry" Grid.Row="0" Grid.Column="2" Margin="5,5,5,5">
<SymbolIcon x:Name="edit" Symbol="Edit"/>
</Button>
<Button Name="btnDeleteTimeEntry" Grid.Row="0" Grid.Column="3" Margin="5,5,5,5">
<SymbolIcon x:Name="delete" Symbol="Delete"/>
</Button>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
</Grid>
<StackPanel Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30">
<TextBlock Style="{StaticResource summaryTextStyle}" Text="Start time:" Name="lblDayStartTime" />
...
</StackPanel>
</Grid>
</Page>
Can someone spot why it is behaving this way?

You need to set the height of the second row to "*" for both grids.

UserControl's image not show on MainPage

I create a UserControl that contains a static image and I want to display it on my MainPage. However, the image only displays on my UserControl without displaying on MainPage.
This is my UserControl XAML:
<UserControl
x:Class="Example.Views.UserControls.Gift.GiftView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Example.Views.UserControls.Gift"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="RootLayout">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="90"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Background="#dedede">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" HorizontalAlignment="Stretch">
<Button.Template>
<ControlTemplate >
<Grid Background="{Binding FleetTabColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Height="40" Width="40" Source="../Assets/Icon/unselect_gift.png" VerticalAlignment="Center" />
<TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Gift"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Grid.Column="1" HorizontalAlignment="Stretch" >
<Button.Template>
<ControlTemplate >
<Grid Background="{Binding FleetTabColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Height="40" Width="40" Source="../Assets/birthday.png" VerticalAlignment="Center" />
<TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="BirthDay"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Grid.Column="2" HorizontalAlignment="Stretch">
<Button.Template>
<ControlTemplate >
<Grid Background="{Binding FleetTabColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Height="40" Width="40" Source="../Assets/package.png" VerticalAlignment="Center" />
<TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Package"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</StackPanel>
</Border>
</Grid>
</UserControl>
And this is my MainPage XAML:
<Page
x:Class="Example.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Example"
xmlns:menu="using:Example.Views.UserControls.Menu"
xmlns:popup="using:Example.Views.UserControls.Popup"
xmlns:giftview="using:Example.Views.UserControls.Gift"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="Root">
<Grid Background="#FFCFD4E2">
<Grid Visibility="Visible">
<giftview:GiftView x:Name="GiftViewTest" DataContext="{Binding GiftViewModel}"/>
</Grid>
</Grid>
</Grid>
</Page>
When I try to clear my project, the image will shows correctly on my MainPage Preview. But when I rebuild my project, it will disappears on my preview again.
How can I do this?

Almost certainly your image cannot be found at runtime.
You'll need to check your project outputs to make sure the assets are in the correct folder.
More than likely you should use resources to access the images: see this other stackoverflow question
Example User Control that works as expected:
<UserControl x:Class="WpfApp1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<StackPanel Orientation="Vertical">
<Button>
<Button.Template>
<ControlTemplate>
<Grid>
<Image Height="20" Width="40" Source="http://lorempixel.com/400/200/" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button>
<Button.Template>
<ControlTemplate>
<Grid>
<Image Height="20" Width="40" Source="sample-image.jpg" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</UserControl>
Project:

Expand content below controls

Hey below is very simple code of an expander in action. Currently the expander will expand a text block and the radio buttons below it will move down. I would like to have the radio buttons stay where they are and display the text block below them whilst also keeping the expander icon in it's current location. Thanks!
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Expender WPF Sample" Height="300" Width="400"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" Margin="10,5,0,0">
<RadioButton Content="Choice One"/>
<RadioButton Content="Choice Two"/>
<RadioButton Content="Choice Three"/>
</StackPanel>
<Expander HorizontalAlignment="Right" Header=""
VerticalAlignment="Top" ExpandDirection="Down" Width="150">
<TextBlock TextWrapping="Wrap" Background="AntiqueWhite">
This is the standard expander
behavior. The expander opens
and the controls below it
move down.
</TextBlock>
</Expander>
</Grid>
</Grid>
</Window>

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Expander HorizontalAlignment="Right"
VerticalAlignment="Top" ExpandDirection="Down" Width="150">
<Expander.Header>
<StackPanel Grid.Row="1" Margin="10,5,0,0">
<RadioButton Content="Choice One"/>
<RadioButton Content="Choice Two"/>
<RadioButton Content="Choice Three"/>
</StackPanel>
</Expander.Header>
<TextBlock TextWrapping="Wrap" Background="AntiqueWhite">
This is the standard expander
behavior. The expander opens
and the controls below it
move down.
</TextBlock>
</Expander>
</Grid>
</Grid>

Hide and auto resize columns with GridSplitter

I've a project with 1 header row and 1 content row. The content row is divided into 3 columns (groupboxes). These 3 columns are realized with GridSplitter.
Source Code:
<Window
x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewMenu="clr-namespace:Cons.ViewMenu"
Title="Test Gridsplitter"
Height="700"
Width="1000">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisConverter" />
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Row 0 -->
<GroupBox Name="Menu" Grid.Row="0">
<ViewMenu:LockedToolBar>
<ToggleButton x:Name="HideColumn0Button" IsChecked="True" Width="80" Height="40">Hide C0</ToggleButton>
<ToggleButton x:Name="HideColumn1Button" IsChecked="True" Width="80" Height="40">Hide C1</ToggleButton>
<ToggleButton x:Name="HideColumn2Button" IsChecked="True" Width="80" Height="40">Hide C2</ToggleButton>
</ViewMenu:LockedToolBar>
</GroupBox>
<!-- Row 1 -->
<GroupBox Name="Body" Grid.Row="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="80" />
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*" MinWidth="80" />
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*" MinWidth="80" />
</Grid.ColumnDefinitions>
<!-- Column 0 -->
<GroupBox Header="Column 0"
Name="ds"
Grid.Row="0"
Grid.Column="0"
Visibility="{Binding Path=IsChecked, ElementName=HideColumn0Button, Converter={StaticResource BoolToVisConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ViewMenu:LockedToolBar Grid.Row="0">
</ViewMenu:LockedToolBar>
</Grid>
</GroupBox>
<!-- Column 1 -->
<GroupBox Header="Column 1"
Grid.Row="0"
Grid.Column="2"
Visibility="{Binding Path=IsChecked, ElementName=HideColumn1Button, Converter={StaticResource BoolToVisConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ViewMenu:LockedToolBar Grid.Row="0">
</ViewMenu:LockedToolBar>
</Grid>
</GroupBox>
<!-- Column 2 -->
<GroupBox Header="Column 2"
Grid.Row="0"
Grid.Column="4"
Visibility="{Binding Path=IsChecked, ElementName=HideColumn2Button, Converter={StaticResource BoolToVisConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ViewMenu:LockedToolBar Grid.Row="0">
</ViewMenu:LockedToolBar>
</Grid>
</GroupBox>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="5"/>
<GridSplitter Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="5"/>
</Grid>
</GroupBox>
</Grid>
</Window>
I click on HideColumn1Button, column 1 is hidden, but the other two columns have the same width as before. But I want, that column 0 and 2 are auto resized to the complete width.
Does anyone of you know, how to do that?

If you wish to bind it using a checkbox then you can try the following code, just build a library out of it and make use of extended column definition. Courtesy(immortalus)
http://www.codeproject.com/Articles/437237/WPF-Grid-Column-and-Row-Hiding
Alternatively, on the button_click or checkbox_checked you can write code(I have named the grid as testgrid), remember to add the reverse code as well:
testgrid.ColumnDefinitions[0].Width = new GridLength(0);
testgrid.ColumnDefinitions[0].MinWidth = 0;
An even more extended version is to write your own Storyboard, but the above two should help.
Regards
Kajal

Your BooleanToVisibilityConverter needs to return Visibility.Collapsed, not Visibility.Hidden. That would be the visual equivalent to setting the width to 0.
Edit
Find your definition of BooleanToVisibilityConverter somewhere in your code.
You should only have 3 columns. Put the GridSplitters in Columns 1 and 2, HorizontalAlignment="Left". For each GroupBox set Margin="5,0,0,0".

Please try to verify that BooleanToVisibilityConverter needs to return Visibility.Collapsed, not Visibility.Hidden.
BooleanToVisibilityConverter.cs source code in C# .NET
You should only have 3 columns with Auto width for column 0. Put the GridSplitters in Columns 1 and 2.
Here is the code i tried :
<Window
x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewMenu="clr-namespace:Cons.ViewMenu"
Title="Test Gridsplitter"
Height="700"
Width="1000">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisConverter" />
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Row 0 -->
<GroupBox Name="Menu" Grid.Row="0">
<StackPanel>
<ToggleButton x:Name="HideColumn0Button" IsChecked="True" Width="80" Height="40">Hide C0</ToggleButton>
<ToggleButton x:Name="HideColumn1Button" IsChecked="True" Width="80" Height="40">Hide C1</ToggleButton>
<ToggleButton x:Name="HideColumn2Button" IsChecked="True" Width="80" Height="40">Hide C2</ToggleButton>
</StackPanel>
</GroupBox>
<!-- Row 1 -->
<GroupBox Name="Body" Grid.Row="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" MinWidth="150"/>
<ColumnDefinition Width="*" MinWidth="150"/>
</Grid.ColumnDefinitions>
<!-- Column 0 -->
<GroupBox Header="Column 0"
Name="ds"
Margin="5,0,0,0"
Grid.Row="0"
Width="150"
Grid.Column="0"
Visibility="{Binding Path=IsChecked, ElementName=HideColumn0Button, Converter={StaticResource BoolToVisConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
</StackPanel>
</Grid>
</GroupBox>
<!-- Column 1 -->
<GroupBox Header="Column 1"
Grid.Row="0"
Grid.Column="1"
Margin="5,0,0,0"
Visibility="{Binding Path=IsChecked, ElementName=HideColumn1Button, Converter={StaticResource BoolToVisConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
</StackPanel>
</Grid>
</GroupBox>
<!-- Column 2 -->
<GroupBox Header="Column 2"
Grid.Row="0"
Margin="5,0,0,0"
Grid.Column="2"
Visibility="{Binding Path=IsChecked, ElementName=HideColumn2Button, Converter={StaticResource BoolToVisConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
</StackPanel>
</Grid>
</GroupBox>
//Put the GridSplitters in Columns 1 and 2, HorizontalAlignment="Left".
<GridSplitter Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="5"/>
<GridSplitter Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="5"/>
</Grid>
</GroupBox>
</Grid>
</Window>
Before hide
After Hide

How to create a GridSplitter that occupies a column
To specify a GridSplitter that occupies a column in a Grid, set the Column attached property to one of the columns that you want to resize. If your Grid has more than one row, set the RowSpan attached property to the number of rows. Then set the HorizontalAlignment to Center, set the VerticalAlignment property to Stretch, and set the Width of the column that contains the GridSplitter to Auto.
The following example shows how to define a vertical GridSplitter that occupies a column and resizes the columns on either side of it.
Credit : http://msdn.microsoft.com/en-us/library/ms745672(v=vs.110).aspx
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
..
<GridSplitter Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="True"
Width="5"
/>

WPF Listbox grows outside screen size (MVVM light)

I have a typical MVVM structure. A mainwindow consists of some labels and a viewmodel (bound as ContentControl). This viewmodel has a listbox where I add entries. As the list grows the height of my viewmodel grows as well and thus the height of the whole application. Unfortunately the size doesn't stop at the edge of the screen and just grows out of the screen. I tried all the different size-restrictions on the mainwindow, the viewmodel is stretched in both dimensions.
Furthermore, I tried to get a scrollbar for the listbox but didn't succeed (or it's just there but not enabled if I force it.)
How can I restrict the maximal size to be the resolution of the screen (fullscreen) and get a scrollbar for the listbox when the size is reached?
€: Okay, here should be the relevant part of my code. I tried a fixed size of 1024x768 but even that doesn't work.
MainWindow.xaml
<Window x:Class="SWS.MainWindow"
DataContext="{Binding Main, Source={StaticResource Locator}}"
Width="1024"
Height="768"
MaxWidth="1024"
MaxHeight="768">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl Grid.Row="0" Content="{Binding CurrentViewModel}" />
</Grid>
</Window>
The ViewModel in question
<UserControl x:Class="SWS.Views.ProgramView"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Label Width="65" Content="{x:Static p:Resources.PrV_Number}" />
<Label Width="75" Content="{x:Static p:Resources.PrV_Weight}" />
<Label Width="55" Content="{x:Static p:Resources.PrV_Action}" />
<Label Content=" " />
</DockPanel>
<ListBox Grid.Row="1"
VerticalAlignment="Stretch"
ItemsSource="{Binding ParticleCollection}"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock Text="{Binding ID}" Width="53" />
<TextBlock Text="{Binding Weight, StringFormat=F4}" Width="65" />
<TextBlock Text="{Binding Action}" Width="52" />
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>

You need to set the row height to * on your Window for ContentControl and your ListBox in UserControl to fill available space than try to get what it needs.
This worked fine:
MainWindow.xaml:
<Window x:Class="SWS.MainWindow"
DataContext="{Binding Main, Source={StaticResource Locator}}"
Width="1024"
Height="768"
MaxWidth="1024"
MaxHeight="768">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl Grid.Row="0" Content="{Binding CurrentViewModel}" />
</Grid>
</Window>
and UserControl:
<UserControl x:Class="SWS.Views.ProgramView"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
...
</Grid>
</UserControl>
Could also do this in a couple more ways:
In your Window you can just remove the <Grid.RowDefinitions>...<Grid.RowDefinitions> completely. The default behavior is what your looking for.
When you have more than 1 row you can either choose to specify Height="*" or just remove the Height Property from the RowDefinition
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>