Xamarin |自定义控件

Question

我是 Xamarin 开发的新手。 我花了大约一周的时间来构建我的自定义 Button 控件。 但不幸的是我可以做一些好事；

这看起来像：

• 我需要一个渐变背景（我已经有了一个带有渐变背景的简单按钮，所以我（或多或少）知道如何实现）

• 我尝试使用框架 - 但无法获得好的椭圆

• 我尝试在 iOS 自定义渲染器上调用“NeedToDisplay”，但背景没有更改为新的渐变
• 我不知道如何在椭圆内添加圆圈以及如何设置为圆形图像（我需要更改图像的颜色 - 我有 PNG 图标）

如果您能帮助我构建此控件，我将不胜感激。

Answer 1

您可以通过在 xamarin.forms 中构建类似按钮的组件来实现相同的目的，而不是添加自定义按钮。 您可以使用堆栈布局以及图像和标签来构建它。

           <StackLayout>
                <Frame CornerRadius="30" BackgroundColor="Coral" HorizontalOptions="CenterAndExpand" VerticalOptions="End" Margin="0,0,0,20"  HeightRequest="50" WidthRequest="300"  OutlineColor="Red" HasShadow="True" Padding="8" >
                    <Grid   VerticalOptions="FillAndExpand" RowSpacing="0" BackgroundColor="Coral">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid  Grid.Row="0" BackgroundColor="Transparent">
                            <local:GradientColor  StartColor="#97ef97" EndColor="#3e663e">
                                <StackLayout  Orientation="Horizontal" Padding="0"  BackgroundColor="Transparent">
                                    <Image Source="Sound.png" Margin="5,0,0,0" WidthRequest="40" HeightRequest="40" HorizontalOptions="Center" VerticalOptions="Center"></Image>
                                    <Label Text="Button" FontSize="20"  TextColor="Black"  HorizontalOptions="End"
                               VerticalOptions="CenterAndExpand" />
                                    <Frame.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="OnButtonClicked"/>
                                    </Frame.GestureRecognizers>
                                </StackLayout>
                            </local:GradientColor>
                        </Grid>
                    </Grid>
                </Frame>
              </StackLayout>

对于渐变色，您可以使用自定义渲染器

核心内的自定义渲染器

 public class GradientColor : StackLayout
    {
        public Color StartColor
        {
            get;
            set;
        }
        public Color EndColor
        {
            get;
            set;
        }
    }

Android 中的自定义渲染器，您可以在其中绘制渐变颜色并给它一个圆角

public class GradientColorRenderer : VisualElementRenderer<StackLayout>
{
    private Color StartColor
    {
        get;
        set;
    }
    private Color EndColor
    {
        get;
        set;
    }
    protected override void DispatchDraw(global::Android.Graphics.Canvas canvas)
    {
        #region for Vertical Gradient  
        //var gradient = new Android.Graphics.LinearGradient(0, 0, 0, Height,      
        #endregion
        #region  for Horizontal Gradient  
        var gradient = new LinearGradient(0, 0, Width, 0,
            #endregion
            this.StartColor.ToAndroid(),
            this.EndColor.ToAndroid(),
            Android.Graphics.Shader.TileMode.Mirror);
        var paint = new Android.Graphics.Paint()
        {
            Dither = true,

        };
        paint.SetShader(gradient);

        RectF rect = new RectF(0, 0, 450,68);
        canvas.DrawRoundRect(rect, 30, 30, paint);

            base.DispatchDraw(canvas);
    }
    protected override void OnElementChanged(ElementChangedEventArgs<StackLayout> e)
    {
        base.OnElementChanged(e);
        if (e.OldElement != null || Element == null)
        {
            return;
        }
        try
        {
            var frame = e.NewElement as GradientColor;
            this.StartColor = frame.StartColor;
            this.EndColor = frame.EndColor;

        }
        catch (Exception ex)
        {

        }
    }
}