Disabled button color

Artur.4076Artur.4076 USUniversity ✭✭

I changed background color of a button and noticed that when button is disabled (IsEnabled=False) the button is not changed at all and looks same as enabled button. Then I decided to use triggers to set disabled background color as below:

<Style TargetType="Button">
    <Setter Property="BackgroundColor" Value="{StaticResource red}" />
    <Style.Triggers>
      <Trigger TargetType="Button" Property="IsEnabled" Value="True">
        <Setter Property="BackgroundColor" Value="{StaticResource red}" />
      </Trigger>
      <Trigger TargetType="Button" Property="IsEnabled" Value="False">
        <Setter Property="BackgroundColor" Value="{StaticResource grey}" />
      </Trigger>
    </Style.Triggers>
</Style>

Now enabled button looks good, disabled button looks good, but when button is disabled and then I change it to enabled, background color is changed to default one not to one that I defined.
What's is best way to customize disabled button style?

Answers

  • brentveebrentvee USMember

    I'm experiencing the same issue.
    Haven't found a solution yet.

  • glucoseglucose CNMember
    edited May 2015

    Just another bug in Xamarin Forms. There definitely exists conflict between the Style.Trigger and original button template.

    Try this workaround to see if it works:

    <Style TargetType="Button">
        <Setter Property="BackgroundColor" Value="{StaticResource red}" />
        <Style.Triggers>
          <Trigger TargetType="Button" Property="IsEnabled" Value="False">
            <Setter Property="BackgroundColor" Value="{StaticResource grey}" />
          </Trigger>
        </Style.Triggers>
    </Style>
    
  • brentveebrentvee USMember

    I'm using global styles defined in my app.cs

    
    resourceDictionary.Add(new Style(typeof (Button))
                {
                    
                    Setters =
                    {
                        new Setter {Property = Button.BackgroundColorProperty, Value = Color.Red},
                    }
                    ,Triggers =
                    {
                        new Trigger(typeof (Button))
                        {                       
                            Property = Button.IsEnabledProperty,
                            Value = false,
                            Setters =
                            {
                                new Setter {Property = Button.BackgroundColorProperty, Value = Color.Grey}
                            }
                        }
                    }
                });
    

    The initial toggle from Disabled to Enabled works fine, but then a second toggle causes the button to lose any inherited style and defaults to the Device default

  • Artur.4076Artur.4076 USUniversity ✭✭

    What I do as a workaround:
    I defined a new style DisabledButtonStyle and each time I change button IsEnabled to false I assign that style, when I set IsEnabled to true I set Style to null and it applies default button style defined by me.

  • SothyChanSothyChan USMember

    Just to add another workaround (I'm also experiencing this bug), I set the default style to my defined style for the enabled state. Whether it's enabled or not, is bounded to my MVVM property. When it gets disabled, the trigger occurs properly. When it's toggled to enabled, it uses the default style that I defined, which is the style for the enabled state.

  • StephenGrahamStephenGraham GBMember ✭✭

    I have spent hours trying to make the change of background color for a disabled button work for WinPhone but none of the solutions above worked for me. In the end I went for a simple but inelegant solution. I show two enabled buttons, but only one is ever visible at any one time. The snippets below are for a login page. The idea is that the login button is disabled until the user has provided user name and password etc.

    1. I added two properties to my view model, IsLoginEnabled and IsLoginDisabled and checked the content of the user name and password properties.

          public bool IsLoginDisabled
          {
              get
              {
                  if ((NameLogin == string.Empty) || (Password == string.Empty))
                      return true;
                  else
                      return false;
              }
          }
          public bool IsLoginEnabled
          {
              get
              {
                  if ((NameLogin == string.Empty) || (Password == string.Empty))
                      return false;
                  else
                      return true;
              }
          }
      
    2. Next, In my view model I added calls to OnPropertyChanged in both my user name and password properties.

          public string NameLogin
          {
              get
              {
                  return nameLogin;
              }
              set
              {
                  nameLogin = value;
                  OnPropertyChanged("IsLoginDisabled");
                  OnPropertyChanged("IsLoginEnabled");
              }
          }
          public string Password 
          {
              get 
              { 
                  return password;
              } 
              set
              {
                  password = value;
                  OnPropertyChanged("IsLoginDisabled");
                  OnPropertyChanged("IsLoginEnabled");
              }        }
      
    3. Then I create two styles one each for the enabled and disabled buttons.

        <Application.Resources>
          <ResourceDictionary>
            <Style x:Key="buttonDisabledStyle" TargetType="Button">
              <Setter Property="BackgroundColor">
                <Setter.Value>
                  <Color x:FactoryMethod="FromRgb">
                    <x:Arguments>
                      <x:Int32>211</x:Int32>
                      <x:Int32>211</x:Int32>
                      <x:Int32>211</x:Int32>
                    </x:Arguments>
                  </Color>
                </Setter.Value>
              </Setter>
              <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
              <Setter Property="TextColor" Value="White"/>
            </Style>      
            <Style x:Key="buttonEnabledStyle" TargetType="Button">
              <Setter Property="BackgroundColor">
                <Setter.Value>
                  <Color x:FactoryMethod="FromRgb">
                    <x:Arguments>
                      <x:Int32>128</x:Int32>
                      <x:Int32>128</x:Int32>
                      <x:Int32>128</x:Int32>
                    </x:Arguments>
                  </Color>
                </Setter.Value>
              </Setter>
              <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
              <Setter Property="TextColor" Value="White"/>
            </Style>
      
    4. And finally I created two buttons, btnEnabled and btnDisabled and bound their IsVisible property to the IsLoginEnabled and IsLoginDisabled property (their IsEnabled property never changes). There's probably a way of negating the value returned by the binding so that only the IsLoginEnabled would be needed.

          <StackLayout
            Orientation="Vertical"
            VerticalOptions="EndAndExpand">
            <StackLayout.Children>
              <Button
                x:Name="btnLoginEnabled"
                Command="{Binding LoginCommand}"
                IsVisible="{Binding IsLoginEnabled}"
                HorizontalOptions="FillAndExpand"
                Style="{StaticResource buttonEnabledStyle}"
                Text="{i18n:Translate btnLogin_Text}"/>
              <Button
                x:Name="btnLoginDisabled"
                IsVisible="{Binding IsLoginDisabled}"
                HorizontalOptions="FillAndExpand"
                Style="{StaticResource buttonDisabledStyle}"
                Text="{i18n:Translate btnLogin_Text}"/>          
            </StackLayout.Children>
          </StackLayout>
      

    Hope someone finds this useful.

  • SandyChapmanSandyChapman USMember

    Looks like this is fixed in version 1.4.4 of Xamarin.Forms.

  • RaviDixitRaviDixit USMember

    @SandyChapman did you find a solution for this one i am having an issue with the same, I have two buttons and i want to change background color of one button when i select the other example
    I have Button A and Button B both are of different color say Button A is of Red and Button B is of green, when I tap on Button A, Button B should change its background color from green to yellow

    Is this doable?

  • distantedistante USMember

    Looks like this is still an error. I have the same problem.

  • MarekMierzwaMarekMierzwa USUniversity ✭✭

    You could try to check this workaround. It uses a custom renderer and NSAttributedString for setting the title in disabled state. Works for me :)

Sign In or Register to comment.