Declarative GridView in XAML in WinRT - xaml

Question

Is there a way to define a GridView purely declaratively in XAML? Every example I see defines the Category/Group Name value in code behind, then each item has a Title / Subtitle. I would really like to figure out a way to do something like the following:
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.Row="1"
Margin="0,-3,0,0"
Padding="116,0,40,46"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
Content="{Binding Tag}"
Style="{StaticResource TextButtonStyle}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
<GridView.Items>
<Grid x:Name="tab1" Tag="Tab 1" AutomationProperties.Name="Group Title" HorizontalAlignment="Left" Width="250" Height="250">
<!-- Tab COntent -->
</Grid>
<Grid x:Name="tab2" Tag="Tab 2" AutomationProperties.Name="Tab 2" HorizontalAlignment="Left" Width="250" Height="250">
<!-- Tab Content -->
</Grid>
</GridView.Items>
</GridView>
Unfortunately this example doesn't work. I can't seem to figure out how to set a Group name declaratively. Thank you for any insights.

Answer 1

I think the following method is great way to customize any Gridview.
*If you like to implement multiple group style in your Grid, pls do this work:
Step 1. Create a GroupSelector class and override SelectStyleCore function:
public class GroupStyleSelector : StyleSelector
{
public Style GroupStyle1 { get; set; }
public Style GroupStyle2 { get; set; }
protected override Windows.UI.Xaml.Style SelectStyleCore(object item, Windows.UI.Xaml.DependencyObject container)
{
var viewGroup = item as ICollectionViewGroup;
if (viewGroup != null)
{
//var groupModel = viewGroup.Group as YourGroupModel;
if (condition1)
{
return GroupStyle1;
}
else if (condition2)
{
return GroupStyle2;
}
}
}
}
Step 2. in XAML resource, add these code:
<Style x:Key="YourGroupStyle1" TargetType="GroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<!-- Add your custom layout here for Group style 1 -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="YourGroupStyle2" TargetType="GroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<!-- Add your custom layout here for Group style 1 -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<customstyle:GroupStyleSelector x:Key="GroupStyleSelector"
GroupStyle1="{StaticResource GroupStyle1}"
GroupStyle2="{StaticResource GroupStyle2}"/>
customstyle is link to your namespace that store GroupStyleSelector class.
Step 3. Apply style selector for GridView control
If you you want to customize HeaderTemplate pls let me know, if not user current as GridApp sample from Microsoft.
If you like to customize each item layout on a group, you also do simiar to GroupStyleSelector:
Create DataTemplateSeletor (inherit from TemplateSelector) then assign it on the GridView control
<GridView ItemTemplateSelector="{StaticResource ItemTemplateSelector}">
<GridView.GroupStyle>
<GroupStyle ContainerStyleSelector="{StaticResource GroupStyleSelector}">
<GroupStyle.HeaderTemplate .../>
</GridView.GroupStyle>
Hope that my guide is clear for you.
If any quesion, pls discuss.