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

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,326 questions
0 comments No comments
{count} votes

Accepted answer
  1. Kyle Wang 5,531 Reputation points
    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: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?


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