Expander

samples/CommunityToolkit.Maui.Sample/AppShell.xaml.cs

@@ -101,6 +101,7 @@ public partial class AppShell : Shell
 		CreateViewModelMapping<AvatarViewShapesPage, AvatarViewShapesViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<AvatarViewSizesPage, AvatarViewSizesViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<DrawingViewPage, DrawingViewViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
+		CreateViewModelMapping<ExpanderPage, ExpanderViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<MultiplePopupPage, MultiplePopupViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<PopupAnchorPage, PopupAnchorViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<PopupPositionPage, PopupPositionViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),

samples/CommunityToolkit.Maui.Sample/CommunityToolkit.Maui.Sample.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFrameworks>net6.0-ios;net6.0-android;net6.0-maccatalyst</TargetFrameworks>
@@ -60,8 +60,15 @@
     <ProjectReference Include="..\..\src\CommunityToolkit.Maui.Analyzers.CodeFixes\CommunityToolkit.Maui.Analyzers.CodeFixes.csproj" OutputItemType="Analyzer" ReferenceOutputAssembly="false" />
   </ItemGroup>
 
-  <PropertyGroup Condition="$(TargetFramework.Contains('-android'))">
+  <PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)'))=='android'">
     <RuntimeIdentifiers>android-arm;android-arm64;android-x86;android-x64</RuntimeIdentifiers>
   </PropertyGroup>
 
+  <PropertyGroup Condition="$([MSBuild]::IsOSPlatform('windows'))=='false' and $([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)'))=='maccatalyst' and $(Configuration) == 'Debug'">
+    <RuntimeIdentifiers>maccatalyst-arm64;maccatalyst-x64</RuntimeIdentifiers>
+  </PropertyGroup>
+
+  <PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Debug|net6.0-ios|AnyCPU'">
+    <CreatePackage>false</CreatePackage>
+  </PropertyGroup>
 </Project>

samples/CommunityToolkit.Maui.Sample/MauiProgram.cs

@@ -137,7 +137,7 @@ static void RegisterViewsAndViewModels(in IServiceCollection services)
 		// Add Extensions Pages + ViewModels
 		services.AddTransientWithShellRoute<ColorAnimationExtensionsPage, ColorAnimationExtensionsViewModel>();
 
-		// Add ImageSources pages + ViewModels
+		// Add ImageSources Pages + ViewModels
 		services.AddTransientWithShellRoute<GravatarImageSourcePage, GravatarImageSourceViewModel>();
 
 		// Add Layouts Pages + ViewModels
@@ -146,6 +146,7 @@ static void RegisterViewsAndViewModels(in IServiceCollection services)
 
 		// Add Views Pages + ViewModels
 		services.AddTransientWithShellRoute<DrawingViewPage, DrawingViewViewModel>();
+		services.AddTransientWithShellRoute<ExpanderPage, ExpanderViewModel>();
 		services.AddTransientWithShellRoute<MultiplePopupPage, MultiplePopupViewModel>();
 		services.AddTransientWithShellRoute<PopupAnchorPage, PopupAnchorViewModel>();
 		services.AddTransientWithShellRoute<PopupPositionPage, PopupPositionViewModel>();

samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml

