带有Xamarin Forms的UWP自定义渲染器

时间:2017-07-19 15:12:09

标签: xamarin.forms xamarin.uwp

我的自定义渲染器有以下代码。正在使用的元素是一个标签,我尝试设置带有圆边的背景颜色。

[assembly: ExportRenderer(typeof(RoundedLabel), typeof(RoundedLabelCustomRenderer))]
namespace MyNamespace.UWP.CustomRenderers
{
public class RoundedLabelCustomRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);
        if (e.NewElement != null)
        {
            var view = (RoundedLabel)e.NewElement;

            Children.Clear();

            var border = new Border
            {
                CornerRadius = new CornerRadius(view.RoundedCornerRadius),
                Background = new SolidColorBrush(view.RoundedBackgroundColor.ToWindows()),
                Child = Control
            };

            Control.Padding = new Windows.UI.Xaml.Thickness(
                                 view.InsidePadding.Left, 
                                 view.InsidePadding.Top, 
                                 view.InsidePadding.Right, 
                                 view.InsidePadding.Bottom);
            Control.Foreground = new SolidColorBrush(view.TextColor.ToWindows());

            Children.Add(border);
        }
    }
}
}

对于像按钮(UWP中的复合对象)这样的情况,如果它在&#34;纯粹&#34; XAML,类似

<Border background="gray" cornerradius="12">
     <TextBlock />
</Border>

可以胜任。

我只是玩得开心,游戏试图将两个片段调和在一起。

任何关于我做错事的指示都将不胜感激。

2 个答案:

答案 0 :(得分:2)

很难通过自定义LabelRenderer实现您的要求。因为没有这样的界面来修改背景颜色和Radius。但是,您可以通过自定义View执行此操作。然后在UWP客户端项目中,您可以使用UserControl来呈现所需的控件。

<强> CustomNewLabelControl.cs

public class CustomNewLabelControl : View
{
    public static readonly BindableProperty LabelTextProperty = BindableProperty.Create(
propertyName: "LabelText",
eturnType: typeof(string),
declaringType: typeof(CustomNewLabelControl),
defaultValue: default(string));

    public string LabelText
    {
        get { return (string)GetValue(LabelTextProperty); }
        set { SetValue(LabelTextProperty, value); }
    }

    public static readonly BindableProperty LabelRadiusProperty = BindableProperty.Create(
propertyName: "LabelRadius",
eturnType: typeof(double),
declaringType: typeof(CustomNewLabelControl),
defaultValue: default(double));

    public double LabelRadius
    {
        get { return (double)GetValue(LabelRadiusProperty); }
        set { SetValue(LabelRadiusProperty, value); }
    }

    public static readonly BindableProperty LabelBackgroundProperty = BindableProperty.Create(
propertyName: "LabelBackground",
eturnType: typeof(Color),
declaringType: typeof(CustomNewLabelControl),
defaultValue: default(Color));

    public Color LabelBackground
    {
        get { return (Color)GetValue(LabelBackgroundProperty); }
        set { SetValue(LabelBackgroundProperty, value); }
    }
}

<强> NewLabelControl.xaml.cs

 public sealed partial class NewLabelControl : UserControl
 {
     public NewLabelControl()
     {
         this.InitializeComponent();
         this.DataContext = this;
     }

     public string Text
     {
         get { return (string)GetValue(TextProperty); }
         set { SetValue(TextProperty, value); }
     }

     public static readonly DependencyProperty TextProperty =
         DependencyProperty.Register("Text", typeof(string), typeof(NewLabelControl), new PropertyMetadata(0));

     public SolidColorBrush LabelBackground
     {
         get { return (SolidColorBrush)GetValue(LabelBackgroundProperty); }
         set { SetValue(LabelBackgroundProperty, value); }
     }


     public static readonly DependencyProperty LabelBackgroundProperty =
         DependencyProperty.Register("LabelBackground", typeof(SolidColorBrush), typeof(NewLabelControl), new PropertyMetadata(0));

     public CornerRadius LabelRadius
     {
         get { return (CornerRadius)GetValue(LabelRadiusProperty); }
         set { SetValue(LabelRadiusProperty, value); }
     }

     public static readonly DependencyProperty LabelRadiusProperty =
         DependencyProperty.Register("LabelRadius", typeof(CornerRadius), typeof(NewLabelControl), new PropertyMetadata(0));

     public SolidColorBrush LabelForeground
     {
         get { return (SolidColorBrush)GetValue(LabelForegroundProperty); }
         set { SetValue(LabelForegroundProperty, value); }
     }


     public static readonly DependencyProperty LabelForegroundProperty =
         DependencyProperty.Register("LabelForeground", typeof(SolidColorBrush), typeof(NewLabelControl), new PropertyMetadata(0));
 }

<强> NewLabelControl.xaml

<Grid>
    <Border CornerRadius="{Binding LabelRadius}" Background="{Binding LabelBackground}">
        <TextBlock Text="{Binding Text}" Foreground="{Binding LabelForeground }" />
    </Border>
</Grid>

<强> CustomNewLabelRanderer.cs

internal class CustomNewLabelRanderer : ViewRenderer<CustomNewLabelControl, NewLabelControl>
{
    protected override void OnElementChanged(ElementChangedEventArgs<CustomNewLabelControl> e)
    {
        base.OnElementChanged(e);
        if (Control == null)
        {
            SetNativeControl(new NewLabelControl());
        }
        if (e.OldElement != null)
        {
        }
        if (e.NewElement != null)
        {
            Control.Text = Element.LabelText;
            Control.LabelRadius = new Windows.UI.Xaml.CornerRadius(Element.LabelRadius);

            Color color = Element.LabelBackground;
            Control.LabelBackground = new Windows.UI.Xaml.Media.SolidColorBrush(
                Windows.UI.Color.FromArgb(
                    (byte)(color.A * 255),
                    (byte)(color.R * 255),
                    (byte)(color.G * 255),
                    (byte)(color.B * 255)));
        }
    }
}

<强>用法

<local:CustomNewLabelControl LabelText="Welcome to Xamarin Forms!" 
           LabelBackground="Gray" LabelRadius="5"
           VerticalOptions="Center"
           HorizontalOptions="Center" />

enter image description here

答案 1 :(得分:1)

您可能正在寻找的是Frame(实际上在UWP上呈现为Border)。框架让你设置背景颜色和角半径:

<Frame BackgroundColor="Grey" CornerRadius="12" HasShadow="false" Padding="0">
     <Label />
</Frame>
默认情况下,

Frame的投影和填充设置为20,因此您必须删除所需的结果。