Problem <Radiobutton.Content>

manu aloyau 41 Reputation points
2021-09-12T15:35:12.423+00:00

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

131305-tel.png

Thank you for your help
ManuAntibes

Developer technologies | .NET | Xamarin
0 comments No comments
{count} votes

Accepted answer
  1. Kyle Wang 5,531 Reputation points Microsoft External Staff
    2021-09-13T01:47:44.367+00:00

    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.

    0 comments No comments

2 additional answers

Sort by: Most helpful
  1. manu aloyau 41 Reputation points
    2021-09-14T18:00:09.063+00:00

    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>  
    

    132074-capture-decran-141.png

    Bye
    Manu

    0 comments No comments

  2. manu aloyau 41 Reputation points
    2021-09-14T18:05:46.227+00:00

    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?


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.