Sets the navigation buttons to be dimmed 26/134026/1
authorGeunsun, Lee <gs86.lee@samsung.com>
Wed, 14 Jun 2017 08:24:33 +0000 (17:24 +0900)
committerGeunsun, Lee <gs86.lee@samsung.com>
Wed, 14 Jun 2017 08:25:58 +0000 (17:25 +0900)
The indicator of the selected direction is dimmed when the zoom is moved
to the upper/lower - left/right corner of the screen.

Change-Id: Id4817ef4e9cd07acca89b57b0c722d0bf947d1cb

TVMediaHub/TVMediaHub.Tizen/Controls/CustomImageButton.xaml [deleted file]
TVMediaHub/TVMediaHub.Tizen/Controls/CustomImageButton.xaml.cs [deleted file]
TVMediaHub/TVMediaHub.Tizen/Controls/CustomImageRenderer.cs [deleted file]
TVMediaHub/TVMediaHub.Tizen/Controls/MediaHubButton.xaml.cs
TVMediaHub/TVMediaHub.Tizen/Controls/ZoomNaviButton.xaml [new file with mode: 0644]
TVMediaHub/TVMediaHub.Tizen/Controls/ZoomNaviButton.xaml.cs [new file with mode: 0644]
TVMediaHub/TVMediaHub.Tizen/Controls/ZoomNaviButtonRenderer.cs [new file with mode: 0644]
TVMediaHub/TVMediaHub.Tizen/Views/ImageViewerZoom.xaml
TVMediaHub/TVMediaHub.Tizen/Views/ImageViewerZoom.xaml.cs

