Added active tool visual on buttons

PixiEditor/Helpers/Converters/BoolToIntConverter.cs

@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Text;
+using System.Windows.Data;
+
+namespace PixiEditor.Helpers.Converters
+{
+    public class BoolToIntConverter : IValueConverter
+    {
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value.ToString() == "0")
+            {
+                return false;
+            }
+            return true;
+        }
+
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value is bool)
+            {
+                if ((bool)value == false)
+                {
+                    return 0;
+                }
+            }
+            return 1;
+        }
+    }
+}

PixiEditor/Models/Tools/Tool.cs

@@ -1,15 +1,30 @@
-using PixiEditor.Models.Layers;
+using PixiEditor.Helpers;
+using PixiEditor.Models.Layers;
 using PixiEditor.Models.Position;
 using System.Windows.Input;
 using System.Windows.Media;
 
 namespace PixiEditor.Models.Tools
 {
-    public abstract class Tool
+    public abstract class Tool : NotifyableObject
     {
         public abstract BitmapPixelChanges Use(Layer layer, Coordinates[] pixels, Color color, int toolSize);
         public abstract ToolType ToolType { get; }
+        public string ImagePath => $"/Images/{ToolType.ToString()}Image.png";
         public bool RequiresPreviewLayer { get; set; }
+        public string Tooltip { get; set; }
+
+        private bool _isActive = false;
+        public bool IsActive
+        {
+            get { return _isActive; }
+            set 
+            { 
+                _isActive = value;
+                RaisePropertyChanged("IsActive");
+            }
+        }
+
         public Cursor Cursor { get; set; } = Cursors.Arrow;
     }
 }

PixiEditor/PixiEditor.csproj

@@ -39,10 +39,10 @@
     <Resource Include="Images\CircleImage.png" />
     <Resource Include="Images\Cross.png" />
     <Resource Include="Images\EarserImage.png" />
-    <Resource Include="Images\LightenImage.png" />
+    <Resource Include="Images\BrightnessImage.png" />
     <Resource Include="Images\LineImage.png" />
     <Resource Include="Images\PenImage.png" />
-    <Resource Include="Images\PipetteImage.png" />
+    <Resource Include="Images\ColorPickerImage.png" />
     <Resource Include="Images\RectangleImage.png" />
     <Resource Include="Images\SwapArrows.png" />
     <Resource Include="Images\transparentbg.png" />

PixiEditor/ViewModels/ViewModelMain.cs

@@ -13,7 +13,8 @@ using PixiEditor.Models.Dialogs;
 using PixiEditor.Models.IO;
 using PixiEditor.Models.Position;
 using PixiEditor.Models.DataHolders;
-using PixiEditor.Views;
+using System.Linq;
+using System.Collections.ObjectModel;
 
 namespace PixiEditor.ViewModels
 {
@@ -112,7 +113,7 @@ namespace PixiEditor.ViewModels
             }
         }
 
-        public List<Tool> ToolSet { get; set; }
+        public ObservableCollection<Tool> ToolSet { get; set; }
 
         private LayerChanges _undoChanges;
 
@@ -151,7 +152,7 @@ namespace PixiEditor.ViewModels
             BitmapUtility.BitmapChanged += BitmapUtility_BitmapChanged;
             BitmapUtility.MouseController.StoppedRecordingChanges += MouseController_StoppedRecordingChanges;
             ChangesController = new PixelChangesController();
-            SelectToolCommand = new RelayCommand(RecognizeTool);
+            SelectToolCommand = new RelayCommand(SetTool);
             GenerateDrawAreaCommand = new RelayCommand(GenerateDrawArea);
             MouseMoveCommand = new RelayCommand(MouseMove);
             MouseDownCommand = new RelayCommand(MouseDown);
@@ -169,7 +170,7 @@ namespace PixiEditor.ViewModels
             SwapColorsCommand = new RelayCommand(SwapColors);
             KeyDownCommand = new RelayCommand(KeyDown);
             RenameLayerCommand = new RelayCommand(RenameLayer);
