maui

Binding Label Text to int value does not work inside a BindableLayout


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.


Solution

  • 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>