I have a grid that contains 2 controls, a dynamic grid and an expander. For some reason, with these column definitions, the expander expands but the second inner/dynamic grid doesn't not resize/shrink - i know it's something with the grid but i don't know what.
This is a snippet of the xaml:
<Grid Grid.Column="0" Grid.Row="1"
IsHitTestVisible="{Binding Path=(run),
Converter={StaticResource InverseBooleanConverter}}"
Name="mainGrid"
Background="Transparent"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
MinWidth="{Binding GridWidth}" MinHeight="{Binding GridHeight}"
utils:SizeObserver.Observe="True"
utils:SizeObserver.ObservedHeight="{Binding GridHeight,
Mode=OneWayToSource}"
utils:SizeObserver.ObservedWidth="{Binding GridWidth,
Mode=OneWayToSource}">
<ItemsControl x:Name="eItemControl" ItemsSource="{Binding eCompositeCollection}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding Row}"/>
<Setter Property="Grid.Column" Value="{Binding Column}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Name="wGrid" Grid.Row="1"
MinWidth="{Binding MinWidth, ElementName=mainGrid}"
MinHeight="{Binding MinHeight, ElementName=mainGrid}"
utils:GridHelper.RowCount="{Binding RowCount}"
utils:GridHelper.StarRows="{Binding StarRows}"
utils:GridHelper.ColumnCount="{Binding ColumnCount}"
utils:GridHelper.StarColumns="{Binding StarColumns}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type engine:Wodel}">
<ToggleButton
Tag="{Binding}"
Height="{Binding ElementName=eItemControl,
Path=DataContext.nHWidth}"
Width="{Binding ElementName=eItemControl,
Path=DataContext.nHWidth}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="{Binding ElementName=eItemControl,
Path=DataContext.BMargin}"
Padding="2"
Style="{StaticResource Wbutton}">
</ToggleButton>
</DataTemplate>
<DataTemplate DataType="{x:Type erModel}">
<TextBlock Text="{Binding jName}" Style="{StaticResource GridHeaders}"/>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
<ItemsControl ItemsSource="{Binding huil}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Width="{Binding Width}" Height="{Binding Height}"
Visibility="{Binding Visibility}">
<Rectangle.RenderTransform>
<TranslateTransform X="{Binding X}" Y="{Binding Y}"/>
</Rectangle.RenderTransform>
</Rectangle>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<Expander Grid.Column="1" Grid.Row="1" IsExpanded="False" ExpandDirection="Right">
// SOME EXPANDER CODE
</Expander>
And the original Grid definitions in the parent grid that these are both in:
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
If anyone can please help as I really don't know where to go from here and what the problem may be...
Removing this from the parent grid fixed it.... trying to figure out why... ?
MinWidth="{Binding GridWidth}" MinHeight="{Binding GridHeight}"
Related
I have a CommandListBox which has the Itemsource from a ListCollectionView.
I want to move items within groups up/down and update this in the UI. Right now I have to refresh the whole view to show the new sorting and then the expanders will be closed and the user has to select an expander again.
How can I move items within groups up and down in position in the UI?
controls:CommandListBox Grid.IsSharedSizeScope="True"
Visibility="{Binding IsSearchperformed, Converter={StaticResource BooleanToVisibilityConverter}}"
Grid.Column="2"
HorizontalAlignment="Stretch"
SelectedItem="{Binding SelectedResult}"
ToolbarItems="{Binding ToolBarItems}"
ItemsSource="{Binding SearchResults, UpdateSourceTrigger=PropertyChanged}">
<ItemsControl.Resources>
<ResourceDictionary>
<Style x:Key="GroupHeaderStyle"
TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander x:Name="exp" IsExpanded="{Binding Path=Items[0].IsExpanded}" Margin="0,0,0,30" >
<Expander.Header >
<TextBlock Text="{Binding Path=Name}" FontSize="18" Padding="0" Margin="0"/>
</Expander.Header>
<Grid Margin="20 0 0 0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Column="0"
Grid.Row="0"
Content="{Binding Path=Items[0].DisplayRepresentation.Header}"/>
<ItemsPresenter Grid.Column="0"
Grid.Row="1"/>
</Grid>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</ItemsControl.Resources>
<ItemsControl.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ItemsControl.GroupStyle>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:PropertySearchResult}">
<ContentPresenter Content="{Binding DisplayRepresentation}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</controls:CommandListBox>
public ListCollectionView SearchResults {
get => searchResults;
set => SetField(ref searchResults, value);
}
public string SearchString {
get => searchString;
set {
SetField(ref searchString, value);
SearchResults.Refresh();
}
}
I managed to create this table using stackpanels and itemscontrols but it takes ages to load after all. In my ViewModel I have a list of hotels which contain rooms. Every room for every day in a range I set can be booked or not etc. So in my View I need to show the this data in a dynamic table (?) where every row will have each hotel then each hotel will have each room, then columns of months and every date etc as you can see in picture. At last every square is a button with a tool-tip showing more info and if clicked it has to select the row and column. I managed to do this for the column by setting the bolder color. Everything works but I thing this is not a correct implementation and it also needs to much time to render.
Here is my output
and the xaml
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled">
<Border BorderBrush="Black"
BorderThickness="1"
Visibility="{Binding IsPlanVisible, Converter={StaticResource BoolToVisibilityConverter}}"
VerticalAlignment="Top"
HorizontalAlignment="Left">
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top">
<Border Width="150"
BorderBrush="Black"
BorderThickness="0,0,0,1">
<TextBlock Text="Hotel"
Margin="5,0"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border BorderBrush="Black"
Width="110"
BorderThickness="1,0,1,1">
<TextBlock Text="RoomType" Margin="5"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ItemsControl ItemsSource="{Binding Months}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!--<Border>-->
<StackPanel Orientation="Vertical"
Background="{Binding Background}">
<TextBlock Text="{Binding Name}"
MinHeight="30"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
<ItemsControl ItemsSource="{Binding Days }">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black"
Width="22"
BorderThickness="0,1,1,1">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding}"
HorizontalAlignment="Center" />
<ToggleButton Width="22"
HorizontalAlignment="Center"
IsChecked="{Binding IsSelected,UpdateSourceTrigger=PropertyChanged}"
Command="{Binding DataContext.ToggleDateCommand,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
CommandParameter="{Binding Date}">
<TextBlock Text="{Binding Date, StringFormat='{}{0:dd}' }"
HorizontalAlignment="Center" />
</ToggleButton>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<!--</Border>-->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<!--Hotels Item Control-->
<!--Each Row-->
<ScrollViewer Grid.Row="1"
Margin="0,-1,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled">
<ItemsControl ItemsSource="{Binding FilteredPlanList}"
VerticalAlignment="Top">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<!--Each Hotel-->
<Border BorderBrush="Black"
Width="150"
BorderThickness="0,1,0,0"
HorizontalAlignment="Center">
<TextBlock Text="{Binding Name}"
Padding="5,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<!--Rooms Row-->
<ItemsControl ItemsSource="{Binding Rooms}"
HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!--Each Room Row-->
<StackPanel Orientation="Horizontal">
<Border BorderBrush="Black"
Width="109"
BorderThickness="1,1,0,0"
HorizontalAlignment="Center">
<TextBlock Text="{Binding RoomType }"
Margin="0,1"
HorizontalAlignment="Center" />
</Border>
<!--Rectangles ItemSource-->
<ItemsControl ItemsSource="{Binding BookedInfoList}"
HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Background="{Binding Converter={StaticResource BConverter}}"
HorizontalAlignment="Stretch"
Width="22"
ToolTipService.IsEnabled="{Binding Reservation,Converter={StaticResource ToolTipVis}}"
BorderBrush="{Binding IsDateSelected,Converter={StaticResource BoolToBorderColorConverter}}"
BorderThickness="1,0,0,1">
<Button.InputBindings>
<MouseBinding Gesture="LeftDoubleClick"
Command="{ Binding DataContext.ViewReservationCommand,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
CommandParameter="{Binding Reservation}" />
</Button.InputBindings>
<Button.ToolTip>
<StackPanel>
<Grid Margin="0,0,0,5"
DataContext="{Binding Reservation}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170" />
<ColumnDefinition Width="130" />
</Grid.ColumnDefinitions>
<!--Row 0-->
<Border BorderBrush="Black"
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Stretch"
BorderThickness="1">
<TextBlock Text="{Binding Dates}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="5,0" />
</Border>
<Border BorderBrush="Black"
Grid.Row="0"
HorizontalAlignment="Stretch"
Grid.Column="1"
BorderThickness="0,1,1,1"></Border>
<Border BorderBrush="Black"
Grid.Row="1"
Grid.Column="0"
HorizontalAlignment="Stretch"
BorderThickness="1,0,1,1">
<TextBlock Margin="5,0"
HorizontalAlignment="Center"
Text="{Binding Room.Hotel}" />
</Border>
<Border BorderBrush="Black"
Grid.Row="1"
HorizontalAlignment="Stretch"
Grid.Column="1"
BorderThickness="0,0,1,1">
<TextBlock Margin="5,0"
HorizontalAlignment="Center"
Text="{Binding Room.RoomType}" />
</Border>
<!--Row 2-->
<Border BorderBrush="Black"
Grid.Row="2"
Grid.Column="0"
HorizontalAlignment="Stretch"
Grid.ColumnSpan="2"
BorderThickness="1,0,1,1">
<TextBlock Text="{Binding Names}"
Margin="5,0"
FontSize="10"
HorizontalAlignment="Left" />
</Border>
</Grid>
</StackPanel>
</Button.ToolTip>
</Button>
<!--</Border>
</Border>-->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</Border>
</ScrollViewer>
<Grid Name="WeightGrid" Grid.RowSpan="2" SnapsToDevicePixels="True" Grid.ColumnSpan="2" Margin="{Binding WeigntGridMargin}" MouseDown="WeigntGridWrap_OnMouseDown" MouseMove="WeigntGridWrap_OnMouseMove" MouseUp="WeigntGridWrap_OnMouseUp">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
...
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<TranslateTransform x:Name="weightTT"/>
</Grid.RenderTransform>
<StackPanel Grid.Column="0" Width="100" Height="75">
<StackPanel.Background>
<ImageBrush ImageSource="/Size.WPF;component/Assets/ruller-bg.png" />
</StackPanel.Background>
<TextBlock Margin="0, 42, 0, 0" Foreground="#c0b6d1" HorizontalAlignment="Center" FontSize="18">0</TextBlock>
</StackPanel>
<StackPanel Grid.Column="1" Width="100" Height="75">
<StackPanel.Background>
<ImageBrush ImageSource="/Size.WPF;component/Assets/ruller-bg.png" />
</StackPanel.Background>
<TextBlock Margin="0, 42, 0, 0" Foreground="#c0b6d1" HorizontalAlignment="Center" FontSize="18">1</TextBlock>
</StackPanel>
<StackPanel Grid.Column="2" Width="100" Height="75">
<StackPanel.Background>
<ImageBrush ImageSource="/Size.WPF;component/Assets/ruller-bg.png" />
</StackPanel.Background>
<TextBlock Margin="0, 42, 0, 0" Foreground="#c0b6d1" HorizontalAlignment="Center" FontSize="18">2</TextBlock>
</StackPanel>
...
</Grid>
I have Grid with many columns. Every column is StackPanel with different column number and with different number in TextBlock. To decrease amount of code I want to use ItemsContol or something like this to build grid columns. But one problem - How can I bind ColumnNumber to ItemsControl Item? Possibly there is solution Bind Grid.Row / Grid.Column inside a DataTemplate But another problem - How can set amount of Columns?
UPD :
<ItemsControl Name="WeightItemsControl" ItemsSource="{Binding Cells}" Grid.RowSpan="2" Grid.ColumnSpan="2">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid Name="WeightGrid" SnapsToDevicePixels="True" Margin="{Binding WeigntGridMargin}" MouseDown="WeigntGridWrap_OnMouseDown" MouseMove="WeigntGridWrap_OnMouseMove" MouseUp="WeigntGridWrap_OnMouseUp">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding GridRow}" />
<Setter Property="Grid.Column" Value="{Binding GridColumn}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
This is what I have now. But I still don't know how to set Amount of columns that should be created to it ItemsControl (Currently it's just binded to some collection Cells but it should be just number as amount of columns).
<ItemsControl Name="icTodoList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Title}" />
<ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="{Binding Completion}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
you can modify the code as you want..or if you don't use the binding you can simply do like this
<ItemsControl>
<system:String>ItemsControl Item #1</system:String>
<system:String>ItemsControl Item #2</system:String>
<system:String>ItemsControl Item #3</system:String>
<system:String>ItemsControl Item #4</system:String>
<system:String>ItemsControl Item #5</system:String>
</ItemsControl>
I have a small problem how to set the ItemsControl Property Width. I use Datatemplates to fill my ItemControl. Every Item is a small Grid (Text and Rectangle) in a Canvas.
When I use the ItemsControl in a Window the ActualWidth (and DesiredWidth) is always 0.0.
Only when i hardcode the Width Property of the Canvas the ItemsControl has a size. But that is far from perfect. I would rather like when the Control gets the width (or DesiredWidth) from the biggest Item.
Here is a short code sample:
<ItemsControl ItemsSource="{Binding mySource}"
ItemTemplate="{DynamicResource myTemplate}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type type:myType}" x:Key="myTemplate">
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="1"
Height="1"
HorizontalAlignment="Stretch"
Fill="Blue"/>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="3"
Text="{Binding Text}"
FontWeight="Bold"
TextWrapping="Wrap"
TextAlignment="Left"/>
</Grid>
</DataTemplate>
<v:PositionMultiConverter x:Key="PositionMultiConverter"/>
</ItemsControl.Resources>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Bottom">
<Setter.Value>
<MultiBinding Converter="{StaticResource ResourceKey=PositionMultiConverter}">
<Binding Path="Position"/>
<Binding Path="ActualHeight" ElementName="canvas"/>
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas x:Name="canvas" IsItemsHost="True" Width="20"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
I'm trying to create a custom ListBox. That receives a list with three properties:
SubjectName
Problems
AverageScore
The property Problems is another list which contains several Problem class. This is the data template I'm creating.
<DataTemplate x:Key="SubjectDataTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="5">
<StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold" >
<TextBlock Text="{Binding Path=ProblemNumber, FallbackValue=ProblemNumber}" />
<TextBlock Text="{Binding Path=SubjectName, FallbackValue=SubjectName}" Padding="3,0,0,0"/>
</StackPanel>
<TextBlock Text="{Binding Path=AverageScore, FallbackValue=AverageScore}" />
<ItemsControl ItemsSource="{Binding Problems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Background="Aqua" Orientation="Vertical" Margin="5">
<Rectangle Fill="Red" Height="20" Width="20" />
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<!--<TextBlock Text="{Binding Path=Role, FallbackValue=Role}" />-->
</StackPanel>
</Grid>
</DataTemplate>
But I've got a problem trying to show Problems data. I'm trying to show each element from Problems list in a stack panel with ortientation horizontal, but I get each stack panel separated.
I need to put the red rectangles inside the stack control. For example, the ten rectangles from Times Tables should be in one only stack panel.
UPDATE 1:
Something like this:
According to the graph, the first stack panel (background aqua) must contain 10 red rectangles.
UPDATE 2:
I'm verifying showing the data from problem in a textBlock and it works:
<ItemsControl ItemsSource="{Binding Problems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding IsCorrect}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Gainsboro" Margin="5" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
You need to use nested ItemsControls - One for the Vertical list and one for the Horizontal List.
<ItemsControl ItemsSource="{Binding Problems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Problems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Height="20" Width="20" Margin="1,0">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="Red" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsCorrect}" Value="True">
<Setter Property="Fill" Value="Blue" />
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Background="Aqua" Margin="5" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
In your ItemsControl.ItemsPanel make the StackPanel orientation Horizoantal
Is this what you are looking for?
UPDATED:
<DataTemplate x:Key="SubjectDataTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="5">
<StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold" >
<TextBlock Text="{Binding Path=ProblemNumber, FallbackValue=ProblemNumber}" />
<TextBlock Text="{Binding Path=SubjectName, FallbackValue=SubjectName}" Padding="3,0,0,0"/>
</StackPanel>
<TextBlock Text="{Binding Path=AverageScore, FallbackValue=AverageScore}" />
<ItemsControl ItemsSource="{Binding Problems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Rectangle Fill="Red" Height="20" Width="20" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Background="Aqua" Orientation="Horizontal" Margin="5"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</Grid>
</DataTemplate>