xct:Expander.Header confusion

Question

Hi,

First of all, I am very new to Xamarin.Forms development and really have no idea how to approach things in the right way when it comes to .xaml.

So, what I am trying to achieve is the following. I want a hint field that expands if you tap on it. Currently I have this (colors help me identify stuff):

and if I tap on it, it looks like this:

but if the text of the label in the expander.header is to long or the fontsize is to big it tries to wrap the text but it does not resize.

Is it possible to fix this inside .xaml code or do I have to take things to the C# side?
Is my approach a good idea to begin with?

Here is the source code:

<AbsoluteLayout BackgroundColor="Yellow">  
                    <StackLayout Orientation="Vertical" Padding="5,0,0,0" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">  
                        <BoxView Color="Orange" HeightRequest="10"/>  
                          
                        <Frame BorderColor="Green" BackgroundColor="Green" CornerRadius="0" Padding="1">  
                            <Frame BorderColor="Transparent" CornerRadius="0" Padding="0">  
                                <StackLayout Orientation="Horizontal">  
                                    <BoxView WidthRequest="55"/>  
                                    <xct:Expander>  
                                        <xct:Expander.Header>  
                                            <Label Text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr" Style="{StaticResource LabelLarge}"  
                                                     
                                                   Padding="0,5,0,5"   
                                                   LineBreakMode="WordWrap"/>  
                                        </xct:Expander.Header>  
                                        <Label LineBreakMode="WordWrap"  
                                               Style="{StaticResource LabelSmall}"  
                                               Text="{Binding HintText}"/>  
                                    </xct:Expander>  
                                </StackLayout>  
                            </Frame>  
                        </Frame>  
                    </StackLayout>  
                      
                    <BoxView BackgroundColor="Green" AbsoluteLayout.LayoutBounds="0,0,58,58"/>  
                </AbsoluteLayout>  

I use the AbsoluteLayout to size the green box in the top left, and the weird nested stacklayouts with transparent boxes to offset the expander.
Maybe use a grid instead?

Thanks in advance!

Cheers,
Michael

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

The problem is that you use AbsoluteLayout.

As a test,I modyfied your code and used in a CollectionView ,just as follows:

        <CollectionView ItemsSource="{Binding NameTags}">  
            <CollectionView.ItemTemplate>  
                <DataTemplate>  
                    <StackLayout  BackgroundColor="Yellow" >  
                        <StackLayout Orientation="Vertical" Padding="5,0,0,0" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" VerticalOptions="FillAndExpand">  
                            <BoxView Color="Orange" HeightRequest="10"/>  

                            <Frame BorderColor="Green" BackgroundColor="Green" CornerRadius="0" Padding="1" VerticalOptions="FillAndExpand">  
                                <Frame BorderColor="Transparent" CornerRadius="0" Padding="0">  
                                    <StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand" >  
                                        <BoxView WidthRequest="55"/>  
                                        <xct:Expander VerticalOptions="FillAndExpand">  
                                            <xct:Expander.Header>  
                                                <Label Text="{Binding Name}" VerticalOptions="FillAndExpand"  
                                                     
                                                Padding="0,5,0,5"   
                                                LineBreakMode="WordWrap"/>  
                                            </xct:Expander.Header>  
                                            <Label LineBreakMode="WordWrap"  
                                            Text="{Binding Name}"/>  
                                        </xct:Expander>  
                                    </StackLayout>  
                                </Frame>  
                            </Frame>  
                        </StackLayout>  

                        <BoxView BackgroundColor="Green" AbsoluteLayout.LayoutBounds="0,0,58,58"/>  
                    </StackLayout>  
                </DataTemplate>  
            </CollectionView.ItemTemplate>  
        </CollectionView>  

The result is:

You can find the expander.headercould resize based on the content of header.

Update:

Can I achieve a similar effect without using an absolute layout?

Yes, you can use Grid to achieve this.

You can refer to the following code, which works properly on my side.

        <CollectionView ItemsSource="{Binding NameTags}">  
            <CollectionView.ItemTemplate>  
                <DataTemplate>  
                    <Grid>  
                        <Grid.RowDefinitions>  
                            <RowDefinition Height="*" />  
                        </Grid.RowDefinitions>  
                        <Grid.ColumnDefinitions>  
                            <ColumnDefinition Width="*" />  
                        </Grid.ColumnDefinitions>  

                        <StackLayout  BackgroundColor="Yellow" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"  >  
                            <StackLayout Orientation="Vertical" Padding="5,0,0,0" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" VerticalOptions="FillAndExpand">  
                                <BoxView Color="Orange" HeightRequest="10"/>  
                                <Frame BorderColor="Green" BackgroundColor="Green" CornerRadius="0" Padding="1" VerticalOptions="FillAndExpand">  
                                    <Frame BorderColor="Transparent" CornerRadius="0" Padding="0">  
                                        <StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand" >  
                                            <BoxView WidthRequest="55"/>  
                                            <xct:Expander VerticalOptions="FillAndExpand">  
                                                <xct:Expander.Header>  
                                                    <Label Text="{Binding Name}" VerticalOptions="FillAndExpand"  
                                                     
                                             Padding="0,5,0,5"   
                                             LineBreakMode="WordWrap"/>  
                                                </xct:Expander.Header>  
                                                <Label LineBreakMode="WordWrap"  
                                         Text="{Binding Name}"/>  
                                            </xct:Expander>  
                                        </StackLayout>  
                                    </Frame>  
                                </Frame>  
                            </StackLayout>  

                        </StackLayout>  

                        <BoxView BackgroundColor="Green" WidthRequest="60" HeightRequest="60" HorizontalOptions="Start"  VerticalOptions="Start"/>  
                    </Grid>  
 
                </DataTemplate>  
            </CollectionView.ItemTemplate>  
        </CollectionView>  

The result is:

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

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.