框架OutlineColor不适用于仅Android,Xamarin形式
我正在使用Xamarin Forms开发该应用程序,并且遇到了一个应该在很久以前修复的错误. 我尝试为框架设置轮廓,它在ios上效果很好,但在android上不起作用.
I am developing the app in Xamarin Forms and I have faced a bug that should be fixed long time ago. I tried to set outline for frame and it works good on ios but doesn't work on android.
这是我给Frame的xaml.
Here is my xaml for Frame.
<Frame
HasShadow="true"
CornerRadius="10"
OutlineColor="Red"
BackgroundColor="White">
<StackLayout
Orientation="Horizontal">
<Label
Text="TEST"
VerticalOptions="Center"/>
<Label
Text="For OUTLINE"
VerticalOptions="Center"/>
</StackLayout>
</Frame>
感谢您的帮助!
这不适用于android.在此处报告了错误.
This doesn't work for android. Bug is reported here.
您应为Android平台的Frame
创建一个Renderer
,如下所示:
You should make a Renderer
for the Frame
for Android Platform as follows:
using System;
using Android.Graphics.Drawables;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using XFormsUI.Droid;
[assembly: ExportRenderer(typeof(Frame), typeof(RoundBorderFrameRenderer))]
namespace XFormsUI.Droid
{
public class RoundBorderFrameRenderer : FrameRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
if (e.NewElement != null && e.OldElement == null)
{
SetBackgroundResource(Resource.Drawable.round_border_frame);
//Write following lines if you want to bring the XAML Frame Elements's background Color into Native. Otherwise, Frame's BackgroundColor will not be effective.
GradientDrawable drawable = (GradientDrawable)Background;
string FrameBackgroundColorHex = String.Format("#{0:X2}{1:X2}{2:X2}", (int)(e.NewElement.BackgroundColor.R * 255), (int)(e.NewElement.BackgroundColor.G * 255), (int)(e.NewElement.BackgroundColor.B * 255));
drawable.SetColor(Android.Graphics.Color.ParseColor(FrameBackgroundColorHex));
}
}
}
}
这还需要一个xml
(round_border_frame.xml)
选择器文件.将此文件放在您的Drawable
文件夹中.
This also requires an xml
(round_border_frame.xml)
selector file. Put this file in your Drawable
folder.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<!--We need to give Frame's 'BorderColor Here-->
<stroke android:width="1dp" android:color="#FF0000" />
<corners android:radius="10dp" />
</shape>
解决方案2:
使用不带选择器xml文件的Renderer
. 来源.
using System;
using Android.Graphics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using XFormsUI.Droid;
[assembly: ExportRenderer(typeof(Frame), typeof(RoundBorderFrameRenderer))]
namespace XFormsUI.Droid
{
public class RoundBorderFrameRenderer : FrameRenderer
{
public override void Draw(Canvas canvas)
{
base.Draw(canvas);
using (var paint = new Paint { AntiAlias = true })
using (var path = new Path())
using (Path.Direction direction = Path.Direction.Cw)
using (Paint.Style style = Paint.Style.Stroke)
using (var rect = new RectF(0, 0, canvas.Width, canvas.Height))
{
float px = Forms.Context.ToPixels(Element != null ? Element.CornerRadius : 10); //Default Corner Radius = 10
float py = Forms.Context.ToPixels(Element != null ? Element.CornerRadius : 10); //Default Corner Radius = 10
path.AddRoundRect(rect, px, py, direction);
//Set the Width of the Border here
paint.StrokeWidth = 1f;
paint.SetStyle(style);
//Take OutLineColor from XAML Frame element and set it natively here.
string FrameBorderColorHex = String.Format("#{0:X2}{1:X2}{2:X2}", (int)(Element.OutlineColor.R * 255), (int)(Element.OutlineColor.G * 255), (int)(Element.OutlineColor.B * 255));
paint.Color = Android.Graphics.Color.ParseColor(FrameBorderColorHex);
canvas.DrawPath(path, paint);
}
}
}
}
解决方案3:
但是,这不是最佳解决方案,但这是一种解决方法:
将外部Frame
包裹在另一个具有Padding
的Frame
内,并将其BackgroundColor
设置为您的边框颜色.
Solution 3:
However this is not the best solution but it's kind of a workaround:
Wrap your outer Frame
inside another Frame
having Padding
and set its BackgroundColor
to whatever your Border Color should be.
注意:我尚未在iOS上对此进行检查.
Note: I haven't checked this yet on iOS.
<Frame BackgroundColor="Red" CornerRadius="10" Padding="1,1,1,1">
<Frame CornerRadius="10" BackgroundColor="White">
<StackLayout Orientation="Horizontal">
<Label Text="TEST" VerticalOptions="Center" />
<Label Text="For OUTLINE" VerticalOptions="Center" />
</StackLayout>
</Frame>
</Frame>
人们正在此线程.
希望这会有所帮助!