@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="utf-8"?>
+<pages:BasePage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
+                x:Class="CommunityToolkit.Maui.Sample.Pages.Views.ExpanderPage"
+                xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
+                xmlns:viewModels="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Views"
+                x:TypeArguments="viewModels:ExpanderViewModel"
+                x:DataType="viewModels:ExpanderViewModel"
+                Title="Expander">
+
+    <ScrollView>
+        <VerticalStackLayout Spacing="10">
+            <Button Text="Navigate to C# Sample" Clicked="GoToCSharpSampleClicked"/>
+
+            <Label Text="Simple expander" FontSize="24" FontAttributes="Bold"/>
+
+            <mct:Expander>
+                <mct:Expander.Header>
+                    <Label Text="Simple Expander (Tap Me)" FontSize="16" FontAttributes="Bold"/>
+                </mct:Expander.Header>
+
+                <mct:Expander.Content BackgroundColor="LightGray">
+                    <VerticalStackLayout>
+                        <Label Text="Item 1"/>
+                        <Label Text="Item 2"/>
+                    </VerticalStackLayout>
+                </mct:Expander.Content>
+            </mct:Expander>
+
+            <Label Text="Multi-level expander" FontSize="24" FontAttributes="Bold"/>
+
+            <mct:Expander Direction="Up">
+                <mct:Expander.Header>
+                    <Label Text="Multi-Level Expander (Tap Me)" FontSize="16" FontAttributes="Bold"/>
+                </mct:Expander.Header>
+                <mct:Expander.Content BackgroundColor="LightGray">
+                    <mct:Expander Direction="Down" BackgroundColor="LightGray">
+                        <mct:Expander.Header>
+                            <Label Text="Nested Expander (Tap Me)" FontSize="14" FontAttributes="Bold"/>
+                        </mct:Expander.Header>
+                        <mct:Expander.Content>
+                            <Label Text="Item 1" />
+                        </mct:Expander.Content>
+                    </mct:Expander>
+                </mct:Expander.Content>
+            </mct:Expander>
+
+            <Label Text="Expander in ListView" FontSize="24" FontAttributes="Bold"/>
+
+            <ListView ItemsSource="{Binding ContentCreators}"
+                      HasUnevenRows="True">
+                <ListView.ItemTemplate>
+                    <DataTemplate>
+                        <ViewCell>
+                            <mct:Expander x:DataType="viewModels:ContentCreator"
+                                          ExpandedChanged="Expander_ExpandedChanged">
+                                <mct:Expander.Header>
+                                    <Label Text="{Binding Name}"/>
+                                </mct:Expander.Header>
+                                <mct:Expander.Content>
+                                    <VerticalStackLayout>
+                                        <Label Text="{Binding Resource}"/>
+                                        <Image Source="{Binding Image}"
+                                               WidthRequest="100"
+                                               HeightRequest="100"/>
+                                    </VerticalStackLayout>
+                                </mct:Expander.Content>
+                            </mct:Expander>
+                        </ViewCell>
+                    </DataTemplate>
+                </ListView.ItemTemplate>
+            </ListView>
+
+            <Label Text="Expander in CollectionView" FontSize="24" FontAttributes="Bold"/>
+
+            <CollectionView ItemsSource="{Binding ContentCreators}">
+                <CollectionView.ItemTemplate>
+                    <DataTemplate>
+                        <mct:Expander x:DataType="viewModels:ContentCreator"
+                                      ExpandedChanged="Expander_ExpandedChanged">
+                            <mct:Expander.Header>
+                                <Label Text="{Binding Name}"/>
+                            </mct:Expander.Header>
+                            <mct:Expander.Content>
+                                <VerticalStackLayout>
+                                    <Label Text="{Binding Resource}" HorizontalOptions="Center"/>
+                                    <Image Source="{Binding Image}"
+                                               WidthRequest="100"
+                                               HeightRequest="100"/>
+                                </VerticalStackLayout>
+                            </mct:Expander.Content>
+                        </mct:Expander>
+                    </DataTemplate>
+                </CollectionView.ItemTemplate>
+            </CollectionView>
+        </VerticalStackLayout>
+    </ScrollView>
+</pages:BasePage>

samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml.cs

@@ -0,0 +1,23 @@
+using CommunityToolkit.Maui.Alerts;
+using CommunityToolkit.Maui.Sample.ViewModels.Views;
+
+namespace CommunityToolkit.Maui.Sample.Pages.Views;
+
+public partial class ExpanderPage : BasePage<ExpanderViewModel>
+{
+	public ExpanderPage(ExpanderViewModel viewModel) : base(viewModel)
+	{
+		InitializeComponent();
+	}
+
+	async void Expander_ExpandedChanged(object sender, Core.ExpandedChangedEventArgs e)
+	{
+		var collapsedText = e.IsExpanded ? "expanded" : "collapsed";
+		await Toast.Make($"Expander is {collapsedText}").Show(CancellationToken.None);
+	}
+
+	async void GoToCSharpSampleClicked(object sender, EventArgs e)
+	{
+		await Navigation.PushAsync(new ExpanderPageCS());
+	}
+}

samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPageCS.cs

