Search code examples
c#xamlradio-buttonmauicontentpresenter

How to change the color of Text of ContentPresenter in .Net MAUI


I have using custom styled Radio Button in my application where it uses ContentPresenter for displaying text/content. I want to change the color of the Text.

I have tried TextColor and TextBlock.Foreground but these doesnot solved it.

This is the Sample of my code:

<ControlTemplate x:Key="RadioButtonTemplate">
    <Border Stroke="Transparent" BackgroundColor="Transparent">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CheckedStates">
                    <VisualState x:Name="Checked">
                        <VisualState.Setters>
                            <Setter TargetName="check" Property="Opacity" Value="1" />
                            <Setter TargetName="check_circle" Property="Opacity" Value="1" />
                            <Setter TargetName="border_circle" Property="Opacity" Value="0" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Unchecked">
                        <VisualState.Setters>
                            <Setter TargetName="check" Property="Opacity" Value="0" />
                            <Setter TargetName="check_circle" Property="Opacity" Value="0" />
                            <Setter TargetName="border_circle" Property="Opacity" Value="1" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </VisualStateManager.VisualStateGroups>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid WidthRequest="20" HeightRequest="20" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Center">
                <Ellipse x:Name="border_circle" StrokeThickness="2" Stroke="{StaticResource PlaceholderColor}" Fill="Transparent" WidthRequest="18" HeightRequest="18" HorizontalOptions="Center" VerticalOptions="Center" />
                <Ellipse x:Name="check" Fill="{StaticResource BackgroundColor}" WidthRequest="10" HeightRequest="10" HorizontalOptions="Center" VerticalOptions="Center" />
                <Ellipse x:Name="check_circle" StrokeThickness="2" Stroke="{StaticResource BackgroundColor}" WidthRequest="18" HeightRequest="18" HorizontalOptions="Center" VerticalOptions="Center" />
            </Grid>
            <ContentPresenter Margin="10,0,0,0" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center" />
        </Grid>
    </Border>
</ControlTemplate>

<Style TargetType="RadioButton" x:Key="RadioButtonStyle">
    <Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
    <Setter Property="TextColor" Value="{StaticResource Black}" />
</Style> 

Solution

  • You could set the TextColor in RadioButton.Content when consuming the ControlTemplate

    <RadioButton Value="Elephant">
        <RadioButton.Content>
            <StackLayout>
                <Image Source="dotnet_bot.png"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" />
                <Label Text="Elephant" TextColor="Yellow"
                       HorizontalOptions="Center"
                       VerticalOptions="End" />
            </StackLayout>
        </RadioButton.Content>
    </RadioButton>
    

    For more info, you could refer to Redefine RadioButton appearance

    Hope it helps!