We Keep Coding

Add row of text above a grid of items

I'm building a grid via WPF, and it works great. I need to add a row, or bar, or something to display above the grid, that will have several text items on it that will get populated by code. I've been tooling around, and I can't seem to figure out how to put another panel above my existing (and working) grid. This is my code:
<Window x:Class="GridWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Board" SizeToContent="WidthAndHeight" Height="Auto" Width="Auto">
<Window.Resources>
<DataTemplate x:Key="DataTemplate_2">
<Button Content="{Binding}" Height="25" Width="25" Margin="0,0,0,0"/>
</DataTemplate>
<DataTemplate x:Key="DataTemplate_1">
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{DynamicResource DataTemplate_2}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
</Window.Resources>
<Grid Name="GridBoard" ShowGridLines="True">
<ItemsControl x:Name="GridItems" ItemTemplate="{DynamicResource DataTemplate_1}"/>
</Grid>
</Window>
The GridItems gets populated by a jagged array, and displays fine. I just need to put a few text objects above it, be it boxes, or just a horizontal panel that fits the width of the grid.

May be the simplest option is to add a wrapper Grid and put your inner Grid in the second row. So, you will have the first row (row 0) to put anything you need there.
<Window x:Class="GridWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Board" SizeToContent="WidthAndHeight" Height="Auto" Width="Auto">
<Window.Resources>
<DataTemplate x:Key="DataTemplate_2">
<Button Content="{Binding}" Height="25" Width="25" Margin="0,0,0,0"/>
</DataTemplate>
<DataTemplate x:Key="DataTemplate_1">
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{DynamicResource DataTemplate_2}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<!-- WHATEVER YOU NEED -->
</Grid>
<Grid Name="GridBoard" ShowGridLines="True" Grid.Row="1">
<ItemsControl x:Name="GridItems" ItemTemplate="{DynamicResource DataTemplate_1}"/>
</Grid>
</Grid>

There are a few ways to achieve it.
1 - you can add a row and columns to your grid definition:
<Grid.ColumnDefinitions>
<ColumnDefinition width="*" />
<ColumnDefinition width="*" />
<ColumnDefinition width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
Then you can just assign 'headers' to each column, like so:
<TextBlock ... Grid.Column="0" />
<TextBlock ... Grid.Column="1" />
<TextBlock ... Grid.Column="2" />
And place your ItemsControl in the second row:
<ItemsControl ... Grid.Row="1" Grid.ColumnSpan="3" />
A half-assed way that may or may not work in your case. No way of knowing without taking a look at the DataTemplate.
2 - StackPanel at the top, with margin applied to the ItemsControl
You can use a similar half-solution - set the top margin of your ItemsControl to a fixed value, like so:
<ItemsControl ... Margin="2,48,2,2" />
And add a StackPanel to your grid:
<StackPanel Height="48" VerticalAlignment="Top">
<TextBlock Text="First Header" Width="300" />
...
</StackPanel>
I'm sure you get the idea.
3 - Use a GridView -RECOMMENDED-
This would require you to change your ItemsControl to a ListView, though.
Here is a well-written tutorial on GridViews for WPF. Granted, it might not be what you're looking for, but again - without knowing what you're trying to present it's difficult to find best solution.

I don't know what you expect the output to look like, but you can nest your "GridBoard" Grid within another Grid. The new outer Grid defines two rows, whereby in the first row you can put your boxes or whatever you like. This could look like this for example:
<Window x:Class="GridWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Board" SizeToContent="WidthAndHeight" Height="Auto" Width="Auto">
<Window.Resources>
<DataTemplate x:Key="DataTemplate_2">
<Button Content="{Binding}" Height="25" Width="25" Margin="0,0,0,0"/>
</DataTemplate>
<DataTemplate x:Key="DataTemplate_1">
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{DynamicResource DataTemplate_2}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Put something here ..." />
</Grid>
<Grid Grid.Row="1" Name="GridBoard" ShowGridLines="True">
<ItemsControl x:Name="GridItems" ItemTemplate="{DynamicResource DataTemplate_1}"/>
</Grid>
</Grid>
</Window>
Note that you could use any element for the content of the first row of your outer Grid. This depends on your actual needs. In this example I used another Grid which contains a single TextBlock.

Binding listbox maxHeight to parent actual

So I am having some trouble getting the binding of a lisbox height to work. I have a user control that holds a listbox, this box is dynamically populated on the fly but it seems that if too many items are added it extends past the boundaries of the parent objects and refuses to stop and use the scoll bar...
<UserControl x:Class="TransaltionModule.Views.NoteView"
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">
<Grid>
<ListBox ItemsSource="{Binding noteList}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<TextBlock Text="Type :" VerticalAlignment="Center" FontSize="14" Width="65"/>
<TextBox Text="{Binding noteType}" Width="auto" IsEnabled="False" VerticalAlignment="Center" FontSize="14"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
<TextBlock Text="Date :" VerticalAlignment="Center" FontSize="14" Width="65"/>
<TextBox Text="{Binding timeStamp}" Width="auto" IsEnabled="False" VerticalAlignment="Center" FontSize="14"/>
</StackPanel>
<TextBlock Grid.Row="1" Text="{Binding text}" Grid.ColumnSpan="2"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
If i hardcode the maxheight property everything works as intended, but with the multiple display resolutions I will be working against that is not a solution I can use. Can anyone recommend a fix

