2017-07-19 82 views
1

我有我的自定義渲染器的以下代碼。正在使用的元素是一個標籤,我試圖設置具有圓邊的背景色。UWP自定義渲染器與Xamarin形式

[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複合物),這將是罰款,如果這是在「純粹」的XAML,像

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

會做的工作。

我只是玩樂和遊戲,試圖調和這兩個片段在一起。

任何指針,我做錯了,將不勝感激。

回答

1

用自定義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

你可能要找的是Frame(實際上呈現爲上一UWP Border)。框架讓我們同時設置背景顏色和圓角半徑:

<Frame BackgroundColor="Grey" CornerRadius="12" HasShadow="false" Padding="0"> 
    <Label /> 
</Frame> 

Frame有陰影和填充默認設置爲20,所以你必須要刪除那些你想要的結果。