diff --git a/TVMediaHub/TVMediaHub.Tizen/Controls/CustomImageButton.xaml b/TVMediaHub/TVMediaHub.Tizen/Controls/CustomImageButton.xaml
deleted file mode 100755 (executable)
index bf9f5b4..0000000
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8" ?>
-<Image xmlns="http://xamarin.com/schemas/2014/forms"
-             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="TVMediaHub.Tizen.Controls.CustomImageButton" >
-</Image>
\ No newline at end of file
diff --git a/TVMediaHub/TVMediaHub.Tizen/Controls/CustomImageButton.xaml.cs b/TVMediaHub/TVMediaHub.Tizen/Controls/CustomImageButton.xaml.cs
deleted file mode 100755 (executable)
index 6dac256..0000000
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- * Copyright (c) 2017 Samsung Electronics Co., Ltd
- *
- * Licensed under the Flora License, Version 1.1 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://floralicense.org/license/
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-using System;
-using System.Windows.Input;
-using Xamarin.Forms;
-
-namespace TVMediaHub.Tizen.Controls
-{
-    /// <summary>
-    /// A custom image for displaying the buttons of image viewer
-    /// </summary>
-    public partial class CustomImageButton : Image
-    {
-        public event EventHandler<string> OnButtonUp;
-        public event EventHandler<string> OnButtonDown;
-        public event EventHandler Clicked;
-
-        private string imgViewerPrefix = "btn_viewer_control_";
-        private string imgZoomPrefix = "ic_zoom_arrow_";
-        private string imgNormalPostFix = "_normal.png";
-        private string imgPressedPostFix = "_pressed.png";
-
-        /// <summary>
-        /// Gets or sets the button type
-        /// </summary>
-        public string Type
-        {
-            get;
-            set;
-        }
-
-        /// <summary>
-        /// Gets or sets the button subtype
-        /// </summary>
-        public string SubType
-        {
-            get;
-            set;
-        }
-
-        /// <summary>
-        /// A command will be executed if the button image is tapped
-        /// </summary>
-        public ICommand TapGestureCommand
-        {
-            get;
-            set;
-        }
-
-        /// <summary>
-        /// A method for handling the actions when the button is pressed.
-        /// </summary>
-        public void OnButtonPressed()
-        {
-            if (Type.Equals("Viewer"))
-            {
-                Source = imgViewerPrefix + SubType.ToLower() + imgPressedPostFix;
-            }
-
-            if (Type.Equals("Zoom"))
-            {
-                Source = imgZoomPrefix + SubType.ToLower() + imgPressedPostFix;
-            }
-
-            OnButtonDown?.Invoke(this, SubType);
-        }
-
-        /// <summary>
-        /// A method for handling the actions when the button is released.
-        /// </summary>
-        public void OnButtonReleased()
-        {
-            if (Type.Equals("Viewer"))
-            {
-                Source = imgViewerPrefix + SubType.ToLower() + imgNormalPostFix;
-            }
-            else if (Type.Equals("Zoom"))
-            {
-                Source = imgZoomPrefix + SubType.ToLower() + imgNormalPostFix;
-            }
-
-            OnButtonUp?.Invoke(this, SubType);
-        }
-
-        /// <summary>
-        /// A constructor
-        /// Implements the TapGestureCommand
-        /// </summary>
-        public CustomImageButton()
-        {
-            InitializeComponent();
-
-            TapGestureCommand = new Command(() =>
-            {
-                Clicked?.Invoke(this, EventArgs.Empty);
-            });
-        }
-    }
-}
diff --git a/TVMediaHub/TVMediaHub.Tizen/Controls/CustomImageRenderer.cs b/TVMediaHub/TVMediaHub.Tizen/Controls/CustomImageRenderer.cs
deleted file mode 100755 (executable)
index 04baadf..0000000
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
- * Copyright (c) 2017 Samsung Electronics Co., Ltd
- *
- * Licensed under the Flora License, Version 1.1 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://floralicense.org/license/
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-using Xamarin.Forms.Platform.Tizen;
-using TVMediaHub.Tizen.Controls;
-
-[assembly: ExportRenderer(typeof(CustomImageButton), typeof(CustomImageRenderer))]
-namespace TVMediaHub.Tizen.Controls
-{
-    /// <summary>
-    /// A custom renderer for making custom image button.
-    /// </summary>
-    public class CustomImageRenderer : ImageRenderer
-    {
-        private ElmSharp.GestureLayer GestureRecognizer;
-
-        /// <summary>
-        /// Creates GestureRecognizer and sets callbacks for tap and longtap event when Element is changed.
-        /// </summary>
-        /// <param name="args">An image element property changed event's argument</param>
-        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Image> args)
-        {
-            base.OnElementChanged(args);
-
-            if (Control == null || Element == null)
-            {
-                return;
-            }
-
-            if (GestureRecognizer == null)
-            {
-                GestureRecognizer = new ElmSharp.GestureLayer(Control);
-                GestureRecognizer.Attach(Control);
-            }
-
-            CustomImageButton BtnElement = Element as CustomImageButton;
-            if (BtnElement == null)
-            {
-                return;
-            }
-
-            GestureRecognizer.SetTapCallback(ElmSharp.GestureLayer.GestureType.Tap, ElmSharp.GestureLayer.GestureState.Start, x =>
-            {
-               BtnElement.OnButtonPressed();
-            });
-
-            GestureRecognizer.SetTapCallback(ElmSharp.GestureLayer.GestureType.Tap, ElmSharp.GestureLayer.GestureState.End, x =>
-            {
-                BtnElement.OnButtonReleased();
-                BtnElement.TapGestureCommand?.Execute(null);
-            });
-
-            GestureRecognizer.SetTapCallback(ElmSharp.GestureLayer.GestureType.LongTap, ElmSharp.GestureLayer.GestureState.Start, x =>
-            {
-                BtnElement.OnButtonPressed();
-            });
-
-            GestureRecognizer.SetTapCallback(ElmSharp.GestureLayer.GestureType.LongTap, ElmSharp.GestureLayer.GestureState.End, x =>
-            {
-                BtnElement.OnButtonReleased();
-            });
-
-            Control.RepeatEvents = true;
-        }
-    }
-}
index 165ccd87d57c9168be69366c0dcb94592de7f005..89a265e225357086d31c6a4932909ecc44faee33 100755 (executable)
@@ -15,7 +15,6 @@
  */
 
 using System;
-using TVMediaHub.Tizen.Utils;
 using Xamarin.Forms;
 
 namespace TVMediaHub.Tizen.Controls
@@ -29,6 +28,7 @@ namespace TVMediaHub.Tizen.Controls
         /// An Event Handler to notify if the button is clicked
         /// </summary>
         public event EventHandler Clicked;
+
         /// <summary>
         /// A value of effect duration
         /// </summary>
