{"id":13640416,"url":"https://github.com/GuOrg/Gu.Wpf.FlipView","last_synced_at":"2025-04-20T02:33:27.503Z","repository":{"id":20903932,"uuid":"24191597","full_name":"GuOrg/Gu.Wpf.FlipView","owner":"GuOrg","description":"A flipview for WPF, handles touch \u0026 mouse swipe.","archived":false,"fork":false,"pushed_at":"2023-12-25T15:26:30.000Z","size":755,"stargazers_count":55,"open_issues_count":8,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-04T14:02:35.415Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GuOrg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-09-18T14:35:23.000Z","updated_at":"2025-03-29T02:49:45.000Z","dependencies_parsed_at":"2024-01-14T11:05:21.379Z","dependency_job_id":"5153d729-a84f-4e7f-a7f9-4c7962e61780","html_url":"https://github.com/GuOrg/Gu.Wpf.FlipView","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuOrg%2FGu.Wpf.FlipView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuOrg%2FGu.Wpf.FlipView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuOrg%2FGu.Wpf.FlipView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuOrg%2FGu.Wpf.FlipView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GuOrg","download_url":"https://codeload.github.com/GuOrg/Gu.Wpf.FlipView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249840694,"owners_count":21332925,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T01:01:10.972Z","updated_at":"2025-04-20T02:33:27.218Z","avatar_url":"https://github.com/GuOrg.png","language":"C#","readme":"# Gu.Wpf.FlipView\n\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n[![NuGet](https://img.shields.io/nuget/v/Gu.Wpf.FlipView.svg)](https://www.nuget.org/packages/Gu.Wpf.FlipView/)\n[![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\u0026branchName=master)\n[![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)\n\nA flipview for WPF, handles touch \u0026amp; mouse swipe.\n\n# Table of contents\n- [FlipView](#flipview)\n  - [IncreaseInAnimation](#increaseinanimation)\n  - [IncreaseOutAnimation](#increaseoutanimation)\n  - [DecreaseInAnimation](#decreaseinanimation)\n  - [DecreaseOutAnimation](#decreaseoutanimation)\n  - [CurrentInAnimation](#currentinanimation)\n  - [CurrentOutAnimation](#currentoutanimation)\n  - [ShowIndex](#showindex)\n  - [IndexPlacement](#indexplacement)\n  - [IndexItemStyle](#indexitemstyle)\n  - [ShowArrows](#showarrows)\n  - [ArrowPlacement](#arrowplacement)\n  - [ArrowButtonStyle](#arrowbuttonstyle)\n  - [Samples](#samples)\n- [TransitionControl](#transitioncontrol)\n  - [ContentChangedEvent](#contentchangedevent)\n  - [OldContent](#oldcontent)\n  - [OldContentStyle](#oldcontentstyle)\n  - [OutAnimation](#outanimation)\n  - [NewContentStyle](#newcontentstyle)\n  - [InAnimation](#inanimation)\n- [GesturePanel](#gesturepanel)\n  - [Gestured](#gestured)\n  - [GestureTracker](#gesturetracker)\n\n# FlipView\nA selector that transitions when selecteditem changes.\nHas bindings to `NavigationCommands.BrowseBack` and `NavigationCommands.BrowseForward`\n\n![animation](https://user-images.githubusercontent.com/1640096/27380318-f546c126-567e-11e7-8cb6-91463b74641f.gif)\n\n## IncreaseInAnimation\nThe animation to use for animating in new content when selected index increased.\n\n## IncreaseOutAnimation\nThe animation to use for animating out old content when selected index increased.\n\n## DecreaseInAnimation\nThe animation to use for animating in new content when selected index decreased.\n\n## DecreaseOutAnimation\nThe animation to use for animating out old content when selected index decreased.\n\n## CurrentInAnimation\nThe resulting animation to use for animating in new content.\n\n## CurrentOutAnimation\nThe resulting animation to use for animating out old content.\n\n## ShowIndex\nIf the index should be visible\n\n## IndexPlacement\nWhere the index should be rendered\n\n## IndexItemStyle\nA style with `TargetType=\"ListBoxItem\"` for how to render items in the index.\n\n## ShowArrows\nSpecifies if navigation buttons should be visible.\n\n## ArrowPlacement\nSpecifies where navigation buttons are rendered.\n\n## ArrowButtonStyle\nA style with `TargetType=\"RepeatButton\"` for how to render navigation buttons.\n\n## Samples\n\nSample slideshow images:\n\n```xaml\n\u003cgu:FlipView SelectedIndex=\"0\"\u003e\n    \u003cImage Source=\"http://i.imgur.com/xT3ay.jpg\" /\u003e\n    \u003cImage Source=\"http://i.stack.imgur.com/lDlr1.jpg\" /\u003e\n\u003c/gu:FlipView\u003e\n```\n\nSample bound itemssource:\n\n```xaml\n\u003cgu:FlipView x:Name=\"FlipView\"\n                    ItemsSource=\"{Binding People}\"\n                    SelectedIndex=\"0\"\u003e\n    \u003cgu:FlipView.ItemTemplate\u003e\n        \u003cDataTemplate DataType=\"{x:Type local:Person}\"\u003e\n            \u003cBorder Background=\"#f1eef6\"\u003e\n                \u003cTextBlock HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"\u003e\n                    \u003cTextBlock.Text\u003e\n                        \u003cMultiBinding StringFormat=\"{}{0} {1}\"\u003e\n                            \u003cBinding Path=\"FirstName\" /\u003e\n                            \u003cBinding Path=\"LastName\" /\u003e\n                        \u003c/MultiBinding\u003e\n                    \u003c/TextBlock.Text\u003e\n                \u003c/TextBlock\u003e\n            \u003c/Border\u003e\n        \u003c/DataTemplate\u003e\n    \u003c/gu:FlipView.ItemTemplate\u003e\n\u003c/gu:FlipView\u003e\n```\n\n# TransitionControl\nA contentcontrol that animates content changes. Used in the `ControlTemplate` for `FlipView`.\nThe default animation is fade new content in \u0026 old content out.\nWhen a transition starts the ContentChangedEvent is raised for `PART_OldContent` and `PART_NewContent` if they are found in the template.\n\n## ContentChangedEvent\nNotifies when content changes. When a transition starts the ContentChangedEvent is raised for `PART_OldContent` and `PART_NewContent` if they are found in the template.\n\n## OldContent\nThis property holds the old content until the transition animation finishes.\n\n## OldContentStyle \nThe style for the old content. TargetType=\"ContentPresenter\"\n\n## OutAnimation\nThe storyboard used for animating out old content.\n\n## NewContentStyle \nThe style for the new and current content. TargetType=\"ContentPresenter\"\n\n## InAnimation\nThe storyboard used for animating in new content.\n\n## Samples\n\n### Simple with default animation, fade in \u0026 out:\n\n```xaml\n\u003cgu:TransitionControl Content=\"{Binding SelectedItem, ElementName=ListBox}\" \n                            ContentTemplate=\"{StaticResource SomeDataTemplate}\" /\u003e\n```\n\n### With custom animations\n\n```xaml\n\u003cgu:TransitionControl Content=\"{Binding SelectedItem, ElementName=ListBox}\"\u003e\n    \u003cgu:TransitionControl.InAnimation\u003e\n        \u003cStoryboard\u003e\n            \u003cDoubleAnimation BeginTime=\"0:0:0\"\n                                Storyboard.TargetProperty=\"Opacity\"\n                                From=\"1\"\n                                To=\"0\"\n                                Duration=\"0:0:0.3\" /\u003e\n            \u003cDoubleAnimation BeginTime=\"0:0:0\"\n                                Storyboard.TargetProperty=\"(gu:Transform.RelativeOffsetX)\"\n                                From=\"0\"\n                                To=\"1\"\n                                Duration=\"0:0:0.3\" /\u003e\n        \u003c/Storyboard\u003e\n    \u003c/gu:TransitionControl.InAnimation\u003e\n\n    \u003cgu:TransitionControl.OutAnimation\u003e\n        \u003cStoryboard\u003e\n            \u003cDoubleAnimation BeginTime=\"0:0:0\"\n                                Storyboard.TargetProperty=\"Opacity\"\n                                From=\"0\"\n                                To=\"1\"\n                                Duration=\"0:0:0.3\" /\u003e\n            \u003cDoubleAnimation BeginTime=\"0:0:0\"\n                                Storyboard.TargetProperty=\"(gu:Transform.RelativeOffsetX)\"\n                                From=\"-1\"\n                                To=\"0\"\n                                Duration=\"0:0:0.3\" /\u003e\n        \u003c/Storyboard\u003e\n    \u003c/gu:TransitionControl.OutAnimation\u003e\n\u003c/gu:TransitionControl\u003e\n```\n\n# GesturePanel\nA contentcontrol that detects gestures such as swipes. Used in the `ContentTemplate` for `FlipView`\n\n## Gestured\nA routed event that notifies when a gesture was detected. \n\n## GestureTracker\nPlug in a gesture tracker. \nThe default value is `new TouchGestureTracker()`\n\nIncluded in the library is\n- TouchGestureTracker\n- MouseGestureTracker\n\nThe MouseGestureTracker can be useful for testing things if no touch device is available.\n\nSample:\n```xaml\n\u003cgu:GesturePanel Background=\"Lavender\"\u003e\n    \u003c!-- content goes here --\u003e\n\u003c/gu:GesturePanel\u003e\n```\n\nSample with custom tracker:\n```xaml\n\u003cgu:GesturePanel.GestureTracker\u003e\n    \u003cgu:MouseGestureTracker\u003e\n        \u003cgu:MouseGestureTracker.Interpreter\u003e\n            \u003cgu:DefaultGestureInterpreter MinSwipeLength=\"15\" \n                                                MinSwipeVelocity=\"1\" \n                                                MaxDeviationFromHorizontal=\"30\" /\u003e\n        \u003c/gu:MouseGestureTracker.Interpreter\u003e\n    \u003c/gu:MouseGestureTracker\u003e\n     \u003c!-- content goes here --\u003e\n\u003c/gu:GesturePanel.GestureTracker\u003e\n```\n\n# Transform\n\nAttached properties for animating transitions.\n\n## RelativeOffsetX\nSetting 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.\nAnimating the value 0 -\u003e 1 means the element animates it's width to the right.\n\n## RelativeOffsetY\nSetting 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.\nAnimating the value 0 -\u003e 1 means the element animates it's height downwards.\n\n## OffsetX\nThe absolute x value.\n\n## OffsetY\nThe absolute y value.\n\n## ScaleX\nThe scale x value.\n\n## ScaleY\nThe scale y value.\n\n## Sample\nNote that the sample below assumes that `TransitionControl.ContentChangedEvent`is raised on the `ContentPresenter` to trigger the animation.\n\n```xaml\n\u003cStoryboard x:Key=\"SlideInAnimation\"\u003e\n    \u003cDoubleAnimation BeginTime=\"0:0:0\"\n                        FillBehavior=\"Stop\"\n                        Storyboard.TargetProperty=\"Opacity\"\n                        From=\"1\"\n                        To=\"0\"\n                        Duration=\"0:0:0.3\" /\u003e\n    \u003cDoubleAnimation BeginTime=\"0:0:0\"\n                        FillBehavior=\"Stop\"\n                        Storyboard.TargetProperty=\"(a:Transform.RelativeOffsetX)\"\n                        From=\"0\"\n                        To=\"1\"\n                        Duration=\"0:0:0.3\" /\u003e\n    \u003cDoubleAnimation BeginTime=\"0:0:0\"\n                     FillBehavior=\"Stop\"\n                     Storyboard.TargetProperty=\"(a:Transform.ScaleY)\"\n                     From=\"0\"\n                     To=\"1\"\n                     Duration=\"0:0:0.3\" /\u003e\n\u003c/Storyboard\u003e\n\n\u003cStyle x:Key TargetType=\"{x:Type ContentPresenter}\"\u003e\n    \u003cSetter Property=\"RenderTransform\"\u003e\n        \u003cSetter.Value\u003e\n            \u003cTransformGroup\u003e\n                \u003cTranslateTransform X=\"{Binding Path=(attached:Transform.OffsetX), RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}\" \n\t\t\t\t\t\t\t\t\tY=\"{Binding Path=(attached:Transform.OffsetY), RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}\" /\u003e\n                \u003cScaleTransform ScaleX=\"{Binding Path=(attached:Transform.ScaleX), RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}\" \n\t\t\t\t\t\t\t\tScaleY=\"{Binding Path=(attached:Transform.ScaleY), RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}\" /\u003e\n            \u003c/TransformGroup\u003e\n        \u003c/Setter.Value\u003e\n    \u003c/Setter\u003e\n    \u003cStyle.Triggers\u003e\n        \u003cEventTrigger RoutedEvent=\"ContentChanged\"\u003e\n            \u003cBeginStoryboard Storyboard=\"{StaticResource SlideInAnimation}\" /\u003e\n        \u003c/EventTrigger\u003e\n    \u003c/Style.Triggers\u003e\n\u003c/Style\u003e\n```\n","funding_links":[],"categories":["UI Controls"],"sub_categories":["Individual Controls"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGuOrg%2FGu.Wpf.FlipView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGuOrg%2FGu.Wpf.FlipView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGuOrg%2FGu.Wpf.FlipView/lists"}