Merge pull request #199 from PixiEditor/zoomboxTouch

Improved touch and stylus support, fixed MSIX checking for update and changed startup window recently opened file extension labels

PixiEditor.sln

@@ -44,14 +44,14 @@ Global
 		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.Debug|x86.Build.0 = Debug|x86
 		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX Debug|Any CPU.ActiveCfg = MSIX Debug|Any CPU
 		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX Debug|Any CPU.Build.0 = MSIX Debug|Any CPU
-		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX Debug|x64.ActiveCfg = Debug|x64
-		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX Debug|x64.Build.0 = Debug|x64
+		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX Debug|x64.ActiveCfg = MSIX Debug|x64
+		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX Debug|x64.Build.0 = MSIX Debug|x64
 		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX Debug|x86.ActiveCfg = Debug|x86
 		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX Debug|x86.Build.0 = Debug|x86
 		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX|Any CPU.ActiveCfg = MSIX|Any CPU
 		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX|Any CPU.Build.0 = MSIX|Any CPU
-		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX|x64.ActiveCfg = Release|x64
-		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX|x64.Build.0 = Release|x64
+		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX|x64.ActiveCfg = MSIX|x64
+		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX|x64.Build.0 = MSIX|x64
 		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX|x86.ActiveCfg = Release|x86
 		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.MSIX|x86.Build.0 = Release|x86
 		{2CCDDE79-06CB-4771-AF85-7B25313EBA30}.Release|Any CPU.ActiveCfg = Release|Any CPU

PixiEditor/Helpers/Converters/FileExtensionToColorConverter.cs

@@ -0,0 +1,45 @@
+using System;
+using System.Globalization;
+using System.Windows.Data;
+using System.Windows.Media;
+
+namespace PixiEditor.Helpers.Converters
+{
+    public class FileExtensionToColorConverter : IValueConverter
+    {
+        private static readonly SolidColorBrush PixiBrush = ColorBrush(226, 1, 45);
+
+        private static readonly SolidColorBrush PngBrush = ColorBrush(56, 108, 254);
+
+        private static readonly SolidColorBrush JpgBrush = ColorBrush(36, 179, 66);
+
+        private static readonly SolidColorBrush UnknownBrush = ColorBrush(100, 100, 100);
+
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            string extension = (string)value;
+
+            if (extension == ".pixi")
+            {
+                return PixiBrush;
+            }
+            else if (extension == ".png")
+            {
+                return PngBrush;
+            }
+            else if (extension is ".jpg" or ".jpeg")
+            {
+                return JpgBrush;
+            }
+
+            return UnknownBrush;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+
+        private static SolidColorBrush ColorBrush(byte r, byte g, byte b) => new SolidColorBrush(Color.FromRgb(r, g, b));
+    }
+}

PixiEditor/Helpers/Converters/FileExtensionToImageSourceConverter.cs

@@ -1,44 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using System.IO;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using System.Windows.Data;
-
-namespace PixiEditor.Helpers.Converters
-{
-    public class FileExtensionToImageSourceConverter : IValueConverter
-    {
-        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
-        {
-            string extension = (string)value;
-
-            if (extension == ".pixi")
-            {
-                return Join("PixiFile.png", parameter);
-            }
-            else if (extension == ".png")
-            {
-                return Join("PngFile.png", parameter);
-            }
-            else if (extension == ".jpg" || extension == ".jpeg")
-            {
-                return Join("JpgFile.png", parameter);
-            }
-
-            return Join("UnknownFile.png", parameter);
-        }
-
-        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
-        {
-            throw new NotImplementedException();
-        }
-
-        private string Join(string path, object parameter)
-        {
-            return Path.Join((string)parameter, "Images", path);
-        }
-    }
-}

PixiEditor/Helpers/Converters/NotNullToVisibiltyConverter.cs

