I want to change the shape of the radio button, can I change the border size?

Viewed 43
 <ContentPage.Resources>
        <ControlTemplate x:Key="FrameRadioTemplate">
            <Frame
                Padding="10"
                BackgroundColor="{DynamicResource ColorBorder000}"
                BorderColor="Red"
                HeightRequest="50"
                WidthRequest="130">
                <ContentPresenter>
                    <ContentPresenter.Resources>
                        <Style TargetType="Label">
                            <Setter Property="HorizontalOptions" Value="Center" />
                            <Setter Property="VerticalOptions" Value="Center" />

                            <Style.Triggers>
                                <DataTrigger
                                    Binding="{Binding Path=IsChecked, Source={x:RelativeSource AncestorType={x:Type RadioButton}}}"
                                    TargetType="Label"
                                    Value="True">
                                    <Setter Property="TextColor" Value="{DynamicResource ColorText111}" />
                                    <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="{DynamicResource ColorBack004}" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Unchecked">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="{DynamicResource ColorBack000}" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Frame>
        </ControlTemplate>
    </ContentPage.Resources>



<StackLayout
                                            x:Name="xDispContents"
                                            Grid.Row="9"
                                            Grid.Column="1"
                                            HorizontalOptions="StartAndExpand"
                                            Orientation="Horizontal"
                                            Spacing="0">


                                            <Ctrl:CtrlRadioButton
                                                x:Name="xBtnDisp_ABS"
                                                ControlTemplate="{StaticResource FrameRadioTemplate}"
                                                HorizontalOptions="Center"
                                                VerticalOptions="Center">

                                                <Ctrl:CtrlRadioButton.Content>
                                                    <!--<Label TextColor="{DynamicResource ColorText000}" />-->
                                                    <Ctrl:CtrlButton Text="ABS" />
                                                </Ctrl:CtrlRadioButton.Content>
                                            </Ctrl:CtrlRadioButton>

                                            <Ctrl:CtrlRadioButton
                                                x:Name="xBtnDisp_Trans"
                                                ControlTemplate="{StaticResource FrameRadioTemplate}"
                                                HorizontalOptions="Center"
                                                VerticalOptions="Center">

                                                <Ctrl:CtrlRadioButton.Content>
                                                    <Label Text="%T" TextColor="{DynamicResource ColorText000}" />
                                                </Ctrl:CtrlRadioButton.Content>
                                            </Ctrl:CtrlRadioButton>

                                        </StackLayout>

enter image description here

I want to change the shape of the radio button, can I change the border size?

I'm trying to change the shape of a radio button's appearance using a control template. But I want to change the border thickness of the frame, but there is no way.

The default thickness is too thick. I've looked for many other examples, but there's no information about the thickness, so I'm asking.

1 Answers

Maybe you can use this , Frame in a Frame . Change the Padding for the "BorderWith" Color.

  <Frame  HeightRequest="50" WidthRequest="100" BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" Padding="0.7" IsClippedToBounds="True">
        <Frame  HeightRequest="50" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Margin="0" Padding="0" IsClippedToBounds="True">
            <Label Text="Padding 0.7" HorizontalOptions="Center" />
        </Frame>
    </Frame>


    <Frame  HeightRequest="50" WidthRequest="100" BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" Padding="1" IsClippedToBounds="True">
        <Frame  HeightRequest="50" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Margin="0" Padding="0" IsClippedToBounds="True">
            <Label Text="Padding 1" HorizontalOptions="Center" />
        </Frame>
    </Frame>
    
    <Frame  HeightRequest="50" WidthRequest="100" BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" Padding="5" IsClippedToBounds="True">
        <Frame  HeightRequest="50" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Margin="0" Padding="0" IsClippedToBounds="True">
            <Label Text="Padding 5" HorizontalOptions="Center" />
        </Frame>
    </Frame>
    

The result a border in Red in different size.

enter image description here

Related