Xamarin Forms Radio Button with Control Template doesn't support binding for Radio Button's Content

Question

I have a radio button with a control template that is binding to a list of countries, a country has its flag image and name. When I set binding, the number of elements appear correctly but the country's name and the flag image doesn't appear. I think the binding doesn't work inside radio button's content.

![<!-- Control Template -->  
  
<ContentPage.Resources>  
        <ResourceDictionary>  
            <ControlTemplate x:Key="ThemeRadioTemplate">  
                <Frame x:Name="CheckFrame" Padding="15,0,15,0" BackgroundColor="{StaticResource LightSecondoryColor}" HasShadow="False" HeightRequest="50" WidthRequest="240" HorizontalOptions="Center" VerticalOptions="Start" CornerRadius="30">  
                    <Grid Margin="4" WidthRequest="80">  
                        <Grid HeightRequest="20" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="20">  
                            <Ellipse Fill="White" HeightRequest="18" HorizontalOptions="Center" Stroke="#140D38" StrokeThickness="1" VerticalOptions="Center" WidthRequest="18" />  
                            <Ellipse x:Name="Check" BackgroundColor="Transparent" Fill="{StaticResource SecondoryColor}" HeightRequest="10" HorizontalOptions="Center" Stroke="#00E4B4" StrokeThickness="0" VerticalOptions="Center" WidthRequest="10" />  
                        </Grid>  
                        <!-- This enables us to put in dynamic content -->  
                        <ContentPresenter />  
                    </Grid>  
                    <VisualStateManager.VisualStateGroups>  
                        <VisualStateGroupList>  
                            <VisualStateGroup x:Name="CheckedStates">  
                                <VisualState x:Name="Checked">  
                                    <VisualState.Setters>  
                                        <Setter TargetName="Check" Property="Opacity" Value="1" />  
                                        <Setter TargetName="CheckFrame" Property="BackgroundColor" Value="{StaticResource LightSecondoryColor}" />  
                                    </VisualState.Setters>  
                                </VisualState>  
                                <VisualState x:Name="Unchecked">  
                                    <VisualState.Setters>  
                                        <Setter TargetName="Check" Property="Opacity" Value="0" />  
                                        <Setter TargetName="CheckFrame" Property="BackgroundColor" Value="{StaticResource ColorOnDarkBackground}" />  
                                    </VisualState.Setters>  
                                </VisualState>  
                            </VisualStateGroup>  
                        </VisualStateGroupList>  
                    </VisualStateManager.VisualStateGroups>  
                </Frame>  
            </ControlTemplate>  
        </ResourceDictionary>  
    </ContentPage.Resources>  
  
  
  
<!-- Radio Button -->  
  
<StackLayout x:Name="stack" VerticalOptions="CenterAndExpand" Margin="0,20,0,20" BindableLayout.ItemsSource="{Binding CountryList}">  
                <BindableLayout.ItemTemplate>  
                    <DataTemplate>  
                        <RadioButton ControlTemplate="{StaticResource ThemeRadioTemplate}" IsChecked="{Binding IsChecked}">  
                            <RadioButton.Content>  
                                <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center" Spacing="20">  
                                    <Image Source="{Binding FlagImage}" HeightRequest="32" HorizontalOptions="Start" VerticalOptions="Center"/>  
                                    <Label Text="{Binding CountryName}" FontSize="Default" FontFamily="SemiBold" VerticalOptions="Center" TextColor="{StaticResource TextColor}" Margin="{OnPlatform Android='0,0,0,-7', iOS='0'}"/>  
                                </StackLayout>  
                            </RadioButton.Content>  
                        </RadioButton>  
                    </DataTemplate>  
                </BindableLayout.ItemTemplate>  
            </StackLayout>][1]   

Answer 1

Hello,

Because property-element syntax for Content property of the RadioButton was used, the BindingContext of the RadioButton would be null.

The official documentation says:

On Android, RadioButton objects will display a string-based representation of the View object that's been set as content.

You can follow this issue. This might be helpful.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.