@@ -0,0 +1,50 @@
+using CommunityToolkit.Maui.Core;
+using CommunityToolkit.Maui.Views;
+using CommunityToolkit.Maui.Markup;
+
+namespace CommunityToolkit.Maui.Sample.Pages.Views;
+
+public class ExpanderPageCS : ContentPage
+{
+	public ExpanderPageCS()
+	{
+		Content = new VerticalStackLayout()
+		{
+			Spacing = 12,
+
+			Children =
+			{
+				new Label()
+					.Text("Expander C# Sample")
+					.Font(bold: true, size: 24)
+					.CenterHorizontal(),
+
+				new Picker() { ItemsSource = Enum.GetValues<ExpandDirection>(), Title = "Direction" }
+					.CenterHorizontal().TextCenter()
+					.Assign(out Picker picker),
+
+				new Expander
+				{
+					Header = new Label()
+								.Text("Expander (Tap Me)")
+								.Font(bold: true, size: 18),
+
+					Content = new VerticalStackLayout()
+					{
+						new Image()
+							.Source("https://avatars.githubusercontent.com/u/9011267?v=4")
+							.Size(120)
+							.Aspect(Aspect.AspectFit),
+
+						new Label()
+							.Text(".NET Multi-platform App UI (.NET MAUI) is a cross-platform framework for creating mobile and desktop apps with C# and XAML. Using .NET MAUI, you can develop apps that can run on Android, iOS, iPadOS, macOS, and Windows from a single shared codebase.")
+							.Font(italic: true)
+
+					}.Padding(10)
+
+				}.CenterHorizontal()
+				 .Bind(Expander.DirectionProperty, nameof(Picker.SelectedIndex), source: picker, convert: (int selectedIndex) => Enum.IsDefined(typeof(ExpandDirection), selectedIndex) ? (ExpandDirection)selectedIndex : default)
+			 }
+		};
+	}
+}

samples/CommunityToolkit.Maui.Sample/ViewModels/Views/ExpanderViewModel.cs

@@ -0,0 +1,21 @@
+using System.Collections.ObjectModel;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace CommunityToolkit.Maui.Sample.ViewModels.Views;
+
+public partial class ExpanderViewModel : BaseViewModel
+{
+	public ObservableCollection<ContentCreator> ContentCreators { get; } = new();
+
+	public ExpanderViewModel()
+	{
+		ContentCreators.Add(new ContentCreator("Brandon Minnick", "https://codetraveler.io/", "https://avatars.githubusercontent.com/u/13558917"));
+		ContentCreators.Add(new ContentCreator("Gerald Versluis", "https://blog.verslu.is/", "https://avatars.githubusercontent.com/u/939291"));
+		ContentCreators.Add(new ContentCreator("Kym Phillpotts", "https://kymphillpotts.com", "https://avatars.githubusercontent.com/u/1327346"));
+		ContentCreators.Add(new ContentCreator("Pedro Jesus", "https://github.com/pictos", "https://avatars.githubusercontent.com/u/20712372"));
+		ContentCreators.Add(new ContentCreator("Shaun Lawrence", "https://github.com/bijington", "https://avatars.githubusercontent.com/u/17139988"));
+		ContentCreators.Add(new ContentCreator("Vladislav Antonyuk", "https://vladislavantonyuk.azurewebsites.net", "https://avatars.githubusercontent.com/u/33021114"));
+	}
+}
+
+public record ContentCreator(string Name, string Resource, string Image);

samples/CommunityToolkit.Maui.Sample/ViewModels/Views/ViewsGalleryViewModel.cs

@@ -1,4 +1,4 @@
-using CommunityToolkit.Maui.Sample.Models;
+using CommunityToolkit.Maui.Sample.Models;
 using CommunityToolkit.Maui.Sample.ViewModels.Views.AvatarView;
 
 namespace CommunityToolkit.Maui.Sample.ViewModels.Views;
@@ -20,9 +20,10 @@ public ViewsGalleryViewModel()
 			SectionModel.Create<AvatarViewShapesViewModel>("AvatarView Shapes Page", Colors.Red, "A page demonstrating AvatarViews with various shape options."),
 			SectionModel.Create<AvatarViewSizesViewModel>("AvatarView Sizes Page", Colors.Red, "A page demonstrating AvatarViews with various size options."),
 			SectionModel.Create<DrawingViewViewModel>("DrawingView", Colors.Red, "DrawingView provides a canvas for users to \"paint\" on the screen. The drawing can also be captured and displayed as an Image."),
