Hello,
I've encourage a problem with UWP, and i am not sure how to full fill a native view with cross plaform view,
Does any know how to achieve it ?
public class RoundedCornerView : Grid
{
public static readonly BindableProperty FillColorProperty =
BindableProperty.Create<RoundedCornerView, Color>(w => w.FillColor, Color.White);
public Color FillColor
{
get { return (Color)GetValue(FillColorProperty); }
set { SetValue(FillColorProperty, value); }
}
public static readonly BindableProperty RoundedCornerRadiusProperty =
BindableProperty.Create<RoundedCornerView, double>(w => w.RoundedCornerRadius, 3);
public double RoundedCornerRadius
{
get { return (double)GetValue(RoundedCornerRadiusProperty); }
set { SetValue(RoundedCornerRadiusProperty, value); }
}
public static readonly BindableProperty MakeCircleProperty =
BindableProperty.Create<RoundedCornerView, Boolean>(w => w.MakeCircle, false);
public Boolean MakeCircle
{
get { return (Boolean)GetValue(MakeCircleProperty); }
set { SetValue(MakeCircleProperty, value); }
}
public static readonly BindableProperty BorderColorProperty =
BindableProperty.Create<RoundedCornerView, Color>(w => w.BorderColor, Color.Transparent);
public Color BorderColor
{
get { return (Color)GetValue(BorderColorProperty); }
set { SetValue(BorderColorProperty, value); }
}
public static readonly BindableProperty BorderWidthProperty =
BindableProperty.Create<RoundedCornerView, int>(w => w.BorderWidth, 1);
public int BorderWidth
{
get { return (int)GetValue(BorderWidthProperty); }
set { SetValue(BorderWidthProperty, value); }
}
}
<customControls1:RoundedCornerView FillColor="Aqua" BorderColor="OrangeRed" BorderWidth="2" Margin="10,5,10,10" BackgroundColor="Transparent" VerticalOptions="FillAndExpand" RoundedCornerRadius="20">
<googleMaps:Map IsVisible="{Binding IsMapWithEvents}" Margin="-10,-10,-10,-10" x:Name="customMap" /> //could be anything
</customControls1:RoundedCornerView>
[assembly: ExportRenderer(typeof(RoundedCornerView), typeof(RoundedCornerViewRenderer))]
namespace App.UWP.CustomRender
{
public class RoundedCornerViewRenderer : ViewRenderer<View, Windows.UI.Xaml.Controls.Grid>
{
protected override void OnElementChanged(ElementChangedEventArgs e)
{
base.OnElementChanged(e);
if (Control == null)
{
var grid = new Grid();
var label = new Windows.UI.Xaml.Controls.Button(); //in some way add google maps or other nested view
grid.Children.Add(label);
SetNativeControl(grid);
}
if (e.OldElement != null)
{
}
if (e.NewElement != null)
{
var element = e.NewElement as RoundedCornerView;
Control.Padding = new Windows.UI.Xaml.Thickness(0,0,0,0);
Control.Background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Color.FromArgb((byte)(element.FillColor.A * 255),
(byte)(element.FillColor.R * 255),
(byte)(element.FillColor.G * 255),
(byte)(element.FillColor.B * 255)));
Control.CornerRadius = new Windows.UI.Xaml.CornerRadius(element.RoundedCornerRadius);
if (element.BorderWidth > 0 && element.BorderColor.A > 0.0)
{
Control.BorderThickness = new Windows.UI.Xaml.Thickness(element.BorderWidth);
Control.BorderBrush = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Color.FromArgb((byte)(element.BorderColor.A * 255),
(byte)(element.BorderColor.R * 255),
(byte)(element.BorderColor.G * 255),
(byte)(element.BorderColor.B * 255)));
}
}
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (Control != null)
{
var element = sender as RoundedCornerView;
Control.Padding = new Windows.UI.Xaml.Thickness(0,0,0,0);
Control.Background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Color.FromArgb((byte)(element.FillColor.A * 255),
(byte)(element.FillColor.R * 255),
(byte)(element.FillColor.G * 255),
(byte)(element.FillColor.B * 255)));
Control.CornerRadius = new Windows.UI.Xaml.CornerRadius(element.RoundedCornerRadius);
if (element.BorderWidth > 0 && element.BorderColor.A > 0.0)
{
Control.BorderThickness = new Windows.UI.Xaml.Thickness(element.BorderWidth);
Control.BorderBrush = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Color.FromArgb((byte)(element.BorderColor.A * 255),
(byte)(element.BorderColor.R * 255),
(byte)(element.BorderColor.G * 255),
(byte)(element.BorderColor.B * 255)));
}
}
}
}
}