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

Ruvindra Senevirathne 1 Reputation point
2022-02-27T17:38:07.1+00:00

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]   
Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,301 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 36,951 Reputation points Microsoft Vendor
    2022-02-28T07:08:44.557+00:00

    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.