How do I place a border around a VariableSizedWrapGrid? - xaml

Question

This one is driving me crazy and I am sure there must be a straightforward answer (that I haven't been able to spot).
I have a grouped gridview control which uses a VariableSizedWrapGrid for the grouped panel. The designs approved by my client include a top and bottom border on each group. I thought I could do one of two things:
Specify the border on the VariableSizedWrapGrid; or
Create a line in the GroupStyle.HeaderTemplate and apply the same to a footer.
So it seems I can't do either of those things as VariableSizedWrapGrid inherits from Panel which doesn't support the border property (only adding the border as a child element) and the GridView class doesn't include a grouped footer property. Is there a way of applying a border to the VariableSizedWrapGrid? Xaml is quite new to me as I normally specialise in server side code rather than presentation.

Answer 1

If I've understood you correctly they what you are trying to achieve is something like this:
This is the code for that, and it should work with a variablesizegrid as well. If I've missunderstood please add some more details and the code you already have so we can see how we can best help you.
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="App14.ItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App14"
xmlns:data="using:App14.Data"
xmlns:common="using:App14.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource x:Name="groups" IsSourceGrouped="true" />
</Page.Resources>
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.Resources>
<DataTemplate x:Key="groupTemplate">
<Grid>
<Border BorderBrush="White" BorderThickness="0,10" Padding="20">
<StackPanel >
<Border Background="DarkGreen" Padding="10" Margin="10">
<TextBlock Text="{Binding Name}"/>
</Border>
<Border Background="Yellow" Padding="10" Margin="10">
<Image Width="100" Height="100" Stretch="Uniform" Source="{Binding Image}"/>
</Border>
</StackPanel>
</Border>
</Grid>
</DataTemplate>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
ItemsSource="{Binding Source={StaticResource groups}}"
ItemTemplate="{StaticResource groupTemplate}">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="10">
<TextBlock Text='{Binding Key}' Foreground="White" FontSize="25" Margin="5" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</Grid>
and the code:
namespace App14
{
public sealed partial class ItemsPage : App14.Common.LayoutAwarePage
{
public ItemsPage()
{
this.InitializeComponent();
groups.Source = GetAllGrouped(LoadCats());
}
public IEnumerable<IGrouping<string, FakeCat>> GetAllGrouped(IEnumerable<FakeCat> cats)
{
return cats.OrderBy(x => x.Name).GroupBy(x => x.Name);
}
IEnumerable<FakeCat> LoadCats()
{
return new List<FakeCat>
{
new FakeCat {Name = "Naomi", Image = "../Assets/cat1.jpg"},
new FakeCat {Name = "Naomi", Image = "../Assets/cat2.jpg"},
new FakeCat {Name = "Peter", Image = "../Assets/cat3.jpg"},
new FakeCat {Name = "Spencer", Image = "../Assets/cat4.jpg"},
};
}
}
public class FakeCat
{
public string Name { get; set; }
public string Image { get; set; }
public int ItemSize { get; set; }
}
}

Answer 2

Problem solved! I guess I was having trouble figuring out what controls the templates for the group rather than the actual items. I would like to take credit for solving this, but the answer came courtesy of a member of a LinkedIn group. The following style works when applied to the GridView's GroupStyle's ContainerStyle:
<Style x:Key="GroupItemStyle1" TargetType="GroupItem">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0"/>
<Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="1" Fill="White" Margin="5,0,15,0" />
<ItemsControl x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" Grid.Row="1" TabIndex="1" TabNavigation="Once">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<ReorderThemeTransition/>
<EntranceThemeTransition IsStaggeringEnabled="False"/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
</ItemsControl>
<Rectangle Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="1" Fill="White" Margin="5,0,15,0" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then in the XAML for the GridView:
<GridView.GroupStyle>
<GroupStyle HidesIfEmpty="True" ContainerStyle="{StaticResource GroupItemStyle1}">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<!-- Header Template here -->
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,0,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>