Gu.Wpf.FlipView

A flipview for WPF, handles touch & mouse swipe.

Table of contents

• FlipView
  • IncreaseInAnimation
  • IncreaseOutAnimation
  • DecreaseInAnimation
  • DecreaseOutAnimation
  • CurrentInAnimation
  • CurrentOutAnimation
  • ShowIndex
  • IndexPlacement
  • IndexItemStyle
  • ShowArrows
  • ArrowPlacement
  • ArrowButtonStyle
  • Samples
• TransitionControl
  • ContentChangedEvent
  • OldContent
  • OldContentStyle
  • OutAnimation
  • NewContentStyle
  • InAnimation
• GesturePanel
  • Gestured
  • GestureTracker

FlipView

A selector that transitions when selecteditem changes. Has bindings to NavigationCommands.BrowseBack and NavigationCommands.BrowseForward

IncreaseInAnimation

The animation to use for animating in new content when selected index increased.

IncreaseOutAnimation

The animation to use for animating out old content when selected index increased.

DecreaseInAnimation

The animation to use for animating in new content when selected index decreased.

DecreaseOutAnimation

The animation to use for animating out old content when selected index decreased.

CurrentInAnimation

The resulting animation to use for animating in new content.

CurrentOutAnimation

The resulting animation to use for animating out old content.

ShowIndex

If the index should be visible

IndexPlacement

Where the index should be rendered

IndexItemStyle

A style with TargetType="ListBoxItem" for how to render items in the index.

ShowArrows

Specifies if navigation buttons should be visible.

ArrowPlacement

Specifies where navigation buttons are rendered.

ArrowButtonStyle

A style with TargetType="RepeatButton" for how to render navigation buttons.

Samples

Sample slideshow images:

<gu:FlipView SelectedIndex="0">
    <Image Source="http://i.imgur.com/xT3ay.jpg" />
    <Image Source="http://i.stack.imgur.com/lDlr1.jpg" />
</gu:FlipView>

Sample bound itemssource:

<gu:FlipView x:Name="FlipView"
                    ItemsSource="{Binding People}"
                    SelectedIndex="0">
    <gu:FlipView.ItemTemplate>
        <DataTemplate DataType="{x:Type local:Person}">
            <Border Background="#f1eef6">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} {1}">
                            <Binding Path="FirstName" />
                            <Binding Path="LastName" />
                        </MultiBinding>
                    </TextBlock.Text>
                </TextBlock>
            </Border>
        </DataTemplate>
    </gu:FlipView.ItemTemplate>
</gu:FlipView>

TransitionControl

A contentcontrol that animates content changes. Used in the ControlTemplate for FlipView. The default animation is fade new content in & old content out. When a transition starts the ContentChangedEvent is raised for PART_OldContent and PART_NewContent if they are found in the template.

ContentChangedEvent

Notifies when content changes. When a transition starts the ContentChangedEvent is raised for PART_OldContent and PART_NewContent if they are found in the template.

OldContent

This property holds the old content until the transition animation finishes.

OldContentStyle

The style for the old content. TargetType="ContentPresenter"

OutAnimation

The storyboard used for animating out old content.

NewContentStyle

The style for the new and current content. TargetType="ContentPresenter"

InAnimation

The storyboard used for animating in new content.

Samples

Simple with default animation, fade in & out:

<gu:TransitionControl Content="{Binding SelectedItem, ElementName=ListBox}" 
                            ContentTemplate="{StaticResource SomeDataTemplate}" />

With custom animations

