A flipview for WPF, handles touch & mouse swipe.
A selector that transitions when selecteditem changes.
Has bindings to NavigationCommands.BrowseBack and NavigationCommands.BrowseForward
The animation to use for animating in new content when selected index increased.
The animation to use for animating out old content when selected index increased.
The animation to use for animating in new content when selected index decreased.
The animation to use for animating out old content when selected index decreased.
The resulting animation to use for animating in new content.
The resulting animation to use for animating out old content.
If the index should be visible
Where the index should be rendered
A style with TargetType="ListBoxItem" for how to render items in the index.
Specifies if navigation buttons should be visible.
Specifies where navigation buttons are rendered.
A style with TargetType="RepeatButton" for how to render navigation buttons.
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>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.
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.
This property holds the old content until the transition animation finishes.
The style for the old content. TargetType="ContentPresenter"
The storyboard used for animating out old content.
The style for the new and current content. TargetType="ContentPresenter"
The storyboard used for animating in new content.
<gu:TransitionControl Content="{Binding SelectedItem, ElementName=ListBox}"
ContentTemplate="{StaticResource SomeDataTemplate}" /><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>A contentcontrol that detects gestures such as swipes. Used in the ContentTemplate for FlipView
A routed event that notifies when a gesture was detected.
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>Attached properties for animating transitions.
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.
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.
The absolute x value.
The absolute y value.
The scale x value.
The scale y value.
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>