Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/GuOrg/Gu.Wpf.FlipView

A flipview for WPF, handles touch & mouse swipe.
https://github.com/GuOrg/Gu.Wpf.FlipView

Last synced: 13 days ago
JSON representation

A flipview for WPF, handles touch & mouse swipe.

Lists

README

        

# Gu.Wpf.FlipView

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![NuGet](https://img.shields.io/nuget/v/Gu.Wpf.FlipView.svg)](https://www.nuget.org/packages/Gu.Wpf.FlipView/)
[![Build Status](https://dev.azure.com/guorg/Gu.Wpf.FlipView/_apis/build/status/GuOrg.Gu.Wpf.FlipView?branchName=master)](https://dev.azure.com/guorg/Gu.Wpf.FlipView/_build/latest?definitionId=12&branchName=master)
[![Build status](https://ci.appveyor.com/api/projects/status/tp8vm8xlvtakfat9/branch/master?svg=true)](https://ci.appveyor.com/project/JohanLarsson/gu-wpf-flipview/branch/master)

A flipview for WPF, handles touch & mouse swipe.

# Table of contents
- [FlipView](#flipview)
- [IncreaseInAnimation](#increaseinanimation)
- [IncreaseOutAnimation](#increaseoutanimation)
- [DecreaseInAnimation](#decreaseinanimation)
- [DecreaseOutAnimation](#decreaseoutanimation)
- [CurrentInAnimation](#currentinanimation)
- [CurrentOutAnimation](#currentoutanimation)
- [ShowIndex](#showindex)
- [IndexPlacement](#indexplacement)
- [IndexItemStyle](#indexitemstyle)
- [ShowArrows](#showarrows)
- [ArrowPlacement](#arrowplacement)
- [ArrowButtonStyle](#arrowbuttonstyle)
- [Samples](#samples)
- [TransitionControl](#transitioncontrol)
- [ContentChangedEvent](#contentchangedevent)
- [OldContent](#oldcontent)
- [OldContentStyle](#oldcontentstyle)
- [OutAnimation](#outanimation)
- [NewContentStyle](#newcontentstyle)
- [InAnimation](#inanimation)
- [GesturePanel](#gesturepanel)
- [Gestured](#gestured)
- [GestureTracker](#gesturetracker)

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

![animation](https://user-images.githubusercontent.com/1640096/27380318-f546c126-567e-11e7-8cb6-91463b74641f.gif)

## 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:

```xaml


```

Sample bound itemssource:

```xaml














```

# 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:

```xaml

```

### With custom animations

```xaml











```

# 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:
```xaml

```

Sample with custom tracker:
```xaml






```

# 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.ContentChangedEvent`is raised on the `ContentPresenter` to trigger the animation.

```xaml



<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>

```