Icons finally working with pngs (SVGs later maybe)

Aurora.gtk/Aurora.gtk.csproj

@@ -169,10 +169,6 @@
     <EmbeddedResource Include="LibVLCSharp.dll.config">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </EmbeddedResource>
-    <EmbeddedResource Include="Resources\backward.png" />
-    <EmbeddedResource Include="Resources\forwards.png" />
-    <EmbeddedResource Include="Resources\like.png" />
-    <EmbeddedResource Include="Resources\play.png" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="gtk-gui\generated.cs" />
@@ -509,6 +505,20 @@
       <Name>Aurora</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="Resources\play.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Resources\like.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Resources\forwards.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Resources\backward.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="..\packages\Grpc.Tools.2.25.0\build\Grpc.Tools.targets" Condition="Exists('..\packages\Grpc.Tools.2.25.0\build\Grpc.Tools.targets')" />
   <Import Project="..\packages\Microsoft.Bcl.Build.1.0.21\build\Microsoft.Bcl.Build.targets" Condition="Exists('..\packages\Microsoft.Bcl.Build.1.0.21\build\Microsoft.Bcl.Build.targets')" />

Aurora/Aurora.csproj

@@ -44,6 +44,7 @@
         <Folder Include="Design\Components\DataGrid\" />
         <Folder Include="Resources\" />
         <Folder Include="Design\Extensions\" />
+        <Folder Include="Design\Components\ImageButton\" />
     </ItemGroup>
     <ItemGroup>
       <Compile Remove="Design\Behaviors\DeselectItemBehaviorBase.cs" />

Aurora/Design/Components/ImageButton/ImageButton.xaml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Aurora.Design.Components.ImageButton.ImageButton">
+    <ContentView.GestureRecognizers>
+        <TapGestureRecognizer Tapped="OnButtonTapped" />
+    </ContentView.GestureRecognizers>
+    <ContentView.Content>
+        <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
+            <Image x:Name="imgButton" Aspect="AspectFit" />
+        </StackLayout>
+    </ContentView.Content>
+</ContentView>

Aurora/Design/Components/ImageButton/ImageButton.xaml.cs

@@ -0,0 +1,105 @@
+using System;
+using System.Collections.Generic;
+using Xamarin.Forms;
+
+namespace Aurora.Design.Components.ImageButton
+{
+    public partial class ImageButton : ContentView
+    {
+        public ImageButton()
+        {
+            InitializeComponent();
+        }
+
+        public static readonly BindableProperty SourceProperty =
+            BindableProperty.Create(
+                "Source",
+                typeof(ImageSource),
+                typeof(ImageButton),
+                null,
+                BindingMode.TwoWay,
+                propertyChanged: (bindable, oldValue, newValue) =>
+                {
+                    ImageButton control = (ImageButton)bindable;
+
+                    control.imgButton.Source = (ImageSource)newValue;
+                });
+
+        public static readonly BindableProperty CommandProperty = BindableProperty.Create(
+            "Command",
+            typeof(Command),
+            typeof(ImageButton),
+            null,
+            propertyChanged: (bindable, oldValue, newValue) =>
+            {
+                ImageButton control = (ImageButton)bindable;
+                var command = (Command)newValue;
+
+                CanExecute(command, control);
+
+                command.CanExecuteChanged += (sender, e) =>
+                {
+                    CanExecute(sender, control);
+                };
+            });
+
+        public static readonly BindableProperty CommandParameterProperty = BindableProperty.Create(
+            "CommandParameter",
+            typeof(object),
+            typeof(ImageButton),
+            null);
+
+        private static void CanExecute(object sender, ImageButton control)
+        {
+            var cmd = (Command)sender;
+            control.imgButton.IsEnabled = cmd.CanExecute(null);
+        }
+
+        public ImageSource Source
+        {
+            get { return (ImageSource)GetValue(SourceProperty); }
+            set { SetValue(SourceProperty, value); }
+        }
+
+
+        public event EventHandler<EventArgs> Tapped;
+
+        public Command Command
+        {
+            get { return (Command)GetValue(CommandProperty); }
+            set { SetValue(CommandProperty, value); }
+        }
+
+        public object CommandParameter
+        {
+            get { return GetValue(CommandParameterProperty); }
+            set { SetValue(CommandParameterProperty, value); }
+        }
+
+        protected void OnButtonTapped(object sender, EventArgs args)
+        {
+            object resolvedParameter;
+
+            if (CommandParameter != null)
+            {
+                resolvedParameter = CommandParameter;
+            }
+            else
+            {
+                resolvedParameter = args;
+            }
+
+            if (Command?.CanExecute(resolvedParameter) ?? true)
+            {
+                this.AbortAnimation("imgButtonAnim");
+                new Animation(v => imgButton.Scale = v, 1, 0.5).Commit(imgButton, "imgButtonAnim", 16, 150, Easing.SinOut,
+                    (v, c) =>
+                    {
+                        imgButton.Scale = 1;
+                        Tapped?.Invoke(this, args);
+                        Command?.Execute(resolvedParameter);
+                    });
+            }
+        }
+    }
+}

Aurora/Design/Components/MediaPlayer/Player.css

@@ -8,3 +8,11 @@
 #MediaInfoLayout label {
     margin-left: 20;
 }
