c# - 自定义 RadioButton 框架，里面有文本

Question

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

知道我该怎么做吗？

标签： c#xamlxamarinxamarin.formscontroltemplate

Answer 1

从 Xamarin 表单5.0.0.1539-pre2版本开始，RadioButton 确实支持设置任何内容和使用控件模板，因此对自定义渲染器的需求更少，如果我们将其与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 样本

---

编辑

要在选中TextColor相应标签时使标签变为白色，RadioButton您有几个选项：

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

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