MauiSlidePuzzle

A sample game of sliding puzzles.

Record_MauiSlidePuzzleDemoClip_AdobeExpress.mp4

Files editted

Details

• MauiSlidePuzzle/
  • Controllers/
    • SlidePuzzleController.cs
  • CustomViews/
    • BlankPanelView.cs
    • ClipImagePanel.cs
    • ImagePanelView.cs
    • PanelFrameDrawable.cs
    • SlidePanelView.cs
    • SlidePuzzleView.cs
  • Models/
    • SlidePanel.cs
    • SlidePuzzle.cs
    • StageInfo.cs
  • Resources/
    • Fonts/
      • FontLicenseNotice
    • Images/
      • Puzzles/
    • Raw/
      • Puzzles/
  • MainPage.xaml
  • MainPage.xaml.cs
  • MauiProgram.cs
  • MauiSlidePuzzle.csproj
  • PuzzleResourceHelper.cs
• uml/
  • MauiSlidePuzzle.puml

UML

Class diagram (partial)

Visual states of MainPage

Visual states of CompletedMessage

Visual states of CurrentStageImage

What I learnt from this project

• How to use EmbeddedResources
• How to use SkiaSharp and SKCanvasView
• What the MVC (Model-View-Controller) pattern is
• How to add fonts and use image fonts
• How to write MIT license credits
• How to use non-default constructors in xaml
• How to use VisualState
• How to pass Json data to the constructor (Json constructor)

Include and access EmbeddedResources

In the .csproj file, add EmbeddedRecource tags like

<ItemGroup>
...
    <EmbeddedResource Include="Resources\Images\Puzzles\*" />
...
    <EmbeddedResource Include="Resources\Raw\Puzzles\*" />
...
</ItemGroup>

Then, in a code, you can access the contents of a specified embedded resource via a resource ID (ex. MauiSlidePuzzle.Resources.Images.Puzzles.myshapes.png).

Use SkiaSharp and SKCanvasView

To use the view controls from SkiaSharp library, you should tell the maui app to use SkiaSharp in MauiProgram.cs:

var builder = MauiApp.CreateBuilder();
builder
    .UseSkiaSharp(true)
    .UseMauiApp<App>()
    ...

Without this statement, you will encounter the error with the unhundled exception such as,

Microsoft.Maui.Platform.HandlerNotFoundException: 'Handler not found for view SkiaSharp.Views.Maui.Controls.SKCanvasView.'

Add Fonts

New fonts need to be added during the builder process:

builder
    ...
    .ConfigureFonts(fonts =>
    {
    ...
    fonts.AddFont("ionicons.ttf", "Ionicons");
    });

Then, the name (ex. Ionicons) is available as the value of FontFamily attribute.