+
+ImageButton {
+    margin-top: 10;
+    margin-left: 20;
+    margin-right: 20;
+    margin-bottom: 10;
+    width: 40;
+}

Aurora/Design/Components/MediaPlayer/Player.xaml

@@ -2,7 +2,7 @@
 <ContentView
      xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-     xmlns:local="clr-namespace:Aurora.Design.Extensions"
+     xmlns:imgBtn="clr-namespace:Aurora.Design.Components.ImageButton"
      x:Class="Aurora.Design.Components.MediaPlayer.Player">
     <ContentView.Resources>
         <StyleSheet
@@ -34,22 +34,15 @@
                  Grid.Column="1"
                  HorizontalOptions="Center"
                  Orientation="Horizontal">
-                <Image Source="{local:ImageResource Aurora.gtk.Resources.forward.png}" />
+                <imgBtn:ImageButton
-                <ImageButton
                      x:Name="PreviousButton"
-                     Source="{local:ImageResource Aurora.gtk.Resources.backward.png}"
+                     Source="Resources/backward.png"/>
-                     WidthRequest="100"
+                <imgBtn:ImageButton
-                     HeightRequest="50"></ImageButton>
-                <ImageButton
                      x:Name="PlayButton"
-                     Source="{local:ImageResource Aurora.gtk.Resources.play.png}"
+                     Source="Resources/play.png"/>
-                     WidthRequest="100"
+                <imgBtn:ImageButton
-                     HeightRequest="50"/>
-                <ImageButton
                      x:Name="NextButton"
-                     Source="{local:ImageResource Aurora.gtk.Resources.forward.png}"
+                     Source="Resources/forwards.png"/>
-                     WidthRequest="100"
-                     HeightRequest="50"/>
             </StackLayout>
         </Grid>
     </ContentView.Content>

Aurora/Design/Components/MediaPlayer/Player.xaml.cs

@@ -107,14 +107,14 @@ namespace Aurora.Design.Components.MediaPlayer
             if (newValue is Command)
             {
                 Command cmd = newValue as Command;
-                component.PreviousButton.Clicked += component.OnPreviousButtonClicked;
+                component.PreviousButton.Tapped += component.OnPreviousButtonClicked;
                 cmd.CanExecuteChanged += (sender, e) => OnPreviousButtonCanExecuteChanged(sender, e, component, cmd);
             }
 
             if (oldValue is Command && oldValue != null)
             {
                 Command cmd = newValue as Command;
-                component.PreviousButton.Clicked -= component.OnPreviousButtonClicked;
+                component.PreviousButton.Tapped -= component.OnPreviousButtonClicked;
                 cmd.CanExecuteChanged -= (sender, e) => OnPreviousButtonCanExecuteChanged(sender, e, component, cmd);
             }
         }
@@ -177,14 +177,14 @@ namespace Aurora.Design.Components.MediaPlayer
             if (newValue is Command)
             {
                 Command cmd = newValue as Command;
-                component.PlayButton.Clicked += component.OnPlayButtonClicked;
+                component.PlayButton.Tapped += component.OnPlayButtonClicked;
                 cmd.CanExecuteChanged += (sender, e) => OnPlayButtonCanExecuteChanged(sender, e, component, cmd);
             }
 
             if (oldValue is Command && oldValue != null)
             {
                 Command cmd = newValue as Command;
-                component.PlayButton.Clicked -= component.OnPlayButtonClicked;
+                component.PlayButton.Tapped -= component.OnPlayButtonClicked;
                 cmd.CanExecuteChanged -= (sender, e) => OnPlayButtonCanExecuteChanged(sender, e, component, cmd);
             }
         }
@@ -247,14 +247,14 @@ namespace Aurora.Design.Components.MediaPlayer
             if (newValue is Command)
             {
                 Command cmd = newValue as Command;
-                component.NextButton.Clicked += component.OnNextButtonClicked;
+                component.NextButton.Tapped += component.OnNextButtonClicked;
                 cmd.CanExecuteChanged += (sender, e) => OnNextButtonCanExecuteChanged(sender, e, component, cmd);
             }
 
             if (oldValue is Command && oldValue != null)
             {
                 Command cmd = oldValue as Command;
-                component.NextButton.Clicked -= component.OnNextButtonClicked;
+                component.NextButton.Tapped -= component.OnNextButtonClicked;
                 cmd.CanExecuteChanged -= (sender, e) => OnNextButtonCanExecuteChanged(sender, e, component, cmd);
             }
         }

Aurora/Design/Views/MainView/MainView.css

@@ -14,6 +14,7 @@
 
 #TitleContainer {
     margin-top: 10;
+    background-color: #3a3a3a;
 }
 
     #TitleContainer Label {
@@ -22,3 +23,7 @@
         font-size: 18;
         vertical-align: bottom;
     }
+
+#Player {
+    background-color: #626363;
+}

Aurora/Design/Views/MainView/MainView.xaml

@@ -15,7 +15,7 @@
             <RowDefinition Height="28"/>
             <RowDefinition Height="28"/>
             <RowDefinition Height="*"/>
-            <RowDefinition Height="50"/>
+            <RowDefinition Height="60"/>
         </Grid.RowDefinitions>
         <!--Header-->
         <StackLayout