MAUI Expander Tapped and ContentTemplate

Question

MAUI Expander Tapped and ContentTemplate

Bhuwan 821

Hi

in xamarin forms Header expender tapped and ContentTemplate working but when migrate xamarin forms to MAUI expander header tapped and ContentTemplate not exits can you suggest me any alternate expander.

Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,106 Reputation points Microsoft External Staff

2023-08-04T01:59:34.9333333+00:00

May I know whether your issue has been solved or not? If you're still having problems, please explain in detail what is still going wrong and what you need help with.

Bhuwan 821

I want Expander like this header Tapped and ContentTemplate

<Expander>
    <Expander.Header Tapped="">
        <Label Text="{Binding Name}"
               FontAttributes="Bold"
               FontSize="Medium" />
    </Expander.Header>
    <Expander.ContentTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="120"
                       WidthRequest="120" />
                <Label Grid.Column="1"
                       Text="{Binding Details}"
                       FontAttributes="Italic" />
            </Grid>
        </DataTemplate>
    </Expander.ContentTemplate>
</Expander>

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,106 Microsoft External Staff

After investigation, both functions are achievable in MAUI.

For Tapped event, In MAUI it's actually called Command, which you can call via MVVM.

Command ICommand Executes when the Expander header is tapped.

You could also respond to a header click by calling the ExpandedChanged event provided by Expander.

<toolkit:Expander ExpandedChanged="Expander_ExpandedChanged">

You could refer to Expander - properties for more details.

For ContentTemplate, In MAUI's Expander space, you no longer need to declare a separate ContentTemplate.

The code you give can be implemented in MAUI in the following way:


<toolkit:Expander ExpandedChanged="Expander_ExpandedChanged">
    <toolkit:Expander.Header>
        <Label Text="{Binding Name}"
               FontAttributes="Bold"
               FontSize="Medium" />
    </toolkit:Expander.Header>
    <Grid Padding="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Image Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="120"
                       WidthRequest="120" />
        <Label Grid.Column="1"
                       Text="{Binding Details}"
                       FontAttributes="Italic" />
    </Grid>
</toolkit:Expander>

Bhuwan 821 Reputation points

2023-08-04T08:36:29.74+00:00

Is it possible to create custom renderer for ContentTemplate because i want this and i am using same in xamarin now i am migrating project in MAUI. or can you give me any other alternate which is working same like this.

2 answers

Your answer

Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,106 Reputation points Microsoft External Staff

2023-08-04T01:59:34.9333333+00:00

May I know whether your issue has been solved or not? If you're still having problems, please explain in detail what is still going wrong and what you need help with.
Bhuwan 821 Reputation points

2023-08-04T03:08:33.2533333+00:00

I want Expander like this header Tapped and ContentTemplate

<Expander> <Expander.Header Tapped=""> <Label Text="{Binding Name}" FontAttributes="Bold" FontSize="Medium" /> </Expander.Header> <Expander.ContentTemplate> <DataTemplate> <Grid Padding="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Image Source="{Binding ImageUrl}" Aspect="AspectFill" HeightRequest="120" WidthRequest="120" /> <Label Grid.Column="1" Text="{Binding Details}" FontAttributes="Italic" /> </Grid> </DataTemplate> </Expander.ContentTemplate> </Expander>
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,106 Reputation points Microsoft External Staff

2023-08-04T06:25:06.2733333+00:00

After investigation, both functions are achievable in MAUI.

For Tapped event, In MAUI it's actually called Command, which you can call via MVVM.

Command ICommand Executes when the Expander header is tapped.

You could also respond to a header click by calling the ExpandedChanged event provided by Expander.

<toolkit:Expander ExpandedChanged="Expander_ExpandedChanged">

You could refer to Expander - properties for more details.

For ContentTemplate, In MAUI's Expander space, you no longer need to declare a separate ContentTemplate.

The code you give can be implemented in MAUI in the following way:

<toolkit:Expander ExpandedChanged="Expander_ExpandedChanged"> <toolkit:Expander.Header> <Label Text="{Binding Name}" FontAttributes="Bold" FontSize="Medium" /> </toolkit:Expander.Header> <Grid Padding="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Image Source="{Binding ImageUrl}" Aspect="AspectFill" HeightRequest="120" WidthRequest="120" /> <Label Grid.Column="1" Text="{Binding Details}" FontAttributes="Italic" /> </Grid> </toolkit:Expander>
Bhuwan 821 Reputation points

2023-08-04T08:36:29.74+00:00

Is it possible to create custom renderer for ContentTemplate because i want this and i am using same in xamarin now i am migrating project in MAUI. or can you give me any other alternate which is working same like this.

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,106 Microsoft External Staff

Hello,

After migration, Xamarin Expander should also migrate to the Expander control in the MAUI CommunityToolkit.

Please refer to the following documentations:

Best Regards,

Alec Liu.

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.

Bhuwan 821 Reputation points

2023-07-31T05:47:48.73+00:00

Hi @Yonglun Liu (Shanghai Wicresoft Co,.Ltd.)

but Expander ContentTemplate and header Tapped event missing in MAUI.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,106 Reputation points Microsoft External Staff

2023-07-31T07:57:12.54+00:00

If you need these two features, it is more recommended that you refer to Introducing .NET MAUI Compatibility for the Xamarin Community Toolkit to use Xamarin Community Toolkit in Maui.

Answer 2

Bhuwan 821

@Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) this is the alternate for this and it's working as expected - https://github.com/ewerspej/epj.Expander.Maui

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,106 Reputation points Microsoft External Staff

2023-08-07T05:20:40.6666667+00:00

Thanks for your sharing.

Share via

MAUI Expander Tapped and ContentTemplate

2 answers

Your answer