#37 Bindable Margins for UWP. Updated sample app

xabre · xabre · commit eb3693155c36 · 2017-10-05T21:00:31.000+02:00
diff --git a/Source/Plugin.Badge.Abstractions/TabBadge.cs b/Source/Plugin.Badge.Abstractions/TabBadge.cs
@@ -82,9 +82,10 @@ public static Thickness GetDefaultMargins()
             {
                 case Device.Android:
                     return new Thickness(-10, -5);
-                case Device.iOS:
                 case Device.Windows:
                     return new Thickness(0);
+                case Device.iOS:
+                    return new Thickness(0);
             }
 
             return new Thickness(0);
diff --git a/Source/Plugin.Badge.UWP/Converters/BadgeMarginConverter.cs b/Source/Plugin.Badge.UWP/Converters/BadgeMarginConverter.cs
@@ -0,0 +1,27 @@
+﻿using Plugin.Badge.Abstractions;
+using System;
+using Xamarin.Forms;
+
+namespace Plugin.Badge.UWP
+{
+    public class BadgeMarginConverter : Windows.UI.Xaml.Data.IValueConverter
+    {
+
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            var element = value as Element;
+            if (element != null)
+            {
+                var margin = TabBadge.GetBadgeMargin(element);
+                return new Windows.UI.Xaml.Thickness(margin.Left, margin.Top, margin.Right, margin.Bottom);
+            }
+
+            return null;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}
diff --git a/Source/Plugin.Badge.UWP/HeaderTemplate.xaml b/Source/Plugin.Badge.UWP/HeaderTemplate.xaml
@@ -19,6 +19,7 @@
         <local:TabIconConverter x:Key="TabIconConverter" />
         <local:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
         <local:BadgePositionConverter x:Key="BadgePositionConverter" />
+        <local:BadgeMarginConverter x:Key="BadgeMarginConverter" />
         <DataTemplate x:Key="HeaderTemplate">
             <RelativePanel>
                 <Image x:Name="icon"
@@ -34,6 +35,7 @@
                            Text="{Binding Title}"
                            Margin="10,0"
                            Visibility="{Binding ElementName=icon, Path=Source, Converter={StaticResource NullToVisibilityConverter}}" />
+                <!---->
                 <Grid CornerRadius="11"
                       Visibility="{Binding Converter={StaticResource BadgeVisibilityConverter}}"
                       Background="{Binding Converter={StaticResource BadgeColorConverter}}"
@@ -43,7 +45,8 @@
                       RelativePanel.AlignLeftWithPanel="{Binding Converter={StaticResource BadgePositionConverter}, ConverterParameter=AlignLeftWithPanel}"
                       RelativePanel.AlignHorizontalCenterWithPanel="{Binding Converter={StaticResource BadgePositionConverter}, ConverterParameter=AlignHorizontalCenterWithPanel}"
                       RelativePanel.AlignVerticalCenterWithPanel="{Binding Converter={StaticResource BadgePositionConverter}, ConverterParameter=AlignVerticalCenterWithPanel}"
-                      Padding="2.5,0.5,3,1.5">
+                      Padding="2.5,0.5,3,1.5"
+                      Margin="{Binding Converter={StaticResource BadgeMarginConverter}}">
                     <TextBlock Text="99"
                                Opacity="0"
                                FontSize="{Binding Converter={StaticResource BadgeFontSizeConverter}}" />
diff --git a/Source/Plugin.Badge.UWP/Plugin.Badge.UWP.csproj b/Source/Plugin.Badge.UWP/Plugin.Badge.UWP.csproj
@@ -107,6 +107,7 @@
   </PropertyGroup>
   <ItemGroup>
     <Compile Include="BadgedTabbedPageRenderer.cs" />
+    <Compile Include="Converters\BadgeMarginConverter.cs" />
     <Compile Include="Converters\BadgePositionConverter.cs" />
     <Compile Include="Converters\BadgeColorConverter.cs" />
     <Compile Include="Converters\BadgeFontSizeConverter.cs" />
diff --git a/Source/Sample/Plugin.Badge.Sample/Plugin.Badge.Sample.cs b/Source/Sample/Plugin.Badge.Sample/Plugin.Badge.Sample.cs
@@ -102,55 +102,108 @@ private ContentPage CreateTab1()
                     new Label
                     {
                         HorizontalTextAlignment = TextAlignment.Center,
-                        Text = "Welcome to Xamarin Forms Tab1!"
+                        Text = "Xamarin Forms Tab Badge Sample",
+                        FontSize = 14,
+                        FontAttributes = FontAttributes.Bold
                     },
                 }
             };
 