You can bind it to an element by using Path=ActualHeight
For this to work don't forget to name the Grid containing the Listbox
Try something like this :
<Grid x:Name = "grdListBoxTest">
<ListBox x:Name="lstBoxTest"
MaxHeight="{Binding ElementName=grdListBoxTest, Path=ActualHeight}">
<!-- Your Listbox Stuff Here -->
</ListBox>
</Grid>
By doing this you link the height of the Listbox to it's parent Grid. That way if the grid's size changes the MaxHeight of the Listbox will change.

ItemsControl ScrollViewer return to initial position after scrolling

I am adding a ScrollViewer to ItemsControl whose ItemTemplate is generated dynamically.
The problem is the ScrollViewersnaps back to its initial position after scrolling. I tried setting the grid container Grid.Row="1" in which the ScrollViewer lies so that it has enough height or set it auto but the problem persist. What am I missing?
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding GameLevel, Converter={StaticResource EnumToStringConverter}}" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock HorizontalAlignment="Right" Grid.Column="1" Style="{StaticResource PhoneTextNormalStyle}">
<Run Text="GAME "/>
<Run Text="{Binding CurrentGame}"/>
<Run Text=" / "/>
<Run Text="{Binding TotalGame}"/>
</TextBlock>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle2Style}">
<Run Text="{Binding CurrentTime, Converter={StaticResource SecondsToMinutesHour}}"/>
</TextBlock>
<TextBlock Foreground="Green" HorizontalAlignment="Right" Grid.Column="1" Margin="9,-7,9,0" Style="{StaticResource PhoneTextTitle2Style}">
<Run Text="{Binding TotalTime, Converter={StaticResource SecondsToMinutesHour}}"/>
</TextBlock>
<ProgressBar Grid.Row="1" Grid.ColumnSpan="2" x:Name="ProgressBar" Value="{Binding ProgressBarTime}" Minimum="0" Maximum="100" VerticalAlignment="Top" CacheMode="BitmapCache"/>
</Grid>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer>
<ItemsControl x:Name="itemsControl" ItemsSource="{Binding Tiles}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Tag="{Binding Index}" Loaded="FrameworkElement_OnLoaded">
<Button Width="{Binding Side}"
Height="{Binding Side}"
Background="{Binding BgColor}"
Tag="{Binding Index}"
Content="{Binding Index}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Click="Button_Click">
<ia:Interaction.Triggers>
<ia:EventTrigger EventName="Loaded">
<tr:SetCanvasPropertiesAction Left="{Binding Left}" Top="{Binding Top}" />
</ia:EventTrigger>
</ia:Interaction.Triggers>
</Button>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
<Grid x:Name="adGrid" Grid.Row="2" HorizontalAlignment="Center"/>
</Grid>

edit:
Ok, the real problem is, that the ItemsPnaelTemplate is a Canvas. The canvas always has Height=0 and Width=0. Items that are placed in the canvas can be bigger, but are still inside the canvas. The scrollviewer only has the Height of the canvas as an idea on how much it should be able to scroll.
You can easily test this by temporarily setting the height of the canvas:
<ItemsPanelTemplate>
<Canvas Height="1500"/>
</ItemsPanelTemplate>
And you will see, that now you can scroll.
Unfortunately I can't think of a solution right now. (Maybe setting the width and height of the itemsControl through code behind by calculating the needed width and height to dispay all items, by taking the items with the highest value for (Top + Side) as Height and (Left + Side) for Width)
original:
Your ContentPanel Grid has this Height="Auto". So the ContentPanel is the same Height as the ScrollViewer and all of it's content and the actual scrolling that you can still do is just the bouncing effect of the ScrollViewer when you get to the end of it's scrolling ability.
Just delete Height="Auto" and you should be fine.

How do I make an empty TextBox stretch vertically?

I want to make a ListBox that arranges items horizontally. Each item should be a TextBox, and it should fill the list box vertically regardless how how much text is there. If you've used Tweetdeck, I'm aiming for a similar effect. Here's what I've got:
<ListBox
Background ="DarkGray"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ItemsSource="{Binding Path=Items}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="5" Margin="2,0,2,0">
<Grid Width="250">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBox
Grid.Row="0"
Grid.Column="0"
VerticalAlignment="Stretch"
Text="{Binding Path=Messages, Mode=OneWay}" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What happens is that the TextBox stubbornly fits the text in it, rather than stretching vertically. I've tried switching the Grid for a DockPanel, which didn't help. I could bind the TextBox's Height property, but that seems unpleasant.
Is there a trick to this that I've missed?

You need to set VerticalContentAlignment="Stretch" on your ListBox.

Listbox is not getting a vertical scrollbar

The main issue people seem to have with the vertical scrollbar not appearing is because they use a stackpanel. I went through my complete visual tree and my listbox is not in a stackpanel anywhere.
Here is the XAML that I use:
<Grid>
<Grid.Resources>
<local:ReportToListItem x:Key="reportToListItem" />
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="3" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox Background="PaleGoldenrod" x:Name="Controller_Domain_Reports_OpenReports">
<ListBox.ItemTemplate>
<DataTemplate>
<ContentControl cal:View.Model="{Binding Converter={StaticResource reportToListItem}}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Border Grid.Row="1" Background="Black" Height="3" HorizontalAlignment="Stretch" />
<ListBox Background="Magenta" Grid.Row="2" x:Name="Controller_Domain_Reports_ClosedReports">
<ListBox.ItemTemplate>
<DataTemplate>
<ContentControl cal:View.Model="{Binding Converter={StaticResource reportToListItem}}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Neither listbox gets a scrollbar if it extends beyond the height of the window for me. What am I overlooking?

Just putting this up to close this off properly:
Do'h.. The shellview had a nice copy pasted list of rowdefinitions all set to auto. Changed the one that contains this view to * and now it works as expected.