按钮颜色绑定影响大小答案

【问题标题】：Button Color Binding is effecting the size按钮颜色绑定影响大小
【发布时间】：2021-02-24 23:29:27
【问题描述】：

我有三个按钮。如果元素可以更改，则保存按钮的颜色为绿色，如果无法更改，则为灰色。我将按钮的颜色与 ViewModel 上的属性绑定，该属性是一个字符串，并使用 Converter 转换字符串的值。当我从按钮中删除颜色的绑定时，尺寸很好，但使用绑定后，尺寸小于其他按钮的尺寸。

<StackLayout Grid.Row="3" 
                         Orientation="Horizontal" 
                         Padding="5,5,5,5"
                         BackgroundColor="CadetBlue">
                <Button x:Name="wczytajWzorzecButton"
                        WidthRequest="120" HeightRequest="20"
                        Text="Last" FontSize="12"
                        HorizontalOptions="CenterAndExpand"
                        Command="{Binding GetTemplateCommand}"/>
                <Button x:Name="wczytajOstatniButton"
                        WidthRequest="120" HeightRequest="20"
                        Text="First" FontSize="12"
                        HorizontalOptions="EndAndExpand"
                        Command="{Binding GetLastDocumentCommand}"/>
               <Button x:Name="saveButton"
                        WidthRequest="120" HeightRequest="20"
                        Text="Save" FontSize="12"
                        BackgroundColor="{Binding PropertyButtonColor, Converter={StaticResource StringToColorConverter}}"
                        HorizontalOptions="StartAndExpand"
                        Command="{Binding SaveDocumentCommand}"/>
            </StackLayout>

我的转换器：

public class StringToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string valueAsString = value.ToString();
        switch (valueAsString)
        {
            case ("White"):
                {
                    return Color.White;
                }
            case ("Gray"):
                {
                    return Color.DarkGray;
                }
            case ("LighGreen"):
            {
                return Color.LightGreen;
            }
            default:
                {
                    return Color.FromHex(value.ToString());
                }
        }
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

我的视图模型：

public string PropertyButtonColor 
    { 
        get
        {
            if (CanSave())                
                return "Green";                
            else
                return "Gray";
        } 
    }

关于它为什么会发生的任何想法？

【问题讨论】：

请截图。顺便说一句，为什么不在 ViewModel 中返回“Color.Green”而不是返回字符串。

标签： c# .net xaml xamarin xamarin.forms

【解决方案1】：

这个问题不是绑定引起的，如果你为Button设置了backgroundColor，这个Buttons的大小会在android中改变，如下图所示。

实际上使用的是不同的drawable

因为您已请求纯色，请注意 wczytajOstatniButton 和 wczytajWzorzecButton 有阴影

但是saveButton没有，是蓝色的。

如果您在开发人员选项中启用Show Layout Bounds，您将看到控件的实际边界，并且可能会清楚按钮是否变大，或者只是不同的可绘制对象使其看起来像

这是解决此问题的解决方法，您可以创建自定义按钮。

 public class TintableButton : Button
    {
       public static readonly BindableProperty TintColorProperty = BindableProperty.Create("TintColor", typeof(Color), typeof(Button), (object)Color.Default, BindingMode.OneWay, (BindableProperty.ValidateValueDelegate)null, (BindableProperty.BindingPropertyChangedDelegate)null, (BindableProperty.BindingPropertyChangingDelegate)null, (BindableProperty.CoerceValueDelegate)null, (BindableProperty.CreateDefaultValueDelegate)null);
       
        public Color TintColor
        {
            get
            {
                return (Color)GetValue(TintColorProperty);
            }
            set
            {
                SetValue(TintColorProperty, value);
            }
        }
    }

然后在android中创建一个自定义渲染器。在控制背景上设置SetColorFilter

[assembly: ExportRenderer(typeof(TintableButton), typeof(TintableButtonRenderer))]
namespace ImageViewModel.Droid
{
    public class TintableButtonRenderer : ButtonRenderer
    {
        public TintableButtonRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);

            var control = e.NewElement as TintableButton;
            if (control != null)
            {
                if (control.TintColor != Xamarin.Forms.Color.Default)
                {
                    var androidColor = control.TintColor.ToAndroid();
                    Control.Background.SetColorFilter(androidColor, PorterDuff.Mode.Src);
                }
            }
        }
    }
}

这是运行截图。

【讨论】：