<gu:TransitionControl Content="{Binding SelectedItem, ElementName=ListBox}">
    <gu:TransitionControl.InAnimation>
        <Storyboard>
            <DoubleAnimation BeginTime="0:0:0"
                                Storyboard.TargetProperty="Opacity"
                                From="1"
                                To="0"
                                Duration="0:0:0.3" />
            <DoubleAnimation BeginTime="0:0:0"
                                Storyboard.TargetProperty="(gu:Transform.RelativeOffsetX)"
                                From="0"
                                To="1"
                                Duration="0:0:0.3" />
        </Storyboard>
    </gu:TransitionControl.InAnimation>

    <gu:TransitionControl.OutAnimation>
        <Storyboard>
            <DoubleAnimation BeginTime="0:0:0"
                                Storyboard.TargetProperty="Opacity"
                                From="0"
                                To="1"
                                Duration="0:0:0.3" />
            <DoubleAnimation BeginTime="0:0:0"
                                Storyboard.TargetProperty="(gu:Transform.RelativeOffsetX)"
                                From="-1"
                                To="0"
                                Duration="0:0:0.3" />
        </Storyboard>
    </gu:TransitionControl.OutAnimation>
</gu:TransitionControl>

GesturePanel

A contentcontrol that detects gestures such as swipes. Used in the ContentTemplate for FlipView

Gestured

A routed event that notifies when a gesture was detected.

GestureTracker

Plug in a gesture tracker. The default value is new TouchGestureTracker()

Included in the library is

• TouchGestureTracker
• MouseGestureTracker

The MouseGestureTracker can be useful for testing things if no touch device is available.

Sample:

<gu:GesturePanel Background="Lavender">
    <!-- content goes here -->
</gu:GesturePanel>

Sample with custom tracker:

<gu:GesturePanel.GestureTracker>
    <gu:MouseGestureTracker>
        <gu:MouseGestureTracker.Interpreter>
            <gu:DefaultGestureInterpreter MinSwipeLength="15" 
                                                MinSwipeVelocity="1" 
                                                MaxDeviationFromHorizontal="30" />
        </gu:MouseGestureTracker.Interpreter>
    </gu:MouseGestureTracker>
     <!-- content goes here -->
</gu:GesturePanel.GestureTracker>

Transform

Attached properties for animating transitions.

RelativeOffsetX

Setting the value to 1 results in OffsetX being set to ActualWidth. Does not update when size changes as it is only meant to be suwed during transitions. Animating the value 0 -> 1 means the element animates it's width to the right.

RelativeOffsetY

Setting the value to 1 results in OffsetY being set to ActualHeight. Does not update when size changes as it is only meant to be suwed during transitions. Animating the value 0 -> 1 means the element animates it's height downwards.

OffsetX

The absolute x value.

OffsetY

The absolute y value.

ScaleX

The scale x value.

ScaleY

The scale y value.

Sample

Note that the sample below assumes that TransitionControl.ContentChangedEventis raised on the ContentPresenter to trigger the animation.

<Storyboard x:Key="SlideInAnimation">
    <DoubleAnimation BeginTime="0:0:0"
                        FillBehavior="Stop"
                        Storyboard.TargetProperty="Opacity"
                        From="1"
                        To="0"
                        Duration="0:0:0.3" />
    <DoubleAnimation BeginTime="0:0:0"
                        FillBehavior="Stop"
                        Storyboard.TargetProperty="(a:Transform.RelativeOffsetX)"
                        From="0"
                        To="1"
                        Duration="0:0:0.3" />
    <DoubleAnimation BeginTime="0:0:0"
                     FillBehavior="Stop"
                     Storyboard.TargetProperty="(a:Transform.ScaleY)"
                     From="0"
                     To="1"
                     Duration="0:0:0.3" />
</Storyboard>

<Style x:Key TargetType="{x:Type ContentPresenter}">
    <Setter Property="RenderTransform">
        <Setter.Value>
            <TransformGroup>
                <TranslateTransform X="{Binding Path=(attached:Transform.OffsetX), RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}" 
                                    Y="{Binding Path=(attached:Transform.OffsetY), RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}" />
                <ScaleTransform ScaleX="{Binding Path=(attached:Transform.ScaleX), RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}" 
                                ScaleY="{Binding Path=(attached:Transform.ScaleY), RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}" />
            </TransformGroup>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <EventTrigger RoutedEvent="ContentChanged">
            <BeginStoryboard Storyboard="{StaticResource SlideInAnimation}" />
        </EventTrigger>
    </Style.Triggers>
</Style>