XAML UWP Xamarin中框架虚线边框的自定义渲染器

7z5jn7bk  于 12个月前  发布在  其他
关注(0)|答案(2)|浏览(110)

我想要一个带虚线边框的框架(如图所示)。我正在寻找UWP渲染器,如果有人有任何建议,请与我分享。我被这个困住了。

eni9jsuy

eni9jsuy1#

UWP Xamarin中框架虚线边框的自定义渲染器
目前在UWP Xamarin中没有这样的框架虚线边框,但是你可以使用Rectangle来实现它,并设置可用的StrokeDashArray来实现它,然后使用ViewRenderer在Xamarin中渲染它。我们将在下面分享DashedBorderRenderer,完整的控制请参考代码示例here

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);
    }
}
5lwkijsr

5lwkijsr2#

如果您想要一个跨平台的实现,您可以使用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事件处理程序中的画布上绘制虚线边框:

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);
    }
}

相关问题