-            var buttonIncrement = new Button { Text = "Increment" };
-            buttonIncrement.SetBinding(Button.CommandProperty, "IncrementCommand");
-            var buttonDecrement = new Button { Text = "Decrement" };
-            buttonDecrement.SetBinding(Button.CommandProperty, "DecrementCommand");
-            
-            tab1Layout.Children.Add(buttonIncrement);
-            tab1Layout.Children.Add(buttonDecrement);
+            var stepper = new Stepper
+            {
+                Increment = 1,
+                Maximum = 111,
+                Minimum = 0,
+                VerticalOptions = LayoutOptions.Center
+            };
+
+            stepper.SetBinding(Stepper.ValueProperty, nameof(Tab1ViewModel.CountValue), BindingMode.TwoWay);
+
+            var grid = new Grid();
+            grid.ColumnDefinitions.Add(new ColumnDefinition());
+            grid.ColumnDefinitions.Add(new ColumnDefinition());
+            grid.Children.Add(new Label { Text = "Increment / Decrement Value: ", HorizontalTextAlignment = TextAlignment.End, VerticalTextAlignment = TextAlignment.Center }, 0, 0);
+            grid.Children.Add(stepper, 1, 0);
+            tab1Layout.Children.Add(grid);
 
             var buttonChangeColor = new Button { Text = "Change Color" };
-            buttonChangeColor.SetBinding(Button.CommandProperty, "ChangeColorCommand");
+            buttonChangeColor.SetBinding(Button.CommandProperty, nameof(Tab1ViewModel.ChangeColorCommand));
             tab1Layout.Children.Add(buttonChangeColor);
 
             var buttonChangeTextColor = new Button { Text = "Change Text Color" };
-            buttonChangeTextColor.SetBinding(Button.CommandProperty, "ChangeTextColorCommand");
+            buttonChangeTextColor.SetBinding(Button.CommandProperty, nameof(Tab1ViewModel.ChangeTextColorCommand));
             tab1Layout.Children.Add(buttonChangeTextColor);
 
             var buttonChangeFontAttributes = new Button { Text = "Change Font Attributes" };
-            buttonChangeFontAttributes.SetBinding(Button.CommandProperty, "ChangeFontAttributesCommand");
+            buttonChangeFontAttributes.SetBinding(Button.CommandProperty, nameof(Tab1ViewModel.ChangeFontAttributesCommand));
             tab1Layout.Children.Add(buttonChangeFontAttributes);
 
             var buttonChangePosition = new Button { Text = "Change Position" };
-            buttonChangePosition.SetBinding(Button.CommandProperty, "ChangePositionCommand");
+            buttonChangePosition.SetBinding(Button.CommandProperty, nameof(Tab1ViewModel.ChangePositionCommand));
             tab1Layout.Children.Add(buttonChangePosition);
 
             var buttonAddTab = new Button() { Text = "Add tab" };
             buttonAddTab.Clicked += ButtonAddTab_Clicked;
-            tab1Layout.Children.Add(buttonAddTab);
-
-
             var buttonRemoveTab = new Button() { Text = "Remove tab" };