diff --git a/TVMediaHub/TVMediaHub.Tizen/Controls/ZoomNaviButton.xaml b/TVMediaHub/TVMediaHub.Tizen/Controls/ZoomNaviButton.xaml
new file mode 100644 (file)
index 0000000..d028754
--- /dev/null
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Image xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="TVMediaHub.Tizen.Controls.ZoomNaviButton" >
+</Image>
\ No newline at end of file
diff --git a/TVMediaHub/TVMediaHub.Tizen/Controls/ZoomNaviButton.xaml.cs b/TVMediaHub/TVMediaHub.Tizen/Controls/ZoomNaviButton.xaml.cs
new file mode 100644 (file)
index 0000000..de2b4e6
--- /dev/null
@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+using System;
+using System.Windows.Input;
+using Xamarin.Forms;
+
+namespace TVMediaHub.Tizen.Controls
+{
+    /// <summary>
+    /// A custom image for displaying the buttons of image viewer
+    /// </summary>
+    public partial class ZoomNaviButton : Image
+    {
+        /// <summary>
+        /// An event handler to notify if the button is up
+        /// </summary>
+        public event EventHandler<string> OnButtonUp;
+
+        /// <summary>
+        /// An event handler to notify if the button is down
+        /// </summary>
+        public event EventHandler<string> OnButtonDown;
+
+        /// <summary>
+        /// An event handler to notify if the button is clicked
+        /// </summary>
+        public event EventHandler Clicked;
+
+        /// <summary>
+        /// A prefix of the navigation button image
+        /// </summary>
+        private string imgZoomPrefix = "ic_zoom_arrow_";
+
+        /// <summary>
+        /// A postfix of the navigation button image on normal status
+        /// </summary>
+        private string imgNormalPostFix = "_normal.png";
+
+        /// <summary>
+        /// A postfix of the navigation button image on pressed status
+        /// </summary>
+        private string imgPressedPostFix = "_pressed.png";
+
+        /// <summary>
+        /// Gets or sets the button type
+        /// </summary>
+        public string Type
+        {
+            get;
+            set;
+        }
+
+        /// <summary>
+        /// A command will be executed if the button image is tapped
+        /// </summary>
+        public ICommand TapGestureCommand
+        {
+            get;
+            set;
+        }
+
+        /// <summary>
+        /// A method for handling the actions when the button is pressed.
+        /// </summary>
+        public void OnButtonPressed()
+        {
+            Source = imgZoomPrefix + Type.ToLower() + imgPressedPostFix;
+
+            OnButtonDown?.Invoke(this, Type);
+        }
+
+        /// <summary>
+        /// A method for handling the actions when the button is released.
+        /// </summary>
+        public void OnButtonReleased()
+        {
+            Source = imgZoomPrefix + Type.ToLower() + imgNormalPostFix;
+
+            OnButtonUp?.Invoke(this, Type);
+        }
+
+        /// <summary>
+        /// A constructor
+        /// Implements the TapGestureCommand
+        /// </summary>
+        public ZoomNaviButton()
+        {
+            InitializeComponent();
+
+            TapGestureCommand = new Command(() =>
+            {
+                Clicked?.Invoke(this, EventArgs.Empty);
+            });
+        }
+    }
+}
diff --git a/TVMediaHub/TVMediaHub.Tizen/Controls/ZoomNaviButtonRenderer.cs b/TVMediaHub/TVMediaHub.Tizen/Controls/ZoomNaviButtonRenderer.cs
new file mode 100644 (file)
index 0000000..b427570
--- /dev/null
@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+using Xamarin.Forms.Platform.Tizen;
+using TVMediaHub.Tizen.Controls;
+
+[assembly: ExportRenderer(typeof(ZoomNaviButton), typeof(ZoomNaviButtonRenderer))]
+namespace TVMediaHub.Tizen.Controls
+{
+    /// <summary>
+    /// A custom renderer for making custom image button.
+    /// </summary>
+    public class ZoomNaviButtonRenderer : ImageRenderer
+    {
+        private ElmSharp.GestureLayer GestureRecognizer;
+
+        /// <summary>
+        /// Creates GestureRecognizer and sets callbacks for tap and long tap event when Element is changed.
+        /// </summary>
+        /// <param name="args">An image element property changed event's argument</param>
+        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Image> args)
+        {
+            base.OnElementChanged(args);
+
+            if (Control == null || Element == null)
+            {
+                return;
+            }
+
+            if (GestureRecognizer == null)
+            {
+                GestureRecognizer = new ElmSharp.GestureLayer(Control);
+                GestureRecognizer.Attach(Control);
+            }
+
+            ZoomNaviButton BtnElement = Element as ZoomNaviButton;
+            if (BtnElement == null)
+            {
+                return;
+            }
+
+            GestureRecognizer.SetTapCallback(ElmSharp.GestureLayer.GestureType.Tap, ElmSharp.GestureLayer.GestureState.Start, x =>
+            {
+               BtnElement.OnButtonPressed();
+            });
+
+            GestureRecognizer.SetTapCallback(ElmSharp.GestureLayer.GestureType.Tap, ElmSharp.GestureLayer.GestureState.End, x =>
+            {
+                BtnElement.OnButtonReleased();
+                BtnElement.TapGestureCommand?.Execute(null);
+            });
+
+            GestureRecognizer.SetTapCallback(ElmSharp.GestureLayer.GestureType.LongTap, ElmSharp.GestureLayer.GestureState.Start, x =>
+            {
+                BtnElement.OnButtonPressed();
+            });
+
+            GestureRecognizer.SetTapCallback(ElmSharp.GestureLayer.GestureType.LongTap, ElmSharp.GestureLayer.GestureState.End, x =>
+            {
+                BtnElement.OnButtonReleased();
+            });
+
+            Control.RepeatEvents = true;
+        }
+    }
+}
index df2c981c8361c45bb562968e8e296e13355aa517..077d397f2ed61c35ed02b772281dad276562e08c 100755 (executable)
                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}"
                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}" >
