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)
        {

        }
    }
}

Xamarin |自定义控件

1 个答案: