You have two mechanisms to change your view layout depending on the screen mode:
  1. Change an element visibility,
  2. Change an element style.
The first one is useful in simple scenarios. But the second one is more powerful and effective.

The following sample shows how to hide an element in the snapped mode and show another one:
<TextBlock behaviors:OrientationBehavior.Orientations="Landscape,Filled,Portrait" Text="Not snapped"/>
<TextBlock behaviors:OrientationBehavior.Orientations="Snapped" Text="Snapped"/>


The following sample changes a list orientation depending on the screen mode:
<GridView ItemsSource="{Binding YourItems}">

    <behaviors:OrientationBehavior.LandscapeStyle>
        <!-- This style will be applied in landscape, filled and portrait modes. -->
        <Style TargetType="ListViewBase"/>
    </behaviors:OrientationBehavior.LandscapeStyle>

    <behaviors:OrientationBehavior.SnappedStyle>
        <!-- This style will be applied in the snapped mode. -->
        <Style TargetType="ListViewBase">
            <Style.Setters>
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
                <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
                <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
    </behaviors:OrientationBehavior.SnappedStyle>
</GridView>

There are some points I should note:
  1. You should not use the Style property if you use this feature.
  2. If you specified a style for at least one screen mode then one of these styles will be applied always.
  3. For each screen mode each of these styles has a priority. So if you have style for portrait and snapped modes then portrait style is used for landscape and filled modes. If you specified only one style then it will be used for all modes.

Using screen modes' styles and ContentControl/ContentPresenter you can change your view template completely. This may work faster than visibility in some scenarios like alternating layout of a long list elements.

Last edited Jan 24, 2013 at 2:50 AM by mglukhankov, version 2

Comments

No comments yet.