Как изменить цвет текста ContentPresenter в зависимости от состояния элемента управления в .Net MAUI
Мой вопрос является расширением этого вопроса, где я хочу изменить цвет текста в зависимости от состояния переключателя. Я хочу, чтобы он был белым, если флажок установлен, и черным, если флажок снят.
Подробности: Я использую радиокнопку с пользовательским стилем в своем приложении после Переопределить внешний вид RadioButton, где он создает ControlTemplate для настройки внешнего вида и использует ContentPresenter для отображения текста/контента.
Я изменил его до нужной формы, но не смог изменить цвет текста в зависимости от того, установлен ли переключатель или нет.
Ниже мой код.
<ControlTemplate x:Key = "RadioButtonTemplate">
<Border x:Name = "RadioBorder1"
StrokeShape = "RoundRectangle 3"
BackgroundColor = "#F3F2F1"
HeightRequest = "30"
WidthRequest = "120">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name = "CheckedStates">
<VisualState x:Name = "Checked">
<VisualState.Setters>
<Setter Property = "BackgroundColor" Value = "MediumPurple" />
<Setter Property = "Stroke" Value = "MediumPurple" />
<Setter TargetName = "check" Property = "Opacity" Value = "1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name = "Unchecked">
<VisualState.Setters>
<Setter Property = "BackgroundColor" Value = "#F3F2F1" />
<Setter Property = "Stroke" Value = "#F3F2F1" />
<Setter TargetName = "check" Property = "Opacity" Value = "0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid Margin = "4" WidthRequest = "120">
<Grid WidthRequest = "120" HeightRequest = "30">
<RoundRectangle />
<RoundRectangle x:Name = "check" />
</Grid>
<ContentPresenter HorizontalOptions = "StartAndExpand" Padding = "5,1,1,1" />
</Grid>
</Border>
</ControlTemplate>
<Style TargetType = "RadioButton">
<Setter Property = "ControlTemplate"
Value = "{StaticResource RadioButtonTemplate}" />
</Style>
<!--Radio Buttons-->
<Label Text = "What's your favorite color?" />
<VerticalStackLayout RadioButtonGroup.GroupName = "colors">
<HorizontalStackLayout HorizontalOptions = "Start" Margin = "3,0,0,0">
<RadioButton Content = "Red" CheckedChanged = "RadioButton_CheckedChanged" />
<RadioButton Content = "Green" CheckedChanged = "RadioButton_CheckedChanged" />
<RadioButton Content = "Blue" CheckedChanged = "RadioButton_CheckedChanged" />
</HorizontalStackLayout>
<HorizontalStackLayout HorizontalOptions = "StartAndExpand">
<RadioButton Content = "Enable" />
<RadioButton Content = "Disable" />
<RadioButton Content = "Other" />
</HorizontalStackLayout>
<HorizontalStackLayout HorizontalOptions = "CenterAndExpand">
<RadioButton Content = "Working" />
<RadioButton Content = "Turbo Power" />
</HorizontalStackLayout>
</VerticalStackLayout>
Я попробовал изменить цвет текста в событии CheckedChanged, но это не помогло.
private void RadioButton_CheckedChanged(object sender, CheckedChangedEventArgs e)
{ Переключатель? кнопка = отправитель как RadioButton;
if ((button?.IsChecked ?? false) == true)
{
val = button?.Content?.ToString() ?? string.Empty;
//button.TextColor = Colors.White;
}
}
Вот что у меня сейчас есть, и я пытаюсь изменить цвет текста на белый для выбранного элемента.
Спасибо за вашу помощь.
Я использую .net8.0 и пробую его на эмуляторе Android Pixel 5 – API 34:5554
Ответы 1
Чтобы решить эту проблему, вы можете использовать Относительные привязки и преобразователи значений привязок.
Я собираюсь связать свойство LabelTextColor со свойством RadioButtonIsChecked,
<Label Text = "Cat"
TextColor = "{Binding IsChecked,Source = {RelativeSource AncestorType = {x:Type RadioButton}},Converter = {StaticResource isCheckedConverter}}"
HorizontalOptions = "Center"
VerticalOptions = "End" />
Итак, нам нужен преобразователь значений для преобразования значения свойства IsChecked. (True/False) для значения Label TextColor. Мы создаем новый класс под названием IsCheckedConverter.cs,
public class IsCheckedConverter : IValueConverter
{
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
bool a = (bool)value;
if (a)
{
return Colors.White;
}
else {
return Colors.Black;
}
}
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
{
return Binding.DoNothing;
}
Не забудьте поставить ContentPage.Resources
<ContentPage.Resources>
......
<local:IsCheckedConverter x:Key = "isCheckedConverter"/>
</ContentPage.Resources>
Спасибо. Хитрость заключается в использовании относительных привязок и преобразователей значений привязки. Вот эквивалентный код C#, который я использовал var isCheckedConverter = new IsCheckedConverter(); RadioButton radioButton = new RadioButton(); radioButton.Value = "Yes"; Label label = new Label(); label.Text = "Yes"; label.SetBinding(Label.TextColorProperty, new Binding("IsChecked", source: radioButton, converter: isCheckedConverter)); radioButton.Content = label;
Рад, что это помогает! Приятного кодирования!
Могу ли я спросить, какую версию .NET и какую платформу вы используете?