带有文本的自定义 RadioButton 框架

Question

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

知道我该怎么做吗？

Answer 1

从Xamarin forms 5.0.0.1539-pre2版本开始，RadioButton does supports setting any content and using control templates and thus less need for custom renderer, and if we combine this with 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>

带有文本的自定义 RadioButton 框架

Custom RadioButton Frame with text inside

c#

xaml

xamarin

xamarin.forms

controltemplate