在 Xamarin 表单上设置 Frame.BackgroundColor 会丢失圆角答案

【问题标题】：Setting Frame.BackgroundColor loses rounded corner on Xamarin forms在 Xamarin 表单上设置 Frame.BackgroundColor 会丢失圆角
【发布时间】：2017-10-31 16:44:13
【问题描述】：

我在 Xamarin Forms Shared 项目上使用 Frame 控件。我只是有一些样式：

<Color x:Key="Info">#0060ac</Color>
...
<Style x:Key="LabelContainer" TargetType="Frame">
    <Setter Property="Padding" Value="5" />
    <Setter Property="HorizontalOptions" Value="Fill" />
</Style>
<Style x:Key="LabelContainer-Info" TargetType="Frame" BasedOn="{StaticResource LabelContainer}">
    <Setter Property="BackgroundColor" Value="{DynamicResource Info}" />
</Style>

以及 XAML 页面中的一个简单 Frame 控件：

        <Frame x:Name="CreditCardPaymentResultFrame" Style="{StaticResource LabelContainer-Info}" Padding="0">
            <Label x:Name="PaymentErrorLabel" Text="Lorem ipsum" IsVisible="True" 
                   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
                   VerticalTextAlignment="Center" HorizontalTextAlignment="Center" 
                   FontSize="18" TextColor="White">
            </Label>
        </Frame>

我得到了这样的东西：

现在，如果我尝试在运行时更改背景颜色：

CreditCardPaymentResultFrame.BackgroundColor = Color.FromHex("#ed3700");

框架控件失去了边框圆度：

我不明白这种行为，我需要更改背景颜色，但我想保留圆角。

感谢帮助我的人

【问题讨论】：

你使用什么平台？
嗨。我用的是安卓

标签： c# xamarin.forms

【解决方案1】：

在 Android 上遇到类似问题，但与边框颜色有关。为了解决这个问题，我创建了一个新控件，从Frame 继承它并为其实现了一个渲染器，但使用VisualElementRenderer<Frame> 作为基类而不是FrameRenderer：

[assembly: ExportRenderer(typeof(MyFrame), typeof(MyFrameRenderer))]
namespace Android.Renderers
{
  public class MyFrameRenderer : VisualElementRenderer<Frame>
  {
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            var drawable = new GradientDrawable();
            ViewGroup.SetBackground(drawable);
            UpdateBackgroundColor(drawable);
            UpdateCornerRadius(drawable);
            UpdateOutlineColor(drawable);
            UpdateShadow();
        }
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        var drawable = ViewGroup?.Background as GradientDrawable;
        if (drawable != null)
        {
            if (e.PropertyName == VisualElement.BackgroundColorProperty.PropertyName)
            {
                UpdateBackgroundColor(drawable);
            } 
            else if (e.PropertyName == Frame.CornerRadiusProperty.PropertyName)
            {
                UpdateCornerRadius(drawable);
            }
            else if (e.PropertyName == Frame.OutlineColorProperty.PropertyName)
            {
                UpdateOutlineColor(drawable);
            }
            else if (e.PropertyName == Frame.HasShadowProperty.PropertyName)
            {
                UpdateShadow();
            }
        }
    }

    protected override void UpdateBackgroundColor()
    {
        // This method doesn't work well in Xamarin.Forms -Version 2.3.4.247
    }

    private void UpdateCornerRadius(GradientDrawable drawable)
    {
        drawable.SetCornerRadius(Element.CornerRadius);
    }

    private void UpdateOutlineColor(GradientDrawable drawable)
    {
        drawable.SetStroke(1, Element.OutlineColor.ToAndroid());
    }

    private void UpdateBackgroundColor(GradientDrawable drawable)
    {
        drawable.SetColor(Element.BackgroundColor.ToAndroid());
    }

    private void UpdateShadow()
    {
        if (Element.HasShadow)
        {
            Elevation = (float)Context.FromPixels(10);
        }
        else
        {
            Elevation = 0;
        }
    }
  }
}

【讨论】：