Net Maui custom control (expansionpanel) why is not display the view of HeaderContent ?

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="aaa.Controls.ExpansionPanel"
             xmlns:local="clr-namespace:aaa"
             xmlns:c="clr-namespace:aaa.Controls"
             xmlns:icon="clr-namespace:aaa.Resources.FontIcons"
             x:Name="this">

    <ContentView.ControlTemplate>
        <ControlTemplate>
            <VerticalStackLayout>
                <Border  BackgroundColor="{StaticResource BackColor}" StrokeShape="RoundRectangle 3" Padding="10,7,5,5">
                    <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                        </StackLayout.GestureRecognizers>
                        <ContentView x:Name="expandContent" Content="{Binding Source={x:Reference this},Path=HeaderContent}" WidthRequest="270"/>
                        <Label x:Name="angleIcon" FontSize="{StaticResource BaseFontSize}" Style="{StaticResource ionIcon}" Text="{x:Static icon:IonIcons.ArrowDownB}" HorizontalOptions="EndAndExpand" />
                    </StackLayout>
                </Border>
                <Border  IsVisible="{Binding Source={x:Reference this},Path=IsExpanded}"  Grid.Row="1"  BackgroundColor="{StaticResource BackColor}"  StrokeShape="RoundRectangle 0,0,3,3" Margin="0,-5,0,0" >
                    <StackLayout Orientation="Vertical" Margin="0,5,0,0">
                    <BoxView x:Name="borderColor" Color="{Binding Source={x:Reference this},Path=ThemeColor}" Style="{StaticResource borderBoxView}" />
                    <ContentPresenter  Padding="10" />
                    </StackLayout>
                </Border>
            </VerticalStackLayout>
        </ControlTemplate>
    </ContentView.ControlTemplate>
</ContentView>

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

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

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

  private Label angleIcon; // access the icon control.     
  private ContentView expandContent; // access the icon control.     

 protected override void OnApplyTemplate()     
{  
       
base.OnApplyTemplate();         
angleIcon = (Label)GetTemplateChild("angleIcon");         
expandContent = (ContentView)GetTemplateChild("expandContent");      
}

}

<CollectionView Grid.Row="2" x:Name="ContentStocks"  ItemsSource="{Binding Stocks}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Orientation="Vertical" Margin="20,0" Spacing="2" >
                <c:ExpansionPanel ThemeColor="{StaticResource Help}">
                    <c:ExpansionPanel.HeaderContent>
                        <Label Text="{Binding Header,Converter={StaticResource langConverter}}"/>
                    </c:ExpansionPanel.HeaderContent>
                    <Label Text="{Binding Details,Converter={StaticResource langConverter}}"/>
                </c:ExpansionPanel>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Label with converter inside of HeaderContent is not display but when i move outside of HeaderContent is display the content of header also Label with binding Details is display correctly

Answer 1

Hello,

I think the problem with contentview (view)

Yes, you cannot use BindableProperty to transfer view to the contentview, before you bind value to the Label in the CollectionView, this view was set to the contentview, so you this value of label cannot be show.

You can change the <ContentView x:Name="expandContent" Content="{Binding Source={x:Reference this},Path=HeaderContent}" WidthRequest="270"/> to <Label x:Name="expandContent" WidthRequest="270"/> in the ExpansionPanel.xaml.

Then open your ExpansionPanel.xaml.cs to change the type of HeaderContentProperty to string and set the Label value in the HeaderContentChanged method like following code.

By the way, do not forget to change type of expandContent = (Label)GetTemplateChild("expandContent"); to Label

public static readonly BindableProperty HeaderContentProperty = BindableProperty.Create(
propertyName: nameof(HeaderContent),
returnType: typeof(string),
declaringType: typeof(ExpansionPanel),
    null,
    propertyChanged:HeaderContentChanged
);
static void HeaderContentChanged(BindableObject bindable, object oldValue, object newValue)
{
     expandContent.Text = newValue as string;
}
public string HeaderContent
{
     get => (string)GetValue(HeaderContentProperty);
     set => SetValue(HeaderContentProperty, value);
}


private static Label angleIcon; // access the icon control.     
private static Label expandContent; // access the icon control.     


protected override void OnApplyTemplate()
{


    base.OnApplyTemplate();
     angleIcon = (Label)GetTemplateChild("angleIcon");
     expandContent = (Label)GetTemplateChild("expandContent");
}

Next, open your <CollectionView >, change c:ExpansionPanel like following code

<c:ExpansionPanel HeaderContent="{Binding Header,Converter={StaticResource langConverter}}">
  
 
   <Label Text="{Binding Details,Converter={StaticResource langConverter}}"/>
</c:ExpansionPanel>

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.