-            buttonRemoveTab.Clicked += ButtonRemoveTab_Clicked; ;
-            tab1Layout.Children.Add(buttonRemoveTab);
+            buttonRemoveTab.Clicked += ButtonRemoveTab_Clicked;
+
+            grid = new Grid();
+            grid.ColumnDefinitions.Add(new ColumnDefinition());
+            grid.ColumnDefinitions.Add(new ColumnDefinition());
+            grid.Children.Add(buttonAddTab, 0, 0);
+            grid.Children.Add(buttonRemoveTab, 1, 0);
+            tab1Layout.Children.Add(grid);
+
+            grid = new Grid { RowSpacing = 0 };
+            grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
+            grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
+            grid.ColumnDefinitions.Add(new ColumnDefinition());
+            grid.ColumnDefinitions.Add(new ColumnDefinition());
+            grid.ColumnDefinitions.Add(new ColumnDefinition());
+            grid.ColumnDefinitions.Add(new ColumnDefinition());
+
+            var leftStepper = new Stepper { Increment = 1, Minimum = -50, Maximum = 50 };
+            leftStepper.SetBinding(Stepper.ValueProperty, nameof(Tab1ViewModel.MarginLeft), BindingMode.TwoWay);
+            var leftMarginLabel = new Label();
+            leftMarginLabel.SetBinding(Label.TextProperty, nameof(Tab1ViewModel.MarginLeft), stringFormat: "Left: {0}");
+            grid.Children.Add(leftMarginLabel, 0, 0);
+            grid.Children.Add(leftStepper, 0, 1);
+
+            var topStepper = new Stepper { Increment = 1, Minimum = -50, Maximum = 50 };
+            topStepper.SetBinding(Stepper.ValueProperty, nameof(Tab1ViewModel.MarginTop), BindingMode.TwoWay);
+            var topMarginLabel = new Label();
+            topMarginLabel.SetBinding(Label.TextProperty, nameof(Tab1ViewModel.MarginTop), stringFormat: "Top: {0}");
+            grid.Children.Add(topMarginLabel, 1, 0);
+            grid.Children.Add(topStepper, 1, 1);
+
+            var rightStepper = new Stepper { Increment = 1, Minimum = -50, Maximum = 50 };
+            rightStepper.SetBinding(Stepper.ValueProperty, nameof(Tab1ViewModel.MarginRight), BindingMode.TwoWay);
+            var rightMarginLabel = new Label();
+            rightMarginLabel.SetBinding(Label.TextProperty, nameof(Tab1ViewModel.MarginRight), stringFormat: "Right: {0}");
+            grid.Children.Add(rightMarginLabel, 2, 0);
+            grid.Children.Add(rightStepper, 2, 1);
+
+            var bottomStepper = new Stepper { Increment = 1, Minimum = -50, Maximum = 50 };
+            bottomStepper.SetBinding(Stepper.ValueProperty, nameof(Tab1ViewModel.MarginBottom), BindingMode.TwoWay);
+            var bottomMarginLabel = new Label();
+            bottomMarginLabel.SetBinding(Label.TextProperty, nameof(Tab1ViewModel.MarginBottom), stringFormat: "Bottom: {0}");
+            grid.Children.Add(bottomMarginLabel, 3, 0);
+            grid.Children.Add(bottomStepper, 3, 1);
+
+            tab1Layout.Children.Add(grid);
 
             var tab1 = new ContentPage
             {
                 Title = "Tab1",
                 Content = tab1Layout
             };
 
-            tab1.SetBinding(TabBadge.BadgeTextProperty, new Binding("Count"));
-            tab1.SetBinding(TabBadge.BadgeColorProperty, new Binding("BadgeColor"));
-            tab1.SetBinding(TabBadge.BadgeTextColorProperty, new Binding("BadgeTextColor"));
-            tab1.SetBinding(TabBadge.BadgeFontProperty, new Binding("BadgeFont"));
-            tab1.SetBinding(TabBadge.BadgePositionProperty, new Binding("Position"));
+            tab1.SetBinding(TabBadge.BadgeTextProperty, nameof(Tab1ViewModel.Count));
+            tab1.SetBinding(TabBadge.BadgeColorProperty, nameof(Tab1ViewModel.BadgeColor));
+            tab1.SetBinding(TabBadge.BadgeTextColorProperty, nameof(Tab1ViewModel.BadgeTextColor));
+            tab1.SetBinding(TabBadge.BadgeFontProperty, nameof(Tab1ViewModel.BadgeFont));
+            tab1.SetBinding(TabBadge.BadgePositionProperty, nameof(Tab1ViewModel.Position));
+            tab1.SetBinding(TabBadge.BadgeMarginProperty, nameof(Tab1ViewModel.Margin));
 
             tab1.BindingContext = new Tab1ViewModel();
             return tab1;
@@ -205,3 +258,4 @@ protected override void OnResume()
         }
     }
 }
