c# - 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>

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

但是看看您要创建的内容看起来有点复杂，如果您正在寻找一些高级/复杂的 UI 控件，那么最好使用 skiasharp .