Problem <Radiobutton.Content>

Question

Hello,
I have a problem with the use of radion-button.
I want to redo David Britch's code example on page
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/radiobutton

here is my code :
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App2.SecondePage">
<ContentPage.Content>
<StackLayout Margin="10">
<Label Text="What's your favorite animal?" FontSize="Large" />

            <RadioButton Value="Cat">  
                <RadioButton.Content>  
                    <StackLayout>  
                    <Label Text="Chat"/>  
                    <Image Source="Chat03.png" />  
                    </StackLayout>  
                </RadioButton.Content>  
            </RadioButton>  

I can't view the content of <RadioButton.Content> with an image and a labeltext. Here's what it shows me: Xamarin.Forms.StackLayout

Thank you for your help
ManuAntibes

Answer 1

Hi manualoyau-4681m,

Welcome to our Microsoft Q&A platform!

According to the document: Redefine RadioButton appearance. We know that it sets a ControlTemplate for RadioButton.

So add the following ControlTemplate to your xaml.

<ContentPage.Resources>  
    <ControlTemplate x:Key="RadioButtonTemplate">  
        <Frame BorderColor="#F3F2F1"  
                BackgroundColor="#F3F2F1"  
                HasShadow="False"  
                HeightRequest="100"  
                WidthRequest="100"  
                HorizontalOptions="Start"  
                VerticalOptions="Start"  
                Padding="0">  
            <VisualStateManager.VisualStateGroups>  
                <VisualStateGroupList>  
                    <VisualStateGroup x:Name="CheckedStates">  
                        <VisualState x:Name="Checked">  
                            <VisualState.Setters>  
                                <Setter Property="BorderColor"  
                                        Value="#FF3300" />  
                                <Setter TargetName="check"  
                                        Property="Opacity"  
                                        Value="1" />  
                            </VisualState.Setters>  
                        </VisualState>  
                        <VisualState x:Name="Unchecked">  
                            <VisualState.Setters>  
                                <Setter Property="BackgroundColor"  
                                        Value="#F3F2F1" />  
                                <Setter Property="BorderColor"  
                                        Value="#F3F2F1" />  
                                <Setter TargetName="check"  
                                        Property="Opacity"  
                                        Value="0" />  
                            </VisualState.Setters>  
                        </VisualState>  
                    </VisualStateGroup>  
                </VisualStateGroupList>  
            </VisualStateManager.VisualStateGroups>  
            <Grid Margin="4"  
                    WidthRequest="100">  
                <Grid WidthRequest="18"  
                        HeightRequest="18"  
                        HorizontalOptions="End"  
                        VerticalOptions="Start">  
                    <Ellipse Stroke="Blue"  
                                Fill="White"  
                                WidthRequest="16"  
                                HeightRequest="16"  
                                HorizontalOptions="Center"  
                                VerticalOptions="Center" />  
                    <Ellipse x:Name="check"  
                                Fill="Blue"  
                                WidthRequest="8"  
                                HeightRequest="8"  
                                HorizontalOptions="Center"  
                                VerticalOptions="Center" />  
                </Grid>  
                <ContentPresenter />  
            </Grid>  
        </Frame>  
    </ControlTemplate>  
  
    <Style TargetType="RadioButton">  
        <Setter Property="ControlTemplate"  
                Value="{StaticResource RadioButtonTemplate}" />  
    </Style>  
</ContentPage.Resources>  

You can download the sample from GitHub: xamarin/xamarin-forms-samples.
Regards,
Kyle

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hello
Merci pour la reponse.
Thank you for the answer

here is my code :

