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

Sami 861 Reputation points
2023-05-11T06:35:21.81+00:00
<?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" ?

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,049 questions
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 70,556 Reputation points Microsoft Vendor
    2023-05-12T05:42:57.2633333+00:00

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful