I'm very new to C#.So, i'm trying create a simple swipe function in my WPF where if i swipe left or right, it goes to another wpf window. Please help me! I cannot find much resources online.
So my question is how to swipe using mouse in wpf application, so that i can switch between pages/window using mouse swipe.
I'm just trying to do like an image Carousel. I have so far followed this WPF image swipe to change image like in iOS But, it doesn't swipe but zooms in and out when mouse is moved.
I am Using Pages but you can use window also.
1st. Create two Pages LeftPage.xaml, and RightPage.Xaml and following code to MainWindow.xaml and MainWindows.xaml.cs
XAML
MainWindow
<Window x:Class="SOWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SOWPF"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800"
MouseDown="Window_MouseDown" MouseMove="Window_MouseMove">
<Grid>
<Frame x:Name="MainFrame" NavigationUIVisibility="Hidden" />
</Grid>
C#
public partial class MainWindow : Window
{
protected Point SwipeStart;
public MainWindow()
{
InitializeComponent();
MainFrame.Source = new Uri("LeftPage.xaml", UriKind.RelativeOrAbsolute);
}
private void Window_MouseDown(object sender, MouseEventArgs e)
{
SwipeStart = e.GetPosition(this);
}
private void Window_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
var Swipe = e.GetPosition(this);
//Swipe Left
if (SwipeStart != null && Swipe.X > (SwipeStart.X + 200))
{
// OR Use Your Logic to switch between pages.
MainFrame.Source = new Uri("LeftPage.xaml", UriKind.RelativeOrAbsolute);
}
//Swipe Right
if (SwipeStart != null && Swipe.X < (SwipeStart.X - 200))
{
// OR Use Your Logic to switch between pages.
MainFrame.Source = new Uri("RightPage.xaml", UriKind.RelativeOrAbsolute);
}
}
e.Handled = true;
}
}
I've created a Behavior so that the whole thing can be done without the need for any code behind. The good thing of using a Behavior is that you can reuse it wherever in your solution, unit test it to ensure it does as you want or extend it's functionality.
Main Window
<Window x:Class="TestWpfApplication.MainWindowView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:testWpfApplication="clr-namespace:TestWpfApplication"
mc:Ignorable="d"
Title="MainWindow"
Height="450"
Width="800">
<i:Interaction.Behaviors>
<testWpfApplication:SwipeBehavior TargetContentControl="{Binding ElementName=MainContentControl}" LeftUserControl="{Binding Path=LeftControl}" RightUserControl="{Binding Path=RightControl}" />
</i:Interaction.Behaviors>
<Grid>
<ContentControl Name="MainContentControl" />
</Grid>
</Window>
Main Window Code Behind
using System.Windows;
namespace TestWpfApplication
{
public partial class MainWindowView : Window
{
private readonly MainWindowViewModel _mainWindowViewModel = new MainWindowViewModel();
public MainWindowView()
{
InitializeComponent();
DataContext = _mainWindowViewModel;
}
}
}
Swipe Behavior
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Interactivity;
namespace TestWpfApplication
{
public class SwipeBehavior : Behavior<Window>
{
public static readonly DependencyProperty TargetContentControlProperty = DependencyProperty.RegisterAttached("TargetContentControl", typeof(ContentControl), typeof(SwipeBehavior), new UIPropertyMetadata(null));
public static readonly DependencyProperty LeftUserControlProperty = DependencyProperty.RegisterAttached("LeftUserControl", typeof(UserControl), typeof(SwipeBehavior), new UIPropertyMetadata(null));
public static readonly DependencyProperty RightUserControlProperty = DependencyProperty.RegisterAttached("RightUserControl", typeof(UserControl), typeof(SwipeBehavior), new UIPropertyMetadata(null));
public static ContentControl GetTargetContentControl(DependencyObject dependencyObject)
{
return (ContentControl) dependencyObject.GetValue(TargetContentControlProperty);
}
public static void SetTargetContentControl(DependencyObject dependencyObject, ContentControl value)
{
dependencyObject.SetValue(TargetContentControlProperty, value);
}
public static ContentControl GetLeftUserControl(DependencyObject dependencyObject)
{
return (UserControl) dependencyObject.GetValue(LeftUserControlProperty);
}
public static void SetLeftUserControl(DependencyObject dependencyObject, UserControl value)
{
dependencyObject.SetValue(LeftUserControlProperty, value);
}
public static ContentControl GetRightUserControl(DependencyObject dependencyObject)
{
return (UserControl) dependencyObject.GetValue(RightUserControlProperty);
}
public static void SetRightUserControl(DependencyObject dependencyObject, UserControl value)
{
dependencyObject.SetValue(RightUserControlProperty, value);
}
private Point _swipeStart;
protected override void OnAttached()
{
base.OnAttached();
AssociatedObject.MouseDown += OnMouseDown;
AssociatedObject.MouseMove += OnMouseMove;
}
private void OnMouseDown(object sender, MouseButtonEventArgs e)
{
_swipeStart = e.GetPosition(AssociatedObject);
}
private void OnMouseMove(object sender, MouseEventArgs e)
{
var targetContentControl = GetValue(TargetContentControlProperty) as ContentControl;
if (targetContentControl == null)
{
return;
}
if (e.LeftButton == MouseButtonState.Pressed)
{
var swipe = e.GetPosition(AssociatedObject);
//Swipe Left
if (swipe.X > (_swipeStart.X + 200))
{
// OR Use Your Logic to switch between pages.
targetContentControl.Content = new LeftControl();
}
//Swipe Right
if (swipe.X < (_swipeStart.X - 200))
{
// OR Use Your Logic to switch between pages.
targetContentControl.Content = new RightControl();
}
}
e.Handled = true;
}
}
}
Main Window View Model
using System.Windows.Controls;
namespace TestWpfApplication
{
internal class MainWindowViewModel
{
public UserControl LeftControl { get; } = new LeftControl();
public UserControl RightControl { get; } = new RightControl();
}
}
Note: The LeftControl & RightControl are WPF User Controls in this example. Also you must reference System.Window.Interactivity in your project in order to use the Behavior class
