Freigeben über

The AutoRotatingGridView: Provides GridView (Landscape) and ListView (Portrait) functionality in one control.

  • Artikel

In Windows Store apps version 8.1, a new UX guideline is to scroll vertically when in Portrait or Minimal width modes, and to scroll horizontally when in Landscape mode. The Visual Studio templates for Windows Store apps 8.0 provided two separate controls to render grid content in Landscape (GridView) and Snapped (ListView).

In the AdventureWorks app updated to 8.1, we considered using two separate controls as we had in the previous release, additionally using the ListView for Portrait mode. However the item data templates in Portrait mode were similar to the Landscape, not Minimal. There were also a few things about Portrait that were different from Minimal that made it hard to use the same ListView for both Portrait and Minimal visual states. Therefore, we were faced with having to use a GridView for Landscape, a ListView for Portrait and finally a separate ListView for Minimal. Yuck!

Enter the AutoRotatingGridView. This control is included in the AdventureWorks reference implementation updated to 8.1. This control listens to the its SizeChanged event and updates its layout between Landscape/Portrait/Minimal based on the windows size and shape. All you have to do is provide the appropriate values for:

  1. Item data template
  2. Items panel
  3. Group style

A really nice feature of the AutoRotatingGridView is that if you don’t provide any of the above values for Portrait or Minimal modes, the control will fall back to the value defined for Landscape.

 <awcontrols:AutoRotatingGridView
    ItemsSource="{Binding Items}"
    ItemTemplate="{StaticResource ProductTemplate}"
    MinimalItemTemplate="{StaticResource ProductTemplateMinimal}">
    <awcontrols:AutoRotatingGridView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Orientation="Vertical" />
        </ItemsPanelTemplate>
    </awcontrols:AutoRotatingGridView.ItemsPanel>
    <awcontrols:AutoRotatingGridView.PortraitItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </awcontrols:AutoRotatingGridView.PortraitItemsPanel>
    <awcontrols:AutoRotatingGridView.MinimalItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel HorizontalAlignment="Stretch" Margin="0,0,5,0"/>
        </ItemsPanelTemplate>
    </awcontrols:AutoRotatingGridView.MinimalItemsPanel>
</awcontrols:AutoRotatingGridView>

The above XAML defines an AutoRotatingGridView with an ItemTemplate, for Landscape mode, and a MinimalItemTemplate. When the control is in Portrait mode, the “ProductTemplate” ItemTemplate will be used since there is no PortraitItemTemplate specified. When the control is in Minimal, the control will use the “ProductTemplateMinimal” as specified by the MinimalItemTemplate property.