-            <Controls:CustomImageButton x:Name="UpButton"
-                                        Type="Zoom"
-                                        SubType="Up"
-                                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.077778}"
-                                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.04375}"
-                                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.037037}"
-                                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.478125}"
-                                        Source="ic_zoom_arrow_up_normal.png" />
-            <Controls:CustomImageButton x:Name="DownButton"
-                                        Type="Zoom"
-                                        SubType="Down"
-                                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.077778}"
-                                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.04375}"
-                                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.885185}"
-                                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.478125}"
-                                        Source="ic_zoom_arrow_down_normal.png" />
-            <Controls:CustomImageButton x:Name="LeftButton"
-                                        Type="Zoom"
-                                        SubType="Left"
-                                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.077778}"
-                                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.04375}"
-                                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.461111}"
-                                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.02083}"
-                                        Source="ic_zoom_arrow_left_normal.png" />
-            <Controls:CustomImageButton x:Name="RightButton"
-                                        Type="Zoom"
-                                        SubType="Right"
-                                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.077778}"
-                                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.04375}"
-                                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.461111}"
-                                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.9354167}"
-                                        Source="ic_zoom_arrow_right_normal.png" />
+            <Controls:ZoomNaviButton x:Name="UpButton"
+                                     Type="Up"
+                                     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.077778}"
+                                     RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.04375}"
+                                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.037037}"
+                                     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.478125}"
+                                     Source="ic_zoom_arrow_up_normal.png" />
+            <Controls:ZoomNaviButton x:Name="DownButton"
+                                     Type="Down"
+                                     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.077778}"
+                                     RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.04375}"
+                                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.885185}"
+                                     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.478125}"
+                                     Source="ic_zoom_arrow_down_normal.png" />
+            <Controls:ZoomNaviButton x:Name="LeftButton"
+                                     Type="Left"
+                                     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.077778}"
+                                     RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.04375}"
+                                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.461111}"
+                                     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.02083}"
+                                     Source="ic_zoom_arrow_left_normal.png" />
+            <Controls:ZoomNaviButton x:Name="RightButton"
+                                     Type="Right"
+                                     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.077778}"
+                                     RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.04375}"
+                                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.461111}"
+                                     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.9354167}"
+                                     Source="ic_zoom_arrow_right_normal.png" />
             <Grid x:Name="BackKeyInfo"
                   RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Height, Factor=0.037037}"
                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ZoomGrid, Property=Width, Factor=0.059375}"
index 2bf80494658731b52094b4ca27ae26bd74337a49..6d068b7e9cc243dd6d7e62c4c0f66287da095cec 100755 (executable)
@@ -51,32 +51,32 @@ namespace TVMediaHub.Tizen.Views
         private ElmSharp.ImageOrientation imgOrientation = ElmSharp.ImageOrientation.None;
 
         /// <summary>
-        /// The background thumbnail for the minimap
+        /// The background thumbnail for the mini map
         /// </summary>
         private ElmSharp.Rectangle backgroundThumbnail;
 
         /// <summary>
-        /// The thumbnail image for the minimap
+        /// The thumbnail image for the mini map
         /// </summary>
         private ElmSharp.Image thumbnailImg;
 
         /// <summary>
-        /// The dim image for the minimap
+        /// The dim image for the mini map
         /// </summary>
         private ElmSharp.Image thumbnailDim;
 
         /// <summary>
