按钮边框颜色渐变 Android

Question

我正在尝试制作这样的戒指： (credits)

所以这是我的尝试：

                <Ellipse StrokeThickness="50"
                     WidthRequest="300"
                     HeightRequest="300"
                     Grid.Column="0">
                <Ellipse.Stroke>
                    <LinearGradientBrush>
                        <GradientStop Color="Red"
                                      Offset="0.1" />
                        <GradientStop Color="DarkBlue"
                                      Offset="1.0" />
                    </LinearGradientBrush>
                </Ellipse.Stroke>
            </Ellipse>

这很好，但我无法将文本添加到中心。此外，这个洞的东西必须是可点击的。

                    <Button Text="42"
                        FontSize="50"
                        TextColor="Black"
                        BorderColor="Chartreuse"
                        Background="Transparent"
                        CornerRadius="300"
                        WidthRequest="300"
                        HeightRequest="300"
                        BorderWidth="50">
                </Button>

我认为要走的路是使用按钮。不幸的是 BorderColor 不接受像上面那样的渐变。

我对框架控件进行了同样的尝试，但它也不接受 BorderColor 中的渐变！

我找到了一些使用自定义渲染器的 iOS 和 UWP 的示例，但没有找到 Android 的示例。他们还对渐变进行了硬编码，这是我不想要的。我希望能够根据中间的值更改渐变颜色。

也许有人可以指导我正确的方向？

Answer 1

您可以使用网格将 Label 与 Ellipse 重叠，要可点击，您可以使用 GestureRecognizers:

  <Grid HorizontalOptions="Center">
       <Grid.GestureRecognizers>
                <TapGestureRecognizer Tapped="Button_Clicked"/>
        </Grid.GestureRecognizers>
            <Label Text="57" FontAttributes="Bold" FontSize="20" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center"/>
            <Ellipse StrokeThickness="15"
                     WidthRequest="150"
                     HeightRequest="300">
                <Ellipse.Stroke>
                    <LinearGradientBrush>
                        <GradientStop Color="Red"
                                      Offset="0.1" />
                        <GradientStop Color="DarkBlue"
                                      Offset="1.0" />
                    </LinearGradientBrush>
                </Ellipse.Stroke>
            </Ellipse>
        </Grid>

要根据中间值更改颜色，请使用属性绑定并管理代码中的逻辑。

但是，如果您正在寻找一些 advanced/complex UI 控件，那么使用 skiasharp.[=16 比使用 advanced/complex UI 控件更好。 =]

按钮边框颜色渐变 Android

Button BorderColor Gradient Android

c#

xaml

xamarin

xamarin.forms