@@ -5,11 +5,21 @@ using System.Windows.Data;
 
 namespace PixiEditor.Helpers.Converters
 {
+    [ValueConversion(typeof(object), typeof(Visibility))]
     class NotNullToVisibiltyConverter : IValueConverter
     {
+        public bool Inverted { get; set; }
+
         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
         {
-            return value != null ? Visibility.Visible : Visibility.Hidden;
+            bool isNull = value != null;
+
+            if (Inverted)
+            {
+                isNull = !isNull;
+            }
+
+            return isNull ? Visibility.Visible : Visibility.Hidden;
         }
 
         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

PixiEditor/Models/DataHolders/RecentlyOpenedDocument.cs

@@ -41,10 +41,13 @@ namespace PixiEditor.Models.DataHolders
             {
                 if (Corrupt)
                 {
-                    return "Corrupt";
+                    return "? (Corrupt)";
                 }
 
-                return Path.GetExtension(filePath).ToLower();
+                string extension = Path.GetExtension(filePath).ToLower();
+                return extension is not (".pixi" or ".png" or ".jpg" or ".jpeg")
+                    ? $"? ({extension})"
+                    : extension;
             }
         }
 

PixiEditor/PixiEditor.csproj

@@ -121,14 +121,12 @@
     <None Remove="Images\Folder-add.png" />
     <None Remove="Images\Folder.png" />
     <None Remove="Images\Layer-add.png" />
-    <None Remove="Images\JpgFile.png" />
     <None Remove="Images\MoveImage.png" />
     <None Remove="Images\MoveViewportImage.png" />
+    <None Remove="Images\penMode.png" />
     <None Remove="Images\PixiBotLogo.png" />
     <None Remove="Images\PixiEditorLogo.png" />
-    <None Remove="Images\PixiFile.png" />
     <None Remove="Images\PixiParserLogo.png" />
-    <None Remove="Images\PngFile.png" />
     <None Remove="Images\SelectImage.png" />
     <None Remove="Images\Trash.png" />
     <None Remove="Images\UnknownFile.png" />
@@ -173,17 +171,15 @@
     <Resource Include="Images\Folder-add.png" />
     <Resource Include="Images\Folder.png" />
     <Resource Include="Images\Layer-add.png" />
-    <Resource Include="Images\JpgFile.png" />
     <Resource Include="Images\LineImage.png" />
     <Resource Include="Images\MoveImage.png" />
     <Resource Include="Images\MoveViewportImage.png" />
     <Resource Include="Images\PenImage.png" />
     <Resource Include="Images\ColorPickerImage.png" />
+    <Resource Include="Images\penMode.png" />
     <Resource Include="Images\PixiBotLogo.png" />
     <Resource Include="Images\PixiEditorLogo.png" />
-    <Resource Include="Images\PixiFile.png" />
     <Resource Include="Images\PixiParserLogo.png" />
-    <Resource Include="Images\PngFile.png" />
     <Resource Include="Images\RectangleImage.png" />
     <Resource Include="Images\SelectImage.png" />
     <Resource Include="Images\transparentbg.png" />

PixiEditor/ViewModels/SubViewModels/Main/StylusViewModel.cs

@@ -2,13 +2,39 @@
 using System.Windows.Input;
 using PixiEditor.Models.Tools;
 using PixiEditor.Models.Tools.Tools;
+using PixiEditor.Models.UserPreferences;
 
 namespace PixiEditor.ViewModels.SubViewModels.Main
 {
     public class StylusViewModel : SubViewModel<ViewModelMain>
     {
+        private bool isPenModeEnabled;
+        private bool useTouchGestures;
+
         public bool ToolSetByStylus { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether touch gestures are enabled even when the MoveViewportTool and ZoomTool are not selected.
+        /// </summary>
+        public bool IsPenModeEnabled
+        {
+            get => isPenModeEnabled;
+            set
+            {
+                if (SetProperty(ref isPenModeEnabled, value))
+                {
+                    IPreferences.Current.UpdateLocalPreference(nameof(IsPenModeEnabled), value);
+                    UpdateUseTouchGesture();
+                }
+            }
+        }
+
+        public bool UseTouchGestures
+        {
+            get => useTouchGestures;
+            set => SetProperty(ref useTouchGestures, value);
+        }
+
         private Tool PreviousTool { get; set; }
 
         public StylusViewModel()
@@ -28,6 +54,10 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
             {
                 throw new System.Exception("StylusViewModel already has an owner");
             }
+            else if (owner is null)
+            {
+                return;
+            }
 
             Owner = owner;
 
@@ -37,6 +67,23 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
             mw.PreviewStylusButtonDown += Mw_StylusButtonDown;
             mw.PreviewStylusButtonUp += Mw_StylusButtonUp;
             mw.PreviewStylusSystemGesture += Mw_PreviewStylusSystemGesture;
+
+            isPenModeEnabled = IPreferences.Current.GetLocalPreference<bool>(nameof(IsPenModeEnabled));
+            Owner.BitmapManager.AddPropertyChangedCallback(nameof(Owner.BitmapManager.SelectedTool), UpdateUseTouchGesture);
+
+            UpdateUseTouchGesture();
+        }
+
+        private void UpdateUseTouchGesture()
+        {
+            if (Owner.BitmapManager.SelectedTool is not (MoveViewportTool or ZoomTool))
+            {
+                UseTouchGestures = IsPenModeEnabled;
+            }
+            else
+            {
+                UseTouchGestures = true;
+            }
         }
 
         private void Mw_PreviewStylusSystemGesture(object sender, StylusSystemGestureEventArgs e)

PixiEditor/Views/Dialogs/HelloTherePopup.xaml

@@ -12,7 +12,7 @@
 
     <Window.Resources>
         <converters:EqualityBoolToVisibilityConverter x:Key="EqualBoolToVisibilty"/>
-        <converters:FileExtensionToImageSourceConverter x:Key="FileExtensionToImageSource"/>
+        <converters:FileExtensionToColorConverter x:Key="FileExtensionToColorConverter"/>
 
         <Style TargetType="TextBlock">
             <Setter Property="Foreground" Value="White"/>
@@ -88,24 +88,104 @@
                         <ItemsControl.ItemTemplate>
                             <DataTemplate DataType="{x:Type dataHolders:RecentlyOpenedDocument}">
                                 <Grid>
-                                    <StackPanel Margin="8,5,8,0" ToolTip="{Binding FilePath}">
+                                    <StackPanel Margin="8,5,8,0">
                                         <Button Margin="0,10,0,0" HorizontalAlignment="Center"
                                                 Width="100" Height="100"
                                                 Command="{Binding DataContext.OpenRecentCommand, RelativeSource={RelativeSource AncestorType=uc:AlignableWrapPanel}}"
                                                 CommandParameter="{Binding FilePath}"
-                                                Style="{StaticResource DarkRoundButton}">
-                                            <Image Source="{Binding PreviewBitmap}" Margin="20"/>
+                                                Style="{StaticResource DarkRoundButton}"
+                                                x:Name="fileButton">
+                                            <Grid Width="100" Height="100">
+                                                <Image Source="{Binding PreviewBitmap}" Margin="20"/>
+                                                <Border Grid.Row="1" Height="8" Width="8" x:Name="extensionBorder" Margin="5"
+                                                        Background="{Binding FileExtension, Converter={StaticResource FileExtensionToColorConverter}}" 
+                                                        VerticalAlignment="Bottom" HorizontalAlignment="Right">
+                                                    <Border.Style>
+                                                        <Style TargetType="Border">
+                                                            <Style.Triggers>
+                                                                <Trigger Property="IsMouseOver" Value="False">
+                                                                    <Setter Property="CornerRadius" Value="2"/>
+                                                                </Trigger>
+                                                                <DataTrigger Binding="{Binding IsMouseOver, ElementName=fileButton}" Value="True">
+                                                                    <DataTrigger.EnterActions>
+                                                                        <BeginStoryboard Name="open">
+                                                                            <Storyboard BeginTime="0:0:.1">
+                                                                                <DoubleAnimation Storyboard.TargetProperty="Height" By="8" To="25" BeginTime="0:0:.1" Duration="0:0:.3">
+                                                                                    <DoubleAnimation.EasingFunction>
+                                                                                        <ExponentialEase/>
+                                                                                    </DoubleAnimation.EasingFunction>
+                                                                                </DoubleAnimation>
+                                                                                <DoubleAnimation Storyboard.TargetProperty="Width" By="8" To="100" Duration="0:0:.1">
+                                                                                    <DoubleAnimation.EasingFunction>
+                                                                                        <ExponentialEase/>
+                                                                                    </DoubleAnimation.EasingFunction>
+                                                                                </DoubleAnimation>
+                                                                                <ThicknessAnimation Storyboard.TargetProperty="Margin" By="5" To="0" BeginTime="0:0:.1" Duration="0:0:.25">
+                                                                                    <ThicknessAnimation.EasingFunction>
+                                                                                        <ExponentialEase/>
+                                                                                    </ThicknessAnimation.EasingFunction>
+                                                                                </ThicknessAnimation>
+                                                                            </Storyboard>
+                                                                        </BeginStoryboard>
+                                                                    </DataTrigger.EnterActions>
+                                                                    <DataTrigger.ExitActions>
+                                                                        <BeginStoryboard Name="close">
+                                                                            <Storyboard>
+                                                                                <DoubleAnimation Storyboard.TargetProperty="Height" By="25" To="8"  Duration="0:0:.2">
+                                                                                    <DoubleAnimation.EasingFunction>
+                                                                                        <ExponentialEase/>
+                                                                                    </DoubleAnimation.EasingFunction>
+                                                                                </DoubleAnimation>
+                                                                                <DoubleAnimation Storyboard.TargetProperty="Width" By="100" To="8" BeginTime="0:0:.2" Duration="0:0:.1">
+                                                                                    <DoubleAnimation.EasingFunction>
+                                                                                        <ExponentialEase/>
+                                                                                    </DoubleAnimation.EasingFunction>
+                                                                                </DoubleAnimation>
+                                                                                <ThicknessAnimation Storyboard.TargetProperty="Margin" By="0" To="5" Duration="0:0:.1">
+                                                                                    <ThicknessAnimation.EasingFunction>
+                                                                                        <ExponentialEase/>
+                                                                                    </ThicknessAnimation.EasingFunction>
+                                                                                </ThicknessAnimation>
+                                                                            </Storyboard>
+                                                                        </BeginStoryboard>
+                                                                    </DataTrigger.ExitActions>
+                                                                    <Setter Property="CornerRadius" Value="0,0,4,4"/>
+                                                                </DataTrigger>
+                                                            </Style.Triggers>
+                                                        </Style>
+                                                    </Border.Style>
+                                                    <TextBlock x:Name="extension" Text="{Binding FileExtension}" FontSize="15" TextAlignment="Center" VerticalAlignment="Center" Opacity="0">
+                                                        <TextBlock.Style>
+                                                            <Style TargetType="TextBlock">
+                                                                <Style.Triggers>
+                                                                    <DataTrigger Binding="{Binding IsMouseOver, ElementName=fileButton}" Value="True">
+                                                                        <DataTrigger.EnterActions>
+                                                                            <BeginStoryboard Name="start">
+                                                                                <Storyboard BeginTime="0:0:.2">
+                                                                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" By="0" To="1" Duration="0:0:.4">
+                                                                                        <DoubleAnimation.EasingFunction>
+                                                                                            <PowerEase/>
+                                                                                        </DoubleAnimation.EasingFunction>
+                                                                                    </DoubleAnimation>
+                                                                                </Storyboard>
+                                                                            </BeginStoryboard>
+                                                                        </DataTrigger.EnterActions>
+                                                                        <DataTrigger.ExitActions>
+                                                                            <RemoveStoryboard BeginStoryboardName="start"/>
+                                                                        </DataTrigger.ExitActions>
+                                                                    </DataTrigger>
+                                                                </Style.Triggers>
+                                                            </Style>
+                                                        </TextBlock.Style>
+                                                    </TextBlock>
+                                                </Border>
+                                            </Grid>
                                         </Button>
 
-                                        <TextBlock Text="{Binding FileName}" Width="110" TextAlignment="Center" TextTrimming="CharacterEllipsis"
+                                        <TextBlock Text="{Binding FileName}" ToolTip="{Binding FilePath}"
+                                                   Width="110" TextAlignment="Center" TextTrimming="CharacterEllipsis"
                                                    FontSize="18" Margin="10,10,10,2" HorizontalAlignment="Center" Foreground="White"/>
                                     </StackPanel>
-                                    <Image Source="{Binding FileExtension, Converter={StaticResource FileExtensionToImageSource}, ConverterParameter=../..}" Width="33"
-                                           ToolTip="{Binding FileExtension}">
-                                        <Image.RenderTransform>
-                                            <TranslateTransform X="38" Y="23"/>
-                                        </Image.RenderTransform>
-                                    </Image>
                                 </Grid>
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>

PixiEditor/Views/MainWindow.xaml

@@ -184,6 +184,37 @@
                     Style="{StaticResource ToolSettingsGlyphButton}" Content=""/>
             <Button Command="{Binding UndoSubViewModel.RedoCommand}" ToolTip="Redo"
                     Style="{StaticResource ToolSettingsGlyphButton}" Content="&#xE7A6;"/>
+            <ToggleButton Width="30" BorderThickness="0"
+                          ToolTip="Pen Mode"
+                          IsChecked="{Binding StylusSubViewModel.IsPenModeEnabled}">
+                <ToggleButton.Style>
+                    <Style TargetType="ToggleButton">
+                        <Setter Property="Template">
+                            <Setter.Value>
+                                <ControlTemplate TargetType="ToggleButton">
+                                    <Border BorderBrush="{TemplateBinding BorderBrush}" 
+                                            Background="{TemplateBinding Background}">
+                                        <ContentPresenter HorizontalAlignment="Center"
+                                              VerticalAlignment="Center"/>
+                                    </Border>
+                                </ControlTemplate>
+                            </Setter.Value>
+                        </Setter>
+                        <Style.Triggers>
+                            <Trigger Property="IsChecked" Value="False">
+                                <Setter Property="Background" Value="Transparent"/>
+                            </Trigger>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter Property="Background" Value="#606060"/>
+                            </Trigger>
+                            <Trigger Property="IsChecked" Value="True">
+                                <Setter Property="Background" Value="#707070"/>
+                            </Trigger>
+                        </Style.Triggers>
+                    </Style>
+                </ToggleButton.Style>
+                <Image Height="20" Source="../Images/penMode.png"/>
+            </ToggleButton>
             <Grid Margin="5,5,10,5" Background="{StaticResource BrighterAccentColor}" Width="5"/>
             <Label Style="{StaticResource BaseLabel}" FontSize="12"
                    VerticalAlignment="Center" Content="{Binding BitmapManager.SelectedTool.DisplayName}"
@@ -237,6 +268,7 @@
                                         MouseDownCommand="{Binding XamlAccesibleViewModel.IoSubViewModel.MouseDownCommand}"
                                         MouseXOnCanvas="{Binding MouseXOnCanvas, Mode=TwoWay}"
                                         MouseYOnCanvas="{Binding MouseYOnCanvas, Mode=TwoWay}"
+                                        UseTouchGestures="{Binding XamlAccesibleViewModel.StylusSubViewModel.UseTouchGestures}"
                                         IsUsingZoomTool="{Binding XamlAccesibleViewModel.BitmapManager.SelectedTool, Converter={StaticResource IsZoomToolConverter}}"
                                         IsUsingMoveViewportTool="{Binding XamlAccesibleViewModel.BitmapManager.SelectedTool, Converter={StaticResource IsMoveViewportToolConverter}}"
                                         Stylus.IsTapFeedbackEnabled="False" Stylus.IsTouchFeedbackEnabled="False">
@@ -333,7 +365,7 @@
         </Grid>
 
         <Border Grid.Row="2" Grid.Column="0"
-                    Background="{StaticResource AccentColor}" Grid.RowSpan="2" CornerRadius="5">
+                    Background="{StaticResource AccentColor}" Grid.RowSpan="2" CornerRadius="5,0,5,5">
         <StackPanel Orientation="Vertical" Cursor="Arrow" >
 
             <ItemsControl ItemsSource="{Binding ToolsSubViewModel.ToolSet}">

PixiEditor/Views/UserControls/DrawingViewPort.xaml

@@ -8,17 +8,18 @@
              xmlns:vws="clr-namespace:PixiEditor.Views"
              xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
              xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours" xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
-             xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit" xmlns:sys="clr-namespace:System;assembly=System.Runtime" x:Class="PixiEditor.Views.UserControls.DrawingViewPort"
-             mc:Ignorable="d" 
-             d:DesignHeight="450" d:DesignWidth="800" x:Name="uc">
+             xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit" xmlns:sys="clr-namespace:System;assembly=System.Runtime" xmlns:dataholders="clr-namespace:PixiEditor.Models.DataHolders" x:Class="PixiEditor.Views.UserControls.DrawingViewPort"
+    mc:Ignorable="d"
+    d:DesignHeight="450" d:DesignWidth="800" x:Name="uc">
     <UserControl.Resources>
         <converters:BoolToIntConverter x:Key="BoolToIntConverter" />
         <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter" />
         <converters:IntToViewportRectConverter x:Key="IntToViewportRectConverter" />
-        <converters:ZoomToViewportConverter x:Key="ZoomToViewportConverter"/>
+        <converters:ZoomToViewportConverter x:Key="ZoomToViewportConverter" />
     </UserControl.Resources>
 
-    <local:Zoombox x:Name="zoombox" ClipToBounds="True">
+    <local:Zoombox x:Name="zoombox" ClipToBounds="True" d:DataContext="{d:DesignInstance dataholders:Document}"
+                   UseTouchGestures="{Binding UseTouchGestures, ElementName=uc}">
         <i:Interaction.Triggers>
             <i:EventTrigger EventName="MouseMove">
                 <i:InvokeCommandAction Command="{Binding MouseMoveCommand, ElementName=uc}" />
@@ -57,6 +58,7 @@
                                    Width="{Binding PreviewLayer.Width}"
                                    Height="{Binding PreviewLayer.Height}" 
                                    Margin="{Binding PreviewLayer.Offset}"/>
+
                 <ItemsControl ItemsSource="{Binding Layers}">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>

PixiEditor/Views/UserControls/DrawingViewPort.xaml.cs

@@ -44,6 +44,9 @@ namespace PixiEditor.Views.UserControls
             DependencyProperty.Register(nameof(ZoomViewportTrigger), typeof(ExecutionTrigger<double>), typeof(DrawingViewPort),
                 new PropertyMetadata(default(ExecutionTrigger<double>), ZoomViewportTriggerChanged));
 
+        public static readonly DependencyProperty UseTouchGesturesProperty =
+            DependencyProperty.Register(nameof(UseTouchGestures), typeof(bool), typeof(DrawingViewPort));
+
         public ICommand MiddleMouseClickedCommand
         {
             get => (ICommand)GetValue(MiddleMouseClickedCommandProperty);
@@ -91,6 +94,11 @@ namespace PixiEditor.Views.UserControls
             get => (bool)GetValue(IsUsingMoveViewportToolProperty);
             set => SetValue(IsUsingMoveViewportToolProperty, value);
         }
+        public bool UseTouchGestures
+        {
+            get => (bool)GetValue(UseTouchGesturesProperty);
+            set => SetValue(UseTouchGesturesProperty, value);
+        }
 
         public ExecutionTrigger<Size> CenterViewportTrigger
         {

PixiEditor/Views/UserControls/LayersManager.xaml

@@ -18,6 +18,7 @@
             <RowDefinition Height="37.5"/>
             <RowDefinition Height="15"/>
             <RowDefinition Height="1*"/>
+            <RowDefinition Height="Auto"/>
         </Grid.RowDefinitions>
         <DockPanel Background="{StaticResource MainColor}" Grid.Row="0" HorizontalAlignment="Stretch">
             <StackPanel Orientation="Horizontal" DockPanel.Dock="Left">

PixiEditor/Views/UserControls/LayersManager.xaml.cs

@@ -1,4 +1,5 @@
-using PixiEditor.Models.Controllers;
+using PixiEditor.Helpers;
+using PixiEditor.Models.Controllers;
 using PixiEditor.Models.DataHolders;
 using PixiEditor.Models.Layers;
 using PixiEditor.Models.Undo;

PixiEditor/Views/UserControls/NumberInput.xaml

@@ -8,7 +8,7 @@
              mc:Ignorable="d"
              d:DesignHeight="20" d:DesignWidth="40" x:Name="numberInput">
     <TextBox TextAlignment="Center" Style="{StaticResource DarkTextBoxStyle}" Focusable="True"
-               
+             InputScope="Number"
              PreviewTextInput="TextBox_PreviewTextInput" Text="{Binding ElementName=numberInput, Path=Value}">
         <i:Interaction.Behaviors>
             <behaviours:TextBoxFocusBehavior/>

PixiEditor/Views/UserControls/SizeInput.xaml

@@ -13,7 +13,7 @@
         <converters:ToolSizeToIntConverter x:Key="ToolSizeToIntConverter" />
     </UserControl.Resources>
     <TextBox IsEnabled="{Binding IsEnabled, ElementName=uc}" HorizontalContentAlignment="Center"
-             Style="{StaticResource DarkTextBoxStyle}" MaxLength="4">
+             Style="{StaticResource DarkTextBoxStyle}" MaxLength="4" InputScope="Number">
         <TextBox.Text>
             <Binding ElementName="uc"
                      Path="Size" Mode="TwoWay"

PixiEditor/Views/UserControls/Zoombox.xaml

@@ -7,7 +7,9 @@
                 mc:Ignorable="d" 
                 x:Name="uc"
                 d:DesignHeight="450" d:DesignWidth="800">
-    <Canvas MouseDown="OnMouseDown" MouseUp="OnMouseUp" MouseMove="OnMouseMove" MouseWheel="OnScroll" x:Name="mainCanvas" Background="Transparent">
+    <Canvas MouseDown="OnMouseDown" MouseUp="OnMouseUp" MouseMove="OnMouseMove" MouseWheel="OnScroll"
+            IsManipulationEnabled="{Binding UseTouchGestures, ElementName=uc}" ManipulationDelta="OnManipulationDelta"
+            x:Name="mainCanvas" Background="Transparent">
         <Grid x:Name="mainGrid" SizeChanged="RecalculateMinZoomLevel">
             <Grid.LayoutTransform>
                 <ScaleTransform x:Name="scaleTransform"/>

PixiEditor/Views/UserControls/Zoombox.xaml.cs

@@ -102,6 +102,9 @@ namespace PixiEditor.Views.UserControls
             DependencyProperty.Register(nameof(ZoomMode), typeof(Mode), typeof(Zoombox),
               new PropertyMetadata(Mode.Normal, ZoomModeChanged));
 
+        public static readonly DependencyProperty UseTouchGesturesProperty =
+            DependencyProperty.Register(nameof(UseTouchGestures), typeof(bool), typeof(Zoombox));
+
         private const double zoomFactor = 1.1;
         private const double maxZoom = 50;
         private double minZoom = -28;
@@ -116,6 +119,12 @@ namespace PixiEditor.Views.UserControls
             set => SetValue(ZoomModeProperty, value);
         }
 
+        public bool UseTouchGestures
+        {
+            get => (bool)GetValue(UseTouchGesturesProperty);
+            set => SetValue(UseTouchGesturesProperty, value);
+        }
+
         public double Zoom => Math.Pow(zoomFactor, zoomPower);
 
         private Point spaceOriginPos;
@@ -297,5 +306,14 @@ namespace PixiEditor.Views.UserControls
         {
             ZoomInto(e.GetPosition(mainCanvas), e.Delta / 100);
         }
+
+        private void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
+        {
+            if (e.Handled = UseTouchGestures)
+            {
+                ZoomInto(e.ManipulationOrigin, e.DeltaManipulation.Expansion.X / 5.0);
+                SpaceOriginPos += e.DeltaManipulation.Translation;
+            }
+        }
     }
 }