I am trying to create a Radio Button group using A Bindable Layout with an array of Int32 as an ItemSource.
<FlexLayout Direction="Row" JustifyContent="SpaceEvenly" AlignItems="Center"
RadioButtonGroup.GroupName="{Binding GroupName}"
RadioButtonGroup.SelectedValue="{Binding Rating}">
<BindableLayout.ItemsSource>
<x:Array Type="{x:Type x:Int32}">
<x:Int32>1</x:Int32>
<x:Int32>2</x:Int32>
<x:Int32>3</x:Int32>
<x:Int32>4</x:Int32>
<x:Int32>5</x:Int32>
</x:Array>
</BindableLayout.ItemsSource>
<BindableLayout.ItemTemplate>
<DataTemplate>
<RadioButton Value="{Binding .}">
<RadioButton.Content>
<Label Text="{Binding .}" Style="{StaticResource RatingButtonLabel}" />
</RadioButton.Content>
</RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
The Value binding appears to work correctly, but my Labels do not show any text.
If I switch to a constant value like this, the Labels do render correctly.
<Label Text="Test" Style="{StaticResource RatingButtonLabel}" />
I am using a ControlTemplate for my radio buttons.
<ContentView.Resources>
<ControlTemplate x:Key="RadioButtonTemplate">
<Border
Stroke="Purple"
StrokeThickness="3"
Padding="0"
StrokeShape="Ellipse 40, 40">
<VisualStateManager.VisualStateGroups>
... snip
</VisualStateManager.VisualStateGroups>
<Grid x:Name="content" BackgroundColor="Blue" Margin="2">
<ContentPresenter />
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="RadioButton">
<Setter Property="ControlTemplate"
Value="{StaticResource RadioButtonTemplate}" />
</Style>
<Style TargetType="Label" x:Key="RatingButtonLabel">
<Setter Property="TextColor" Value="Black" />
</Style>
</ContentView.Resources>
What am I doing wrong? So far, I have only tried this on Android. I tried adding an IValueConverter
but the value being passed to the converter is always null.
I ended up solving this using a TemplateBinding
in my ControlTemplate
.
<FlexLayout Direction="Row" JustifyContent="SpaceEvenly" AlignItems="Center"
BindingContext="{x:Reference self}"
x:Name="rootLayout"
RadioButtonGroup.GroupName="{Binding GroupName}"
RadioButtonGroup.SelectedValue="{Binding Rating}">
<BindableLayout.ItemsSource>
<x:Array Type="{x:Type x:Int32}">
<x:Int32>1</x:Int32>
<x:Int32>2</x:Int32>
<x:Int32>3</x:Int32>
<x:Int32>4</x:Int32>
<x:Int32>5</x:Int32>
</x:Array>
</BindableLayout.ItemsSource>
<BindableLayout.ItemTemplate>
<DataTemplate>
<RadioButton Value="{Binding .}" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
<ControlTemplate x:Key="RadioButtonTemplate">
<Border
Stroke="Purple"
StrokeThickness="3"
Padding="0"
StrokeShape="Ellipse 40, 40">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
//snip
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="content" BackgroundColor="Blue" Margin="2">
<Label x:Name="label" Text="{TemplateBinding Value}" Style="{StaticResource RatingButtonLabel}" />
</Grid>
</Border>
</ControlTemplate>