Custom Layout Aware Controls

1
votes

I want to write a custom control and want it to have different Padding if the page is Portrait or Snapped. I noticed that pages inherit from LayoutAwarePage which creates support for the following view states:

  • FullScreenLandscape
  • Filled
  • FullScreenPortrait
  • Snapped

Do I need to add similar code to my new control (It inherits from Control). If not, why does LayoutAwarePage have to do this? Also, Can I just stick the following VisualStateManager into the ControlTemplate of my control and get it to respect the page layout or is this too easy.

<VisualStateGroup x:Name="ApplicationViewStates">
    <VisualState x:Name="FullScreenLandscape"/>
    <VisualState x:Name="Filled"/>
    <VisualState x:Name="FullScreenPortrait">
        <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Padding">
                <DiscreteObjectKeyFrame KeyTime="0" Value="1,2,3,4"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
    <VisualState x:Name="Snapped">
        <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Padding">
                <DiscreteObjectKeyFrame KeyTime="0" Value="5,6,7,8"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
</VisualStateGroup>

EDIT : It looks like controls do not support these states by default and they have to be added. It also appears that ButtonBase does support these states because it uses them in its style.

2
c#.netwindows-8windows-runtimevisualstatemanager

2 Answers

1
votes

What I do with my user controls is to have them inherit LayoutAwarePage. Next place the content in a grid and move the VisualStateGroup inside this grid. Hope this helps, it works for me.

2
votes

If you look on the default "details" page within the windows 8 projects you'll find that it expects you to subscribe to the events on the page. You'll find the following within the flipview's ItemTemplate:

<FlipView.ItemTemplate>
    <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
        <ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}"
            <!-- "Child Controls Here" -->
                <VisualStateManager.VisualStateGroups>
                    <!-- "Visual states manuiplating the child controls above" -->
            </VisualStateManager.VisualStateGroups>
        </ScrollViewer>
    </UserControl>
</FlipView.ItemTemplate>