Question

I have a grid view with custom groups.
In MyTemplateSelector : DataTemplateSelector I define what template to use.
Using this post I’ve created the following layout.

How I can resize the first item in “News 1” to fill the whole available content?

Here is code of my grid:

class ResizableGridView : GridView
    {
        protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
        {
            var viewModel = item as IResizable;

            if (viewModel != null && viewModel.Width != 0 && viewModel.Height != 0)
            {
                element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 2);
                element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 2);
            }

            base.PrepareContainerForItemOverride(element, item);
        }
    }


 <resizeableGrid:ResizableGridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"
            Grid.Column="3"
            Padding="116,137,40,46"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplateSelector="{StaticResource mySelector}"
            SelectionMode="None"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick">

And the code of the item template that is used.

<DataTemplate x:Key="tmp170x170ItemTemplate">
            <Grid HorizontalAlignment="Left" Width="170" Height="170">
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                    <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                </Border>
                <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                    <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
                    <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
                </StackPanel>
            </Grid>
        </DataTemplate>

Answer 1

It is important to set static grid’s cell Height and Width, like this:

 <GroupStyle.Panel>
    <ItemsPanelTemplate>
          <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" ItemHeight="10" ItemWidth="10"/>
    </ItemsPanelTemplate>
 </GroupStyle.Panel>

And now, in code, while setting ColumnSpan/RowSpan you can easily set custom size. So if you want cell to be 500 x 200, you should set:

 element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, 50);
 element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, 20);

And, to remove Height/Width on DataTemplate:

<DataTemplate x:Key="VariableSizeItemTemplate">
            <Grid HorizontalAlignment="Left">
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                    <Image Source="{Binding Image}" Stretch="UniformToFill" HorizontalAlignment="Center" AutomationProperties.Name="{Binding Title}"/>
                </Border>
                <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                    <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
                    <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
                </StackPanel>
            </Grid>
        </DataTemplate>