-        /// The clipping image for the minimap
+        /// The clipping image for the mini map
         /// </summary>
         private ElmSharp.Image clippingImg;
 
         /// <summary>
-        /// The clipper for the minimap
+        /// The clipper for the mini map
         /// </summary>
         private ElmSharp.Rectangle clipper;
 
         /// <summary>
-        /// The clipper border image for the minimap
+        /// The clipper border image for the mini map
         /// </summary>
         private ElmSharp.Image clipperBorder;
 
@@ -139,14 +139,14 @@ namespace TVMediaHub.Tizen.Views
         /// </summary>
         protected override void InitializePage()
         {
-            /// Grabs the hw keys to move the given image
+            /// Grabs the hardware keys to move the given image
             GrabMoveKeys();
         }
 
         /// <summary>
         /// A method for finalizing page when the page is disappeared
         /// Ungrabs move keys of the remote controller
-        /// Releases resources of the minimap
+        /// Releases resources of the mini map
         /// </summary>
         protected override void FinalizePage()
         {
@@ -204,7 +204,7 @@ namespace TVMediaHub.Tizen.Views
         }
 
         /// <summary>
-        /// Ungrab move keys of the remote controller
+        /// Ungrabs move keys of the remote controller
         /// </summary>
         private void UngrabMoveKeys()
         {
@@ -233,7 +233,7 @@ namespace TVMediaHub.Tizen.Views
 
             int direction = MoveDirection.FindIndex(x => x.Equals(e.KeyName));
             object[] buttons = new object[4] { UpButton, DownButton, LeftButton, RightButton };
-            (buttons[direction] as CustomImageButton).OnButtonReleased();
+            (buttons[direction] as ZoomNaviButton).OnButtonReleased();
         }
 
         /// <summary>
@@ -250,15 +250,44 @@ namespace TVMediaHub.Tizen.Views
                 return;
             }
 
-            MoveCurrentImage(e.KeyName);
-
             int direction = MoveDirection.FindIndex(x => x.Equals(e.KeyName));
             object[] buttons = new object[4] { UpButton, DownButton, LeftButton, RightButton };
-            (buttons[direction] as CustomImageButton).OnButtonPressed();
+            (buttons[direction] as ZoomNaviButton).OnButtonPressed();
+        }
+
+        /// <summary>
+        /// Sets the navigation buttons to be normal
+        /// </summary>
+        private void SetNaviButtonNormal()
+        {
+            if (clipper == null)
+            {
+                return;
+            }
+
+            if (clipper.Geometry.Y != thumbnailDim.Geometry.Y)
+            {
+                UpButton.Opacity = 1.0;
+            }
+
+            if ((clipper.Geometry.Y + clipper.Geometry.Height) != (thumbnailDim.Geometry.Y + thumbnailDim.Geometry.Height))
+            {
+                DownButton.Opacity = 1.0;
+            }
+
+            if (clipper.Geometry.X != thumbnailDim.Geometry.X)
+            {
+                LeftButton.Opacity = 1.0;
+            }
+
+            if ((clipper.Geometry.X + clipper.Geometry.Width) != (thumbnailDim.Geometry.X + thumbnailDim.Geometry.Width))
+            {
+                RightButton.Opacity = 1.0;
+            }
         }
 
         /// <summary>
-        /// Moves the current image and the clipper of the minimap
+        /// Moves the current image and the clipper of the mini map
         /// </summary>
         /// <param name="direction">The direction to move</param>
         private void MoveCurrentImage(string direction)
@@ -273,16 +302,20 @@ namespace TVMediaHub.Tizen.Views
                     clipper.Move(clipper.Geometry.X, thumbnailDim.Geometry.Y);
                     CurrentImage.TranslateTo(CurrentImage.TranslationX, CurrentImage.Y, Convert.ToUInt32(moveDuration), Easing.CubicOut);
 
+                    UpButton.Opacity = 0.2;
+
                     return;
                 }
 
