question

manualoyau-4681 avatar image
0 Votes"
manualoyau-4681 asked KyleWang-MSFT commented

Problem <Radiobutton.Content>

Hello,
I have a problem with the use of radion-button.
I want to redo David Britch's code example on page
https://docs.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

dotnet-xamarinforms
tel.png (50.7 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

KyleWang-MSFT avatar image
0 Votes"
KyleWang-MSFT answered KyleWang-MSFT edited

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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

manualoyau-4681 avatar image
0 Votes"
manualoyau-4681 answered

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


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

manualoyau-4681 avatar image
0 Votes"
manualoyau-4681 answered KyleWang-MSFT commented

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?

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@manualoyau-4681 You can also set border color using "ControlTemplate".

 <VisualState x:Name="Checked">
     <VisualState.Setters>
         <Setter Property="BorderColor"
             Value="Red" />

To get the selected item, subscribe to the event "CheckedChanged" for each RadioButton.

 <RadioButton Value="Cat" CheckedChanged="OnAnimalRadioButtonCheckedChanged">

xaml.cs:

 void OnAnimalRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
 {
     RadioButton button = sender as RadioButton;
     AfficheSelect.Text = "Vous avez choisie : " + button.Value;
 }
0 Votes 0 ·