+			SectionModel.Create<ExpanderViewModel>("Expander Page", Colors.Red, "Expander allows collapse and expand content."),
 			SectionModel.Create<MultiplePopupViewModel>("Mutiple Popups Page", Colors.Red, "A page demonstrating multiple different Popups"),
 			SectionModel.Create<PopupPositionViewModel>("Custom Positioning Popup", Colors.Red, "Displays a basic popup anywhere on the screen using VerticalOptions and HorizontalOptions"),
-			SectionModel.Create<PopupAnchorViewModel>("Anchor Popup", Colors.Red, "Popups can be anchored to other view's on the screen"),
+			SectionModel.Create<PopupAnchorViewModel>("Anchor Popup", Colors.Red, "Popups can be anchored to other view's on the screen")
 		})
 	{
 	}

src/CommunityToolkit.Maui.Core/Interfaces/IExpander.shared.cs

@@ -0,0 +1,27 @@
+namespace CommunityToolkit.Maui.Core;
+
+/// <summary>
+/// Allows collapse and expand content.
+/// </summary>
+public interface IExpander : IContentView
+{
+	/// <summary>
+	/// Expander header.
+	/// </summary>
+	public IView? Header { get; }
+
+	/// <summary>
+	/// Gets or sets expand direction.
+	/// </summary>
+	public ExpandDirection Direction { get; }
+
+	/// <summary>
+	/// Gets or sets Expander collapsible state.
+	/// </summary>
+	public bool IsExpanded { get; set; }
+
+	/// <summary>
+	/// Action when <see cref="IsExpanded"/> changes
+	/// </summary>
+	void ExpandedChanged(bool isExpanded);
+}

src/CommunityToolkit.Maui.Core/Primitives/AlertViewVisualOptions.macios.cs

@@ -1,4 +1,4 @@
-namespace CommunityToolkit.Maui.Core.Primitives;
+namespace CommunityToolkit.Maui.Core;
 
 /// <summary>
 /// Visual Options for <see cref="CommunityToolkit.Maui.Core.Views.AlertView"/>

src/CommunityToolkit.Maui.Core/Primitives/ExpandDirection.shared.cs

@@ -0,0 +1,17 @@
+namespace CommunityToolkit.Maui.Core;
+
+/// <summary>
+/// Expander expand direction.
+/// </summary>
+public enum ExpandDirection
+{
+	/// <summary>
+	/// Expander expands down
+	/// </summary>
+	Down,
+
+	/// <summary>
+	/// Expander expands up
+	/// </summary>
+	Up
+}

src/CommunityToolkit.Maui.Core/Primitives/ExpandedChangedEventArgs.shared.cs

@@ -0,0 +1,20 @@
+namespace CommunityToolkit.Maui.Core;
+
+/// <summary>
+/// Contains Expander IsExpanded state.
+/// </summary>
+public class ExpandedChangedEventArgs : EventArgs
+{
+	/// <summary>
+	/// Initialize a new instance of <see cref="ExpandedChangedEventArgs"/>
+	/// </summary>
+	public ExpandedChangedEventArgs(bool isExpanded)
+	{
+		IsExpanded = isExpanded;
+	}
+
+	/// <summary>
+	/// True if Is Expanded.
+	/// </summary>
+	public bool IsExpanded { get; }
+}

src/CommunityToolkit.Maui.Core/Views/Alert/AlertView.macios.cs

@@ -1,6 +1,6 @@
 using System.Diagnostics.CodeAnalysis;
+using CommunityToolkit.Maui.Core;
 using CommunityToolkit.Maui.Core.Extensions;
-using CommunityToolkit.Maui.Core.Primitives;
 
 namespace CommunityToolkit.Maui.Core.Views;
 

src/CommunityToolkit.Maui.UnitTests/Views/Expander/ExpandedChangedEventArgsTests.cs

@@ -0,0 +1,19 @@
+using System.Collections.ObjectModel;
+using CommunityToolkit.Maui.Core;
+using CommunityToolkit.Maui.Core.Views;
+using FluentAssertions;
+using Xunit;
+
+namespace CommunityToolkit.Maui.UnitTests.Views.Expander;
+
+public class ExpandedChangedEventArgsTests : BaseHandlerTest
+{
+	[Theory]
+	[InlineData(true)]
+	[InlineData(false)]
+	public void IsExpandedShouldBeEqualInExpandedChangedEventArgs(bool isExpanded)
+	{
+		var eventArgs = new ExpandedChangedEventArgs(isExpanded);
+		eventArgs.IsExpanded.Should().Be(isExpanded);
+	}
+}