-                ElmSharp.EcoreAnimator.AddAmimator(delegate()
+                ElmSharp.EcoreAnimator.AddAmimator(delegate ()
                 {
-                    clipper.Move(clipper.Geometry.X, clipper.Geometry.Y - 1);
+                    clipper.Move(clipper.Geometry.X, clipper.Geometry.Y - 2);
                     if (clipper.Geometry.Y <= toY)
                     {
                         clipper.Move(clipper.Geometry.X, toY);
 
+                        SetNaviButtonNormal();
+
                         return false;
                     }
 
@@ -300,16 +333,20 @@ namespace TVMediaHub.Tizen.Views
                     clipper.Move(clipper.Geometry.X, (thumbnailDim.Geometry.Y + thumbnailDim.Geometry.Height) - clipper.Geometry.Height);
                     CurrentImage.TranslateTo(CurrentImage.TranslationX, -(CurrentImage.Height - App.MainWindow.Geometry.Height), Convert.ToUInt32(moveDuration), Easing.CubicOut);
 
+                    DownButton.Opacity = 0.2;
+
                     return;
                 }
 
-                ElmSharp.EcoreAnimator.AddAmimator(delegate()
+                ElmSharp.EcoreAnimator.AddAmimator(delegate ()
                 {
-                    clipper.Move(clipper.Geometry.X, clipper.Geometry.Y + 1);
+                    clipper.Move(clipper.Geometry.X, clipper.Geometry.Y + 2);
                     if (clipper.Geometry.Y >= toY)
                     {
                         clipper.Move(clipper.Geometry.X, toY);
 
+                        SetNaviButtonNormal();
+
                         return false;
                     }
 
@@ -327,16 +364,20 @@ namespace TVMediaHub.Tizen.Views
                     clipper.Move(thumbnailDim.Geometry.X, clipper.Geometry.Y);
                     CurrentImage.TranslateTo(CurrentImage.X, CurrentImage.TranslationY, Convert.ToUInt32(moveDuration), Easing.CubicOut);
 
+                    LeftButton.Opacity = 0.2;
+
                     return;
                 }
 
-                ElmSharp.EcoreAnimator.AddAmimator(delegate()
+                ElmSharp.EcoreAnimator.AddAmimator(delegate ()
                 {
-                    clipper.Move(clipper.Geometry.X - 1, clipper.Geometry.Y);
+                    clipper.Move(clipper.Geometry.X - 2, clipper.Geometry.Y);
                     if (clipper.Geometry.X <= toX)
                     {
                         clipper.Move(toX, clipper.Geometry.Y);
 
+                        SetNaviButtonNormal();
+
                         return false;
                     }
 
@@ -353,16 +394,20 @@ namespace TVMediaHub.Tizen.Views
                     clipper.Move((thumbnailDim.Geometry.X + thumbnailDim.Geometry.Width) - clipper.Geometry.Width, clipper.Geometry.Y);
                     CurrentImage.TranslateTo(-(CurrentImage.Width - App.MainWindow.Geometry.Width), CurrentImage.TranslationY, Convert.ToUInt32(moveDuration), Easing.CubicOut);
 
+                    RightButton.Opacity = 0.2;
+
                     return;
                 }
 
-                ElmSharp.EcoreAnimator.AddAmimator(delegate()
+                ElmSharp.EcoreAnimator.AddAmimator(delegate ()
                 {
-                    clipper.Move(clipper.Geometry.X + 1, clipper.Geometry.Y);
+                    clipper.Move(clipper.Geometry.X + 2, clipper.Geometry.Y);
                     if (clipper.Geometry.X >= toX)
                     {
                         clipper.Move(toX, clipper.Geometry.Y);
 
+                        SetNaviButtonNormal();
+
                         return false;
                     }
 
@@ -397,7 +442,7 @@ namespace TVMediaHub.Tizen.Views
         }
 
         /// <summary>
-        /// Creates the minimap
+        /// Creates the mini map
         /// </summary>
         private void CreateMiniMap()
         {
@@ -415,7 +460,7 @@ namespace TVMediaHub.Tizen.Views
                 Constraint.Constant(640), /// Width
                 Constraint.Constant(430)); /// Height
 
-            /// create the shadow of the mini map
+            /// Create the shadow of the mini map
             var backgroundShadow = new NinePatch
             {
                 Source = "img_zoom_minimap_shadow.9.png",
@@ -501,9 +546,9 @@ namespace TVMediaHub.Tizen.Views
             object[] buttons = new object[4] { UpButton, DownButton, LeftButton, RightButton };
             foreach (object button in buttons)
             {
-                (button as CustomImageButton).OnButtonDown += (s, e) =>
+                (button as ZoomNaviButton).OnButtonDown += (s, e) =>
                 {
-                    DbgPort.D("'" + e + "' is pressed");
+                    DbgPort.D("[" + e + "] is pressed");
 
                     MoveCurrentImage(e as string);
                 };