自定义 RadioButton 框架，里面有文本答案

【问题标题】：Custom RadioButton Frame with text inside自定义 RadioButton 框架，里面有文本
【发布时间】：2020-12-10 19:01:09
【问题描述】：

我正在尝试为RadioButton 创建一个不同于默认外观的自定义外观，如下图所示：

知道我该怎么做吗？

【问题讨论】：

使用CustomRenderer
我知道这是解决方案的方向之一，但我在网上没有找到任何参考。您是否熟悉合适的 CustomRenderer？
自定义渲染意味着您需要编写它。或者只是使用标准表单 UI 元素创建自定义控件。使用一些带有标签和手势识别器的 BoxViews

标签： c# xaml xamarin xamarin.forms controltemplate

【解决方案1】：

从 Xamarin 表单 5.0.0.1539-pre2 版本开始，RadioButton does supports setting any content and using control templates 从而减少了对自定义渲染器的需求，如果我们将其与 visual-state-manager 结合使用，我们将得到一个漂亮的 xaml：

<ContentPage.Resources>
    <ControlTemplate x:Key="FrameRadioTemplate">
        <Frame Padding="0" BorderColor="#2B79E1" CornerRadius="15" VerticalOptions="Start"
               HeightRequest="100" WidthRequest="100" HorizontalOptions="Start">

            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CheckedStates">
                    <VisualState x:Name="Checked">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="#2B79E1"/>
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Unchecked">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="#f3f2f1"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Grid Margin="4" WidthRequest="100">
                <ContentPresenter/>
            </Grid>
        </Frame>
    </ControlTemplate>
</ContentPage.Resources>

<StackLayout HorizontalOptions="Center"  VerticalOptions="Center" Orientation="Horizontal">
    <RadioButton ControlTemplate="{StaticResource FrameRadioTemplate}">
        <RadioButton.Content>
            <Label Text="RadioButton 1" TextColor="Black"/>
        </RadioButton.Content>
    </RadioButton>

    <RadioButton ControlTemplate="{StaticResource FrameRadioTemplate}">
        <RadioButton.Content>
            <Label Text="RadioButton 2" TextColor="Black"/>
        </RadioButton.Content>
    </RadioButton>
</StackLayout>

灵感来自David Ortinau sample

编辑

要在选中相应的RadioButton 时使标签的TextColor 变为白色，您有多种选择：

1- 使用参数绑定到IsCheked 的值转换器。 2- 定义内联样式。 3- 在ControlTemplate 中使用Style.Triggers，如下所示。

<ContentPage.Resources>
    <ControlTemplate x:Key="FrameRadioTemplate">
        <Frame Padding="5" CornerRadius="15" BorderColor="#2B79E1"
               HeightRequest="120" WidthRequest="120">

            <ContentPresenter>
                <ContentPresenter.Resources>
                    <Style TargetType="Label">
                        <Setter Property="HorizontalOptions" Value="Center"/>
                        <Setter Property="VerticalOptions" Value="Center"/>

                        <Style.Triggers>
                            <DataTrigger TargetType="Label"
                                         Binding="{Binding Path=IsChecked,
                                                           Source={x:RelativeSource AncestorType={x:Type RadioButton}}}"
                                         Value="True">
                                <Setter Property="TextColor" Value="White"/>
                                <Setter Property="FontAttributes" Value="Bold"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ContentPresenter.Resources>
            </ContentPresenter>

            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CheckedStates">
                    <VisualState x:Name="Checked">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="#2B79E1"/>
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Unchecked">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="#f3f2f1"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Frame>
    </ControlTemplate>
</ContentPage.Resources>

<ContentPage.Content>
    <StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="30"
                 VerticalOptions="Center">
        <RadioButton ControlTemplate="{StaticResource FrameRadioTemplate}" IsChecked="True">
            <RadioButton.Content>
                <Label Text="RadioButton 1" TextColor="Black"/>
            </RadioButton.Content>
        </RadioButton>

        <RadioButton ControlTemplate="{StaticResource FrameRadioTemplate}">
            <RadioButton.Content>
                <Label Text="RadioButton 2" TextColor="Black"/>
            </RadioButton.Content>
        </RadioButton>
    </StackLayout>
</ContentPage.Content>

【讨论】：

对于字体我还不知道如何在ControlTemplate 中做到这一点，但我认为您可以创建一个值转换器并作为参数发送 IsChecked 属性。
谢谢你的回答，你帮了我很多