我想要一个带虚线边框的框架(如图所示)。我正在寻找UWP渲染器,如果有人有任何建议,请与我分享。我被这个困住了。
eni9jsuy1#
UWP Xamarin中框架虚线边框的自定义渲染器目前在UWP Xamarin中没有这样的框架虚线边框,但是你可以使用Rectangle来实现它,并设置可用的StrokeDashArray来实现它,然后使用ViewRenderer在Xamarin中渲染它。我们将在下面分享DashedBorderRenderer,完整的控制请参考代码示例here。
Rectangle
StrokeDashArray
ViewRenderer
DashedBorderRenderer
public class DashedBorderRenderer : ViewRenderer<DashedBorder, DottedBorder> { DottedBorder _dottedBorder; FrameworkElement _navtiveContent; double defaultPadding = 2; bool isOpened; public DashedBorderRenderer() { } protected override void OnElementChanged(ElementChangedEventArgs<DashedBorder> e) { base.OnElementChanged(e); if (e.OldElement != null) { _navtiveContent.Loaded -= Native_Loaded; _navtiveContent.SizeChanged -= Native_SizeChanged; } if (e.NewElement != null) { if (Control != null) { var stroke = Element.DashedStroke == 0 ? Element.DashedStroke : 2.0; var borderColor = Element.BorderColor.ToWindowsColor() == null ? Element.BorderColor.ToWindowsColor() : Colors.Red; Control.DashedStroke = new Windows.UI.Xaml.Media.DoubleCollection() { stroke }; Control.StrokeBrush = new Windows.UI.Xaml.Media.SolidColorBrush(borderColor); } else { _dottedBorder = new DottedBorder(); _navtiveContent = Element.Content.GetOrCreateRenderer().GetNativeElement() as FrameworkElement; _navtiveContent.Loaded += Native_Loaded; _navtiveContent.SizeChanged += Native_SizeChanged; var stroke = Element.DashedStroke == 0 ? 2.0 : Element.DashedStroke; var borderColor = Element.BorderColor.ToWindowsColor() == null ? Element.BorderColor.ToWindowsColor() : Colors.Red; _dottedBorder.DashedStroke = new Windows.UI.Xaml.Media.DoubleCollection() { stroke }; _dottedBorder.StrokeBrush = new Windows.UI.Xaml.Media.SolidColorBrush(borderColor); SetNativeControl(_dottedBorder); } } } private void Native_SizeChanged(object sender, SizeChangedEventArgs e) { UpdateSize(sender); } private void Native_Loaded(object sender, RoutedEventArgs e) { UpdateSize(sender); } private void UpdateSize(object sender) { var content = sender as FrameworkElement; if (content is Windows.UI.Xaml.Controls.Image) { if (!isOpened) { (content as Windows.UI.Xaml.Controls.Image).ImageOpened += (s, e) => { isOpened = true; var image = sender as Windows.UI.Xaml.Controls.Image; _dottedBorder.Height = image.ActualHeight + defaultPadding; _dottedBorder.Width = image.ActualWidth + defaultPadding; }; } else { _dottedBorder.Height = content.ActualHeight + defaultPadding; _dottedBorder.Width = content.ActualWidth + defaultPadding; } } _dottedBorder.Height = content.ActualHeight+defaultPadding; _dottedBorder.Width = content.ActualWidth + defaultPadding; } protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) { base.OnElementPropertyChanged(sender, e); } }
5lwkijsr2#
如果您想要一个跨平台的实现,您可以使用SKCanvasView自己绘制它。例如,如果你添加了一个SKCanvasView到这样的页面:
SKCanvasView
<ContentPage xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"> <skia:SKCanvasView x:Name="_borderCanvas" HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="Transparent" PaintSurface="_borderCanvas_PaintSurface" /> </ContentPage>
然后,在代码隐藏中,您可以在PaintSurface事件处理程序中的画布上绘制虚线边框:
PaintSurface
private void _borderCanvas_PaintSurface(object sender, SKPaintSurfaceEventArgs e) { e.Surface.Canvas.Clear(); using (SKPaint paint = new SKPaint()) { paint.Style = SKPaintStyle.Stroke; paint.Color = SKColors.LightBlue; paint.StrokeWidth = 3; paint.StrokeCap = SKStrokeCap.Butt; paint.PathEffect = SKPathEffect.CreateDash(new float[] { 5, 5 }, 0); e.Surface.Canvas.DrawRect(e.Info.Rect, paint); } }
2条答案
按热度按时间eni9jsuy1#
UWP Xamarin中框架虚线边框的自定义渲染器
目前在UWP Xamarin中没有这样的框架虚线边框,但是你可以使用
Rectangle
来实现它,并设置可用的StrokeDashArray
来实现它,然后使用ViewRenderer
在Xamarin中渲染它。我们将在下面分享DashedBorderRenderer
,完整的控制请参考代码示例here。5lwkijsr2#
如果您想要一个跨平台的实现,您可以使用
SKCanvasView
自己绘制它。例如,如果你添加了一个SKCanvasView
到这样的页面:然后,在代码隐藏中,您可以在
PaintSurface
事件处理程序中的画布上绘制虚线边框: