epj.Expander.Maui 1.0.3

dotnet add package epj.Expander.Maui --version 1.0.3                
NuGet\Install-Package epj.Expander.Maui -Version 1.0.3                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="epj.Expander.Maui" Version="1.0.3" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add epj.Expander.Maui --version 1.0.3                
#r "nuget: epj.Expander.Maui, 1.0.3"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install epj.Expander.Maui as a Cake Addin
#addin nuget:?package=epj.Expander.Maui&version=1.0.3

// Install epj.Expander.Maui as a Cake Tool
#tool nuget:?package=epj.Expander.Maui&version=1.0.3                

epj.Expander.Maui

License Nuget

A simple Expander control for .NET MAUI

Summary

This is a simple Expander control for .NET MAUI which can be used standalone as well as like accordion. The header and body are fully customizable and the expanding and collapsing of the body can be animated.

Note: Animations are experimental at the moment and require an explicit opt-in.

<div style="display: flex;"> <img src="https://github.com/ewerspej/epj.Expander.Maui/blob/main/assets/sample_00.PNG" width="360" /> <img src="https://github.com/ewerspej/epj.Expander.Maui/blob/main/assets/1_HybridAccordion.gif" width="800" /> </div>

Platforms

Platform Supported
Android Yes
iOS Yes
Windows Yes
MacCatalyst Untested

Usage

Registration (not required at this moment)

Registration of the control strictly isn't required, because it only uses standard controls natively supported by .NET MAUI at the moment. However, a registration method is provided in case that some future version requires to do so:

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .UseExpander() // optional: add this
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        });

    return builder.Build();
}

XAML

<maui:Expander
  Command="{Binding Source={RelativeSource AncestorType={x:Type expanderSample:MainViewModel}}, Path=PrintCommand}"
  CommandParameter="{Binding Name}"
  HeaderTapped="Expander_OnHeaderTapped">

  
  <maui:Expander.HeaderContent>
    <Grid
      HeightRequest="80"
      BackgroundColor="Orange">
      <Label
        Text="{Binding Name}"
        VerticalOptions="Center"
        HorizontalOptions="Center" />
    </Grid>
  </maui:Expander.HeaderContent>

  
  <Grid
    HeightRequest="200"
    BackgroundColor="SkyBlue">
    <Label
      Text="{Binding Name}"
      VerticalOptions="Center"
      HorizontalOptions="Center" />
  </Grid>
</maui:Expander>

Properties

Most of these properties are bindable for MVVM goodness. Please let me know if something is missing or not working as expected.

Type Property Description Default Value
View HeaderContent Use to set the header content, can be any type of View or Layout null
View BodyContent Use to set the body content, can be any type of View or Layout null
ICommand Command The command to be invoked when the header is tapped null
object CommandParameter The optional command parameter null
bool IsExpanded Use to get or set whether the Expander is expanded. false
bool Animated Use to enable animations - requires opt-in, see below under Animation false
Easing ExpandEasing Use to set the type of Easing for the expand animation CubicIn
Easing CollapseEasing Use to set the type of Easing for the collapse animation CubicOut
uint ExpandDuration Use to set the duration of the expand animation in milliseconds 250
uint CollapseDuration Use to set the duration of the collapse animation in milliseconds 250

Events

The control exposes two events:

  • HeaderTapped: Fires when the header is tapped by the user
  • IsExpandedChanged: Fires whenever the IsExpanded property has changed

Animations

Animations are currently experimental, the implementation is not well tested and may be subject to change in the future. Generally, animations come with a performance penalty and when used extensively, they may slow down the application.

Therefore, animations at this time require an explicit opt-in. Anywhere in your code, but ideally in MauiProgram.cs, add the following line of code:

Expander.EnableAnimations();

After that, setting the Animate property to True will take effect:

<maui:Expander
  Animate="True"
  CollapseDuration="100"
  ExpandDuration="200"
  CollapseEasing="{x:Static Easing.SpringOut}"
  ExpandEasing="{x:Static Easing.SpringIn}">
  <maui:Expander.HeaderContent>
    
  </maui:Expander.HeaderContent>
  
</maui:Expander>

Examples

If you are looking for a more extensive example for the potential usage of the control, e.g. if you are looking for a demo of the accordion-style functionality, have a look at the code in this repository. The sample app provides some examples and starting points.

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-android34.0 is compatible.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-ios17.2 is compatible.  net8.0-maccatalyst was computed.  net8.0-maccatalyst17.2 is compatible.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net8.0-windows10.0.19041 is compatible. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • net8.0

    • No dependencies.
  • net8.0-android34.0

    • No dependencies.
  • net8.0-ios17.2

    • No dependencies.
  • net8.0-maccatalyst17.2

    • No dependencies.
  • net8.0-windows10.0.19041

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on epj.Expander.Maui:

Repository Stars
ewerspej/maui-samples
Sample repository for various .NET MAUI, C# and MVVM features covered in blog
Version Downloads Last updated
1.0.3 542 7/29/2024
1.0.2 5,552 8/7/2023
1.0.1 178 8/7/2023 1.0.1 is deprecated.
1.0.0 176 8/4/2023
1.0.0-alpha3 148 8/3/2023
1.0.0-alpha2 131 7/31/2023
1.0.0-alpha 126 7/19/2023