-            ToolSet = new List<Tool> { new PixiTools.PenTool(), new PixiTools.FloodFill(), new PixiTools.LineTool(),
+            ToolSet = new ObservableCollection<Tool> { new PixiTools.PenTool(), new PixiTools.FloodFill(), new PixiTools.LineTool(),
             new PixiTools.CircleTool(), new PixiTools.RectangleTool(), new PixiTools.EarserTool(), new PixiTools.BrightnessTool() };
             ShortcutController = new ShortcutController
             {
@@ -196,6 +197,11 @@ namespace PixiEditor.ViewModels
             ToolSize = 1;
         }
 
+        public void SetTool(object parameter)
+        {
+            SetActiveTool((ToolType)parameter);
+        }
+
         public void RenameLayer(object parameter)
         {
             BitmapUtility.Layers[(int)parameter].IsRenaming = true;
@@ -299,28 +305,31 @@ namespace PixiEditor.ViewModels
         }
         #endregion
 
-        /// <summary>
-        /// Recognizes selected tool from UI
-        /// </summary>
-        /// <param name="parameter"></param>
-        private void RecognizeTool(object parameter)
-        {
-            ToolType tool = (ToolType)Enum.Parse(typeof(ToolType), parameter.ToString());
-            SelectedTool = tool;
+        private void SetActiveTool(ToolType tool)
+        {
+            BitmapUtility.SelectedTool = ToolSet.First(x=> x.ToolType == tool);
+            Tool activeTool = ToolSet.FirstOrDefault(x => x.IsActive);
+            if(activeTool != null)
+            {
+                activeTool.IsActive = false;
+            }
+
+            BitmapUtility.SelectedTool.IsActive = true;
+            SetToolCursor(tool);
         }
 
-        private void SetActiveTool(ToolType tool)
+        private void SetToolCursor(ToolType tool)
         {
-            BitmapUtility.SelectedTool = ToolSet.Find(x=> x.ToolType == tool);
             if (tool != ToolType.None && tool != ToolType.ColorPicker)
             {
-               ToolCursor = BitmapUtility.SelectedTool.Cursor;
+                ToolCursor = BitmapUtility.SelectedTool.Cursor;
             }
             else
             {
                 ToolCursor = Cursors.Arrow;
             }
         }
+
         /// <summary>
         /// When mouse is up stops recording changes.
         /// </summary>

PixiEditor/Views/MainWindow.xaml

@@ -20,6 +20,7 @@
         <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
         <helpers:ToolSizeToIntConverter x:Key="ToolSizeToIntConverter"/>
         <converters:BoolToColorConverter x:Key="BoolToColorConverter"/>
+        <converters:BoolToIntConverter x:Key="BoolToIntConverter"/>
     </Window.Resources>
 
     <i:Interaction.Triggers>
@@ -35,12 +36,13 @@
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
             <RowDefinition Height="30*"/>
-            <RowDefinition Height="908*"/>
+            <RowDefinition Height="29*"/>
+            <RowDefinition Height="895*"/>
             <RowDefinition Height="30*"/>
         </Grid.RowDefinitions>
 
-        <Border Grid.ColumnSpan="3" Background="#FF363434" Grid.Row="0" Height="30"/>
-        <WrapPanel Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Panel.ZIndex="100">
+        <Border Grid.ColumnSpan="3" Background="#FF363434" Grid.Row="0"/>
+        <WrapPanel Grid.ColumnSpan="3" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Panel.ZIndex="100" Margin="0,0,147,0">
             <vws:MenuButton Text="File" Margin="0,0,-140,0">
                 <vws:MenuButton.Item>
                     <StackPanel>
@@ -67,7 +69,10 @@
                 </vws:MenuButton.Item>
             </vws:MenuButton>
         </WrapPanel>
-        <Grid Grid.Column="1" Grid.Row="1" Background="#303030" Margin="0,5,5,0">
+        <StackPanel Background="#404040" Orientation="Horizontal" Grid.Row="1" Grid.ColumnSpan="2">
+            
+        </StackPanel>
+        <Grid Grid.Column="1" Grid.Row="2" Background="#303030" Margin="0,7,5,0" Grid.RowSpan="2">
             <Grid>
                 <vws:MainDrawingPanel CenterOnStart="True" Cursor="{Binding ToolCursor}">
                     <vws:MainDrawingPanel.Item>
@@ -106,55 +111,26 @@
             </Grid>
         </Grid>
 
-        <StackPanel Cursor="Arrow" Grid.Row="1" Grid.Column="0" Margin="0,5,5,0" Background="#404040">
+        <StackPanel Orientation="Vertical" Cursor="Arrow" Grid.Row="2" Grid.Column="0" Margin="0,7,5,0" Background="#404040" Grid.RowSpan="2">
             <TextBox Style="{StaticResource DarkTextBoxStyle}" Margin="0,10,0,0" Text="{Binding ToolSize, Mode=TwoWay,Converter={StaticResource ToolSizeToIntConverter}}" TextAlignment="Center" MaxLength="4">
                 <i:Interaction.Behaviors>
                     <behaviors:TextBoxNumericFinisherBehavior/>
                 </i:Interaction.Behaviors>
             </TextBox>
-            <Button Style="{StaticResource ToolButtonStyle}" Command="{Binding SelectToolCommand, Mode=OneWay}" CommandParameter="Pen" ToolTip="Standard brush (B)">
-                <Button.Background>
-                    <ImageBrush ImageSource="/Images/PenImage.png" Stretch="Uniform"/>
-                </Button.Background>
-            </Button>
-            <Button Style="{StaticResource ToolButtonStyle}" Command="{Binding SelectToolCommand, Mode=OneWay}" CommandParameter="Bucket" ToolTip="Fills area with color (G)">
-                <Button.Background>
-                    <ImageBrush ImageSource="/Images/BucketImage.png" Stretch="Uniform"/>
-                </Button.Background>
-            </Button>
-            <Button Style="{StaticResource ToolButtonStyle}" Command="{Binding SelectToolCommand, Mode=OneWay}" CommandParameter="Line" ToolTip="Draws line on canvas (L)">
-                <Button.Background>
-                    <ImageBrush ImageSource="/Images/LineImage.png" Stretch="Uniform"/>
-                </Button.Background>
-            </Button>
-            <Button Style="{StaticResource ToolButtonStyle}" Command="{Binding SelectToolCommand, Mode=OneWay}" CommandParameter="Circle" ToolTip="Draws circle on cavnas (C)">
-                <Button.Background>
-                    <ImageBrush ImageSource="/Images/CircleImage.png" Stretch="Uniform"/>
-                </Button.Background>
-            </Button>
-            <Button Style="{StaticResource ToolButtonStyle}" Command="{Binding SelectToolCommand, Mode=OneWay}" CommandParameter="Rectangle" ToolTip="Draws rectanlge on cavnas (R)">
-                <Button.Background>
-                    <ImageBrush ImageSource="/Images/RectangleImage.png" Stretch="Uniform"/>
-                </Button.Background>
-            </Button>
-            <Button Style="{StaticResource ToolButtonStyle}" Command="{Binding SelectToolCommand, Mode=OneWay}" CommandParameter="ColorPicker" ToolTip="Color picker, sets color from pixel as active (O)">
-                <Button.Background>
-                    <ImageBrush ImageSource="/Images/PipetteImage.png" Stretch="Uniform"/>
-                </Button.Background>
-            </Button>
-            <Button Style="{StaticResource ToolButtonStyle}" Command="{Binding SelectToolCommand, Mode=OneWay}" CommandParameter="Earser" ToolTip="Earser, Earsers color from pixel (E)">
-                <Button.Background>
-                    <ImageBrush ImageSource="/Images/EarserImage.png" Stretch="Uniform"/>
-                </Button.Background>
-            </Button>
-            <Button Style="{StaticResource ToolButtonStyle}" Opacity="1" Command="{Binding SelectToolCommand, Mode=OneWay}" CommandParameter="Brightness" ToolTip="Makes pixel brighter or darker pixel (U)">
-                <Button.Background>
-                    <ImageBrush ImageSource="/Images/LightenImage.png" Stretch="Uniform"/>
-                </Button.Background>
-            </Button>
+            <ItemsControl ItemsSource="{Binding ToolSet}">
+                <ItemsControl.ItemTemplate>
+                    <DataTemplate>
+                        <Button BorderBrush="White" BorderThickness="{Binding IsActive, Converter={StaticResource BoolToIntConverter}}" Style="{StaticResource ToolButtonStyle}" Command="{Binding Path=DataContext.SelectToolCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" CommandParameter="{Binding ToolType}" ToolTip="{Binding Tooltip}">
+                            <Button.Background>
+                                <ImageBrush ImageSource="{Binding ImagePath}" Stretch="Uniform"/>
+                            </Button.Background>
+                        </Button>
+                    </DataTemplate>
+                </ItemsControl.ItemTemplate>
+            </ItemsControl>
         </StackPanel>
 
-        <DockPanel Grid.Column="2" Grid.Row="1" Background="#404040">
+        <DockPanel Grid.Column="2" Background="#404040" Grid.Row="1" Margin="0,0,0,0" Grid.RowSpan="2">
             <Grid DockPanel.Dock="Top" HorizontalAlignment="Center" Width="100"  Margin="0,20,0,0" Height="100">
                 <Rectangle Height="70" Width="70" HorizontalAlignment="Left" VerticalAlignment="Top" Stroke="Black" StrokeThickness="1" Panel.ZIndex="1">
                     <Rectangle.Fill>