Add percentage and a hint to export menu

PixiEditor/Models/Dialogs/ExportFileDialog.cs

@@ -1,6 +1,5 @@
 using PixiEditor.Models.Enums;
 using PixiEditor.Views;
-using System.Drawing.Imaging;
 using System.Windows;
 
 namespace PixiEditor.Models.Dialogs
@@ -75,11 +74,7 @@ namespace PixiEditor.Models.Dialogs
 
         public override bool ShowDialog()
         {
-            ExportFilePopup popup = new ExportFilePopup
-            {
-                SaveWidth = FileWidth,
-                SaveHeight = FileHeight
-            };
+            ExportFilePopup popup = new ExportFilePopup(FileWidth, FileHeight);
             popup.ShowDialog();
             if (popup.DialogResult == true)
             {

PixiEditor/Views/Dialogs/ExportFilePopup.xaml

@@ -8,7 +8,7 @@
         xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours"
         xmlns:dial="clr-namespace:PixiEditor.Views.Dialogs"
         mc:Ignorable="d" BorderBrush="Black" BorderThickness="1"
-        Title="SaveFilePopup" Height="250" Width="300" WindowStyle="None" MinHeight="250" MinWidth="300"
+        Title="SaveFilePopup" WindowStyle="None" Height="330" Width="310" MinHeight="330" MinWidth="310"
         WindowStartupLocation="CenterScreen" Name="saveFilePopup">
     <WindowChrome.WindowChrome>
         <WindowChrome CaptionHeight="32"  GlassFrameThickness="0.1"
@@ -33,10 +33,16 @@
                     Margin="15" Style="{StaticResource DarkRoundButton}" Content="Export" Command="{Binding OkCommand}"
                     CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />
 
-        <local:SizePicker Width="230" Height="125" Margin="0,30,0,0"
-            x:Name="sizePicker"
-            ChosenHeight="{Binding Path=SaveHeight, Mode=TwoWay, ElementName=saveFilePopup}"
-            ChosenWidth="{Binding Path=SaveWidth, Mode=TwoWay, ElementName=saveFilePopup}" />
+        <Grid HorizontalAlignment="Center" Margin="0,30,0,0" Background="{StaticResource MainColor}"
+                    VerticalAlignment="Top" Grid.Row="1" Width="240" Height="205">
+            <local:SizePicker Width="240" Height="180" Margin="0,0,0,25"
+                x:Name="sizePicker"
+                SizeUnitSelectionVisibility="Visible"
+                ChosenHeight="{Binding Path=SaveHeight, Mode=TwoWay, ElementName=saveFilePopup}"
+                ChosenWidth="{Binding Path=SaveWidth, Mode=TwoWay, ElementName=saveFilePopup}" />
+            <TextBlock Foreground="Snow" Margin="10,5" TextWrapping="Wrap" VerticalAlignment="Bottom" TextAlignment="Center" 
+                       d:Text="If you want to share the image, try 400% for the best clarity" Text="{Binding SizeHint, ElementName=saveFilePopup}"/>
+        </Grid>
 
     </DockPanel>
 </Window>

PixiEditor/Views/Dialogs/ExportFilePopup.xaml.cs

@@ -1,12 +1,13 @@
 using PixiEditor.Models.Enums;
 using PixiEditor.ViewModels;
-using System.Drawing.Imaging;
+using System;
+using System.ComponentModel;
 using System.Windows;
 using System.Windows.Input;
 
 namespace PixiEditor.Views
 {
-    public partial class ExportFilePopup : Window
+    public partial class ExportFilePopup : Window, INotifyPropertyChanged
     {
         public static readonly DependencyProperty SaveHeightProperty =
             DependencyProperty.Register("SaveHeight", typeof(int), typeof(ExportFilePopup), new PropertyMetadata(32));
@@ -17,6 +18,12 @@ namespace PixiEditor.Views
 
         private readonly SaveFilePopupViewModel dataContext = new SaveFilePopupViewModel();
 
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        private int imageWidth;
+        private int imageHeight;
+        public string SizeHint => $"If you want to share the image, try {GetBestPercentage()}% for the best clarity";
+
         private void CommandBinding_CanExecute(object sender, CanExecuteRoutedEventArgs e)
         {
             e.CanExecute = true;
@@ -27,14 +34,30 @@ namespace PixiEditor.Views
             SystemCommands.CloseWindow(this);
         }
 
-        public ExportFilePopup()
+        public ExportFilePopup(int imageWidth, int imageHeight)
         {
+            this.imageWidth = imageWidth;
+            this.imageHeight = imageHeight;
+
             InitializeComponent();
             Owner = Application.Current.MainWindow;
             DataContext = dataContext;
             Loaded += (_, _) => sizePicker.FocusWidthPicker();
+
+            SaveWidth = imageWidth;
+            SaveHeight = imageHeight;
         }
 
+        private int GetBestPercentage()
+        {
+            int maxDim = Math.Max(imageWidth, imageWidth);
+            for (int i = 16; i >= 1; i--)
+            {
+                if (maxDim * i <= 1280)
+                    return i * 100;
+            }
+            return 100;
+        }
 
         public int SaveWidth
         {
@@ -55,7 +78,7 @@ namespace PixiEditor.Views
             set => dataContext.FilePath = value;
         }
 
-        public FileType SaveFormat 
+        public FileType SaveFormat
         {
             get => dataContext.ChosenFormat;
             set => dataContext.ChosenFormat = value;