Bug 37443 - Margin of Button on Windows does not change color when Background color is changed
Summary: Margin of Button on Windows does not change color when Background color is ch...
Status: RESOLVED FIXED
Alias: None
Product: Forms
Classification: Xamarin
Component: Windows ()
Version: 2.0.0
Hardware: PC Windows
: --- normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2016-01-06 12:04 UTC by John Hardman
Modified: 2017-03-13 17:34 UTC (History)
2 users (show)

Tags: Windows Button BackgroundColor margin
Is this bug a regression?: ---
Last known good build:


Attachments
Screenshot showing problem (1.62 KB, image/png)
2016-01-06 12:04 UTC, John Hardman
Details


Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
RESOLVED FIXED

Description John Hardman 2016-01-06 12:04:52 UTC
Created attachment 14464 [details]
Screenshot showing problem

When the BackgroundColor of a Button is changed on Windows, the color of the margin (the bit that is part of the Button on Windows, but outside the Border) does not always change. It should.

The MySwitch class below is a replacement for the Xamarin Switch control on Windows (as the Switch has various failings of its own). To demonstrate the problem with the margin color, create a Page and populate it using these three lines:

            var mySwitch = new MySwitch();
            mySwitch.HeightRequest = 44;
            Content = mySwitch;

Then, at run-time, simply click on On and Off. Whilst the background color inside the border changes as expected, the margin color outside the border does not change. It should. See the attached screenshot for what happens when the margin color does not change.


    public class MySwitch : Grid
    {
        private Button _onButton;
        private Button _offButton;

        public MySwitch()
        {
            BackgroundColor = Color.White;
            ClassId = "My_ClassId_Grid";
            ColumnDefinitions = new ColumnDefinitionCollection();
            ColumnSpacing = 0;
            HorizontalOptions = LayoutOptions.Fill;
            IsClippedToBounds = true;
            IsVisible = true;
            Padding = new Thickness(0, 0, 0, 0);
            RowDefinitions = new RowDefinitionCollection();
            RowSpacing = 0;
            StyleId = String.Empty;
            VerticalOptions = LayoutOptions.Start;

            int numberOfColumns = 2;
            int numberOfRows = 1;
            for (int columnNumber = 0; columnNumber < numberOfColumns; ++columnNumber)
            {
                ColumnDefinition columnDefinition = new ColumnDefinition
                {
                    Width = GridLength.Auto
                };

                ColumnDefinitions.Add(columnDefinition);
            }

            for (int rowNumber = 0; rowNumber < numberOfRows; ++rowNumber)
            {
                RowDefinition rowDefinition = new RowDefinition
                {
                    Height = GridLength.Auto
                };

                RowDefinitions.Add(rowDefinition);
            }

            _onButton = new Button
            {
                Text = "On",
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                VerticalOptions = LayoutOptions.Fill,
                BorderRadius = 0,
                BorderWidth = 0,
                BorderColor = Color.White
            };
            this.Children.Add(_onButton, 0, 1, 0, 1);
            _onButton.Clicked += OnButtonClicked;

            _offButton = new Button
            {
                Text = "Off",
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                VerticalOptions = LayoutOptions.Fill,
                BorderRadius = 0,
                BorderWidth = 0,
                BorderColor = Color.White,

            };
            this.Children.Add(_offButton, 1, 2, 0, 1);
            _offButton.Clicked += OffButtonClicked;

            SetSwitchColors();
        }

        ~MySwitch()
        {
            _onButton.Clicked -= OnButtonClicked;
            _offButton.Clicked -= OffButtonClicked;
        }

        private void SetSwitchColors()
        {
            if (IsToggled)
            {
                _onButton.TextColor = Color.White;
                _onButton.BackgroundColor = Color.FromRgb(0, 160, 192);
                _offButton.TextColor = Color.Gray;
                _offButton.BackgroundColor = Color.Silver;
                this.BackgroundColor = Color.White;
            }
            else
            {
                _onButton.TextColor = Color.Gray;
                _onButton.BackgroundColor = Color.Silver;
                _offButton.TextColor = Color.White;
                _offButton.BackgroundColor = Color.FromRgb(0, 160, 192);
                this.BackgroundColor = Color.White;
            }
        }

        public static readonly BindableProperty IsToggledProperty = BindableProperty.Create<MySwitch, bool>(p => p.IsToggled, false);

        public event EventHandler<ToggledEventArgs> Toggled;

        private bool _isToggled;
        public bool IsToggled
        {
            get { return (bool)GetValue(IsToggledProperty); }
            set
            {
                SetValue(IsToggledProperty, value);
            }
        }

        protected override void OnPropertyChanged(string propertyName)
        {
            base.OnPropertyChanged(propertyName);

            switch (propertyName)
            {
                case "IsToggled":
                    UpdateIsToggled();
                    break;
                default:
                    var v = propertyName;
                    break;
            }
        }

        private void UpdateIsToggled()
        {
            SetSwitchColors();
        }

        void OffButtonClicked(object sender, EventArgs e)
        {
            if (IsToggled)
            {
                IsToggled = false;
            }
        }

        void OnButtonClicked(object sender, EventArgs e)
        {
            if (!IsToggled)
            {
                IsToggled = true;
            }
        }

    } // public class MySwitch : Grid
Comment 1 Paul DiPietro [MSFT] 2017-03-13 17:34:08 UTC
This looks to have been fixed at some point as of 2.3.4 as far as I can tell. If I'm mistaken, please feel free to reopen, of course.