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

296 Views Asked by At

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

There are 1 best solutions below

0
Liqun Shen-MSFT On BEST ANSWER

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!