Net maui How to change color of contentview and icon color when expanded ?

Question

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"             
             x:Class="AppMaui.Controls.ExpansionPanel"
             xmlns:local="clr-namespace:AppMaui"
             xmlns:icon="clr-namespace:AppMaui.Resources.FontIcons"
             x:Name="this">
    <ContentView.ControlTemplate>
        <ControlTemplate x:Name="controlTemplate">
            <VerticalStackLayout>
                <Border Stroke="{StaticResource White}"  StrokeShape="RoundRectangle 3" Padding="10,5">
                    <StackLayout Orientation="Horizontal">
                        <ContentView Content="{Binding Source={x:Reference this},Path=HeaderContent}" >
                            <ContentView.GestureRecognizers>
                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                            </ContentView.GestureRecognizers>
                        </ContentView>
                        <Label x:Name="angleIcon" RotationX="0" FontSize="{StaticResource BaseFontSize}" TextColor="{Binding Source={x:Reference this},Path=IconColor}" Style="{StaticResource lineAwesomeIcon}" Text="{x:Static icon:LineAwesome.AngleDown}" HorizontalOptions="EndAndExpand" />
                    </StackLayout>
                </Border>
                <Border IsVisible="{Binding Source={x:Reference this},Path=IsExpanded}"  Grid.Row="1"  Stroke="{StaticResource White}"  StrokeShape="RoundRectangle 0,0,3,3" Margin="0,-5,0,0">
                    <ContentPresenter  Padding="10,5" />
                </Border>
            </VerticalStackLayout>
        </ControlTemplate>
    </ContentView.ControlTemplate>
</ContentView>

c# ......


public partial class ExpansionPanel : ContentView
{
	public ExpansionPanel()
	{
		InitializeComponent();
	}

    public static readonly BindableProperty HeaderContentProperty = BindableProperty.Create(
     propertyName: nameof(HeaderContent),
     returnType: typeof(View),
     declaringType: typeof(ExpansionPanel),
     defaultValue: new VerticalStackLayout()
     );

    public View HeaderContent
    {
        get => (View)GetValue(HeaderContentProperty);
        set => SetValue(HeaderContentProperty, value);
    }

    public static readonly BindableProperty IconColorProperty = BindableProperty.Create(
 propertyName: nameof(IconColor),
 returnType: typeof(Color),
 declaringType: typeof(ExpansionPanel),
null
 );

    public Color IconColor
    {
        get => (Color)GetValue(IconColorProperty);
        set => SetValue(IconColorProperty, value);
    }

    public static readonly BindableProperty IsExpandedProperty = BindableProperty.Create(
     propertyName: nameof(IsExpanded),
     returnType: typeof(bool),
     declaringType: typeof(ExpansionPanel),
     defaultValue: false
     );

    public bool IsExpanded
    {
        get => (bool)GetValue(IsExpandedProperty);
        set => SetValue(IsExpandedProperty, value);
    }
   
private bool IsRotated; // add a property into this ExpansionPanel.
private Label angleIcon; // access the icon control.
protected override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    angleIcon = (Label)GetTemplateChild("angleIcon");
}

private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
        IsExpanded = !IsExpanded;
        if (IsRotated == false)
        {
            angleIcon.RotateTo(90);
            angleIcon.SetDynamicResource(Label.TextColorProperty, "Red"); // it is working
            IsRotated = true;
        }
        else
        {
  
            angleIcon.SetDynamicResource(Label.TextColorProperty, "IconColor"); // it is not working

            angleIcon.RotateTo(0);
            IsRotated = false;
        }
    }
}

Platform Android and ios

I am trying change color of rotated icon as above

why is not working IconColor is dynamic resource

and also how to change color of contentview "Header Content" ?

Answer 1

Hello,

angleIcon.SetDynamicResource(Label.TextColorProperty, "IconColor"); // it is not working

Because IconColoris not a string of color. Please use following code to change the text color. angleIcon.SetDynamicResource(Label.TextColorProperty, "Black");

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.