Xamarin 为 iOS 单选按钮形成自定义渲染器

Question

我正在尝试为 iOS 创建单选按钮自定义渲染器，但在 iOS 项目中找不到 RadioButtonRenderer。有谁知道我们如何覆盖单选按钮控件？

基本上，我想在不影响所选按钮颜色的情况下更改单选按钮背景颜色。

我在 iOS 上的单选按钮如下所示，当系统默认主题为深色模式并且您将主题覆盖为浅色模式时。

如果我把上面的背景颜色改成白色，那么选中的图标就看不到了。

Android 看起来不错，如下所示。

是否有任何 iOS 等效于以下 Android 渲染器代码？

using Android.Content;
using Android.Content.Res;
using StorefrontRetail.Custom;
using StorefrontRetail.Droid.Custom;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(ExtendedRadioButton), typeof(ExtendedRadioButtonRenderer))]

namespace StorefrontRetail.Droid.Custom
{
    public class ExtendedRadioButtonRenderer : RadioButtonRenderer
    {
        public ExtendedRadioButtonRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<RadioButton> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                ExtendedRadioButton extendedRadioButton = (ExtendedRadioButton) e.NewElement;
                Control.ButtonTintList = ColorStateList.ValueOf(extendedRadioButton.ButtonColor.ToAndroid());
            }
        }
    }
}

任何想法将不胜感激。

Answer 1

您可以使用 控制模板 自定义您的单选按钮，它允许您将 UI 设置为您想要的，代码如下：

   <ContentPage.Resources>
        <ResourceDictionary>

            <Color x:Key="LightRadioButtonColor">#F3F2F1</Color>
            <Color x:Key="DarkRadioButtonColor">#9B9A99</Color>

            <ControlTemplate x:Key="ThemeRadioTemplate">
                <Frame
                    Padding="0"
                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkRadioButtonColor},
                                                      Light={StaticResource LightRadioButtonColor}}"
                    BorderColor="{AppThemeBinding Dark={StaticResource DarkRadioButtonColor},
                                                  Light={StaticResource LightRadioButtonColor}}"
                    HasShadow="False"
                    HeightRequest="80"
                    HorizontalOptions="Start"
                    VerticalOptions="Start"
                    WidthRequest="80">
                    <Grid Margin="4" WidthRequest="80">
                        <Grid
                            HeightRequest="20"
                            HorizontalOptions="End"
                            VerticalOptions="Start"
                            WidthRequest="20">
                            <Ellipse
                                Fill="White"
                                HeightRequest="18"
                                HorizontalOptions="Center"
                                Stroke="#2E2545"
                                StrokeThickness="1"
                                VerticalOptions="Center"
                                WidthRequest="18" />
                            <Ellipse
                                x:Name="Check"
                                BackgroundColor="Transparent"
                                Fill="#df6e57"
                                HeightRequest="10"
                                HorizontalOptions="Center"
                                Stroke="#df6e57"
                                StrokeThickness="0"
                                VerticalOptions="Center"
                                WidthRequest="10" />
                        </Grid>
                        <!-- This enables us to put in dynamic content -->
                        <ContentPresenter />
                    </Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroupList>
                            <VisualStateGroup x:Name="CheckedStates">
                                <VisualState x:Name="Checked">
                                    <VisualState.Setters>
                                        <Setter Property="BorderColor" Value="#df6e57" />
                                        <Setter TargetName="Check" Property="Opacity" Value="1" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Unchecked">
                                    <VisualState.Setters>
                                        <Setter Property="BorderColor" Value="#F3F2F1" />
                                        <Setter TargetName="Check" Property="Opacity" Value="0" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateGroupList>
                    </VisualStateManager.VisualStateGroups>
                </Frame>
            </ControlTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>

<Grid ColumnDefinitions="*,*,*" ColumnSpacing="10">
    <RadioButton ControlTemplate="{StaticResource ThemeRadioTemplate}" Content="Default" IsChecked="True" />
    <RadioButton ControlTemplate="{StaticResource ThemeRadioTemplate}" Grid.Column="1" Content="Light" />
    <RadioButton ControlTemplate="{StaticResource ThemeRadioTemplate}" Grid.Column="2" Content="Dark" />
</Grid>

Xamarin 为 iOS 单选按钮形成自定义渲染器

Xamarin forms custom renderer for iOS radio button

xamarin.ios

xamarin.forms