Change GridView GroupStyle in VisualState

Question

In my Windows 8.1 WinRT/XAML app I have a grouped GridView with a corresponding GroupStyle:

<GridView ItemsSource="{Binding Source={StaticResource groupedViewSource}}">
    ...
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    ...
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid 
                         Style="{StaticResource NormalWrapGridStyle}" />
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </GridView.GroupStyle>
</GridView>

Now this is the version for a fullscreen view. What I want is to adapt the UI of the GridView for smaller display widths, e.g. in Portrait mode. Thus I want to adapt the GroupStyle.HeaderTemplate for smaller headers and the GroupStyle.Panel for less margin around single GridView groups.

Normally I'm doing such UI adaptions using a different VisualState, but it seems not to be possible to set a different GroupStyle in a VisualState or to change the according templates. Any suggestions?

Answer 1

What's stopping you from using a different Gridview for Portrait orientation? You can detect the current orientation to hide/show appropriate content, see my blog post for more info on how to do this http://www.zubairahmed.net/?p=1032

Answer 2

I am with @Zubair on this one. If you can make multiple layouts for each orientation you have a better solution overall. You can abstract them into user controls if you like. You can reuse the data templates if you like. But handling both orientation AND monitor scaling in a single layout is a needless over-complexity.

Read this: http://blog.jerrynixon.com/2013/12/the-two-ways-to-handle-orientation-in.html

If you must do it like you are wanting, which I do not recommend, you might look at this solution: http://xaml.codeplex.com/SourceControl/latest#MVA/201311_Blend/XamlSpace/ViewModels/MainPageViewModel.cs You can download the whole project if you like. Again, it's not what I would do.