+
diff --git a/Source/Sample/Plugin.Badge.Sample/ViewModels/Tab1ViewModel.cs b/Source/Sample/Plugin.Badge.Sample/ViewModels/Tab1ViewModel.cs
@@ -43,7 +43,7 @@ public class Tab1ViewModel : INotifyPropertyChanged
         };
 
         private static readonly List<BadgePosition> Positions = Enum.GetValues(typeof(BadgePosition)).Cast<BadgePosition>().ToList();
-        
+
         public Color BadgeColor { get; private set; }
         public Color BadgeTextColor { get; private set; }
 
@@ -67,20 +67,6 @@ public class Tab1ViewModel : INotifyPropertyChanged
             RaisePropertyChanged(nameof(BadgeTextColor));
         });
 
-        public ICommand IncrementCommand => new Command((obj) =>
-        {
-            _count++;
-            RaisePropertyChanged(nameof(Count));
-        });
-
-        public ICommand DecrementCommand => new Command((obj) =>
-       {
-           _count--;
-           if (_count < 0)
-               _count = 0;
-           RaisePropertyChanged(nameof(Count));
-       });
-
         public ICommand ChangeFontAttributesCommand => new Command((obj) =>
         {
             _fontIndex++;
@@ -99,17 +85,81 @@ public class Tab1ViewModel : INotifyPropertyChanged
             RaisePropertyChanged(nameof(Position));
         });
 
-        private int _count = 0;
         private int _color = 0;
+        private int _count = 0;
         private int _textColor = 0;
         private int _fontIndex = 0;
         private int _positionIndex = 0;
 
         public string Count => _count <= 0 ? string.Empty : _count.ToString();
 
+        public int CountValue
+        {
+            get { return _count; }
+            set
+            {
+                if (_count == value)
+                    return;
+
+                _count = value;
+                RaisePropertyChanged(nameof(CountValue));
+                RaisePropertyChanged(nameof(Count));
+            }
+        }
+
         public Font BadgeFont { get; private set; }
         public BadgePosition Position { get; private set; }
 
+        private int _marginLeft = (int)TabBadge.GetDefaultMargins().Left;
+        public int MarginLeft
+        {
+            get { return _marginLeft; }
+            set
+            {
+                _marginLeft = value;
+                RaisePropertyChanged(nameof(MarginLeft));
+                RaisePropertyChanged(nameof(Margin));
+            }
+        }
+
+        private int _marginTop = (int)TabBadge.GetDefaultMargins().Top;
+        public int MarginTop
+        {
+            get { return _marginTop; }
+            set
+            {
+                _marginTop = value;
+                RaisePropertyChanged(nameof(MarginTop));
+                RaisePropertyChanged(nameof(Margin));
+            }
+        }
+
+        private int _marginRight = (int)TabBadge.GetDefaultMargins().Right;
+        public int MarginRight
+        {
+            get { return _marginRight; }
+            set
+            {
+                _marginRight = value;
+                RaisePropertyChanged(nameof(MarginRight));
+                RaisePropertyChanged(nameof(Margin));
+            }
+        }
+
+        private int _marginBottom = (int)TabBadge.GetDefaultMargins().Bottom;
+        public int MarginBottom
+        {
+            get { return _marginBottom; }
+            set
+            {
+                _marginBottom = value;
+                RaisePropertyChanged(nameof(MarginBottom));
+                RaisePropertyChanged(nameof(Margin));
+            }
+        }
+
+        public Thickness Margin => new Thickness(_marginLeft, _marginTop, _marginRight, _marginBottom);
+        
         public event PropertyChangedEventHandler PropertyChanged;
 
         protected virtual void RaisePropertyChanged(string propertyName)

Original file line number	Diff line number	Diff line change
`@@ -82,9 +82,10 @@ public static Thickness GetDefaultMargins()`
`82`	`82`	`{`
`83`	`83`	`case Device.Android:`
`84`	`84`	`return new Thickness(-10, -5);`
`85`		`- case Device.iOS:`
`86`	`85`	`case Device.Windows:`
`87`	`86`	`return new Thickness(0);`
	`87`	`+ case Device.iOS:`
	`88`	`+ return new Thickness(0);`
`88`	`89`	`}`
`89`	`90`
`90`	`91`	`return new Thickness(0);`