<ContentPage.Content>
<StackLayout Margin="10">
<Label Text="Quelle espèce préférez vous travailler ?" FontSize="Large" />

        <StackLayout HeightRequest="10"/> <!--Saut de ligne-->  
        <StackLayout Orientation="Horizontal" Spacing="10" >  

            <Frame x:Name="FAgneau" ClassId="Agneau" BorderColor="red" WidthRequest="85" Padding="2" CornerRadius="5">  
                <Frame.GestureRecognizers>  
                    <TapGestureRecognizer Tapped="Frame_Tapped"/>  
                </Frame.GestureRecognizers>  
                <StackLayout>  
                 <RadioButton x:Name="RBangeau" GroupName="animals" HorizontalOptions="End" IsChecked="True"/>  
                    <Image Source="Agneau03.png"/>  
                    <Label Text="Agneau" FontSize="Large" FontAttributes="Bold" HorizontalTextAlignment="Center"/>  
                </StackLayout>  
            </Frame>  

            <Frame x:Name="FBoeuf" ClassId="Boeuf" BorderColor="White" WidthRequest="85" Padding="2" CornerRadius="5">  
                <Frame.GestureRecognizers>  
                    <TapGestureRecognizer Tapped="Frame_Tapped"/>  
                </Frame.GestureRecognizers>  
                <StackLayout>  
                    <RadioButton x:Name="RBboeuf" GroupName="animals" HorizontalOptions="End"/>  
                    <Image Source="Vache03.png"/>  
                    <Label Text="Boeuf" FontSize="Large" FontAttributes="Bold" HorizontalTextAlignment="Center" />  
                </StackLayout>  
            </Frame>  

            <Frame x:Name="FPorc" ClassId="Porc" BorderColor="White" WidthRequest="85" Padding="2" CornerRadius="5">  
                <Frame.GestureRecognizers>  
                    <TapGestureRecognizer Tapped="Frame_Tapped"/>  
                </Frame.GestureRecognizers>  
            <StackLayout>  
                <RadioButton x:Name="RBporc" GroupName="animals" Value="Porc" HorizontalOptions="End"/>  
                <Image Source="Porc03.png" />  
                <Label Text="Porc" FontSize="Large" FontAttributes="Bold" HorizontalTextAlignment="Center"/>  
            </StackLayout>  
            </Frame>  

            <Frame x:Name="FVeau" ClassId="Veau" BorderColor="White" WidthRequest="85" Padding="2" CornerRadius="5">  
                    <Frame.GestureRecognizers>  
                        <TapGestureRecognizer Tapped="Frame_Tapped"/>  
                    </Frame.GestureRecognizers>  
                    <StackLayout>  
                <RadioButton x:Name="RBveau" GroupName="animals" Value="Veau" HorizontalOptions="End"/>  
                <Image Source="Veau03.png"/>  
                <Label Text="Veau"  FontSize="Large" FontAttributes="Bold" HorizontalTextAlignment="Center"/>  
            </StackLayout>  
            </Frame>  
           
        </StackLayout>  
        <StackLayout HeightRequest="10"/>  
          
        <Label x:Name="AfficheSelect" Text="Vous avez choisie : Agneau" FontSize="Large"/>  
          
       <StackLayout HeightRequest="10"/>  

         

    </StackLayout>  
</ContentPage.Content>  

Bye
Manu

Answer 3

Coté page...xaml.cs

public string AnimalSelect;

    public void Sanimal()
    {
        FAgneau.BorderColor = Color.White;
        FBoeuf.BorderColor = Color.White;
        FPorc.BorderColor = Color.White;
       FVeau.BorderColor = Color.White;

        switch (AnimalSelect)
        {
            case "Agneau":
                RBangeau.IsChecked = true;
                FAgneau.BorderColor = Color.Red;
                break;

            case "Boeuf":
                RBboeuf.IsChecked = true;
                FBoeuf.BorderColor = Color.Red;
                break;

            case "Porc":
                RBporc.IsChecked = true;
                FPorc.BorderColor = Color.Red;
                break;

            case "Veau":
                RBveau.IsChecked = true;
                FVeau.BorderColor = Color.Red;
                break;
        }
    }



    private void Frame_Tapped(object sender, EventArgs e)
    {
        Frame SelectImage = (Frame)sender;
        AnimalSelect = SelectImage.ClassId.ToString();
        Sanimal();
        AfficheSelect.Text = "Vous avez choisie : " + AnimalSelect;
    }

My code works, but is it writing well?