Initial commit

.github/workflows/build-validation.yml

@@ -0,0 +1,61 @@
+name: build
+
+on:
+  push:
+    branches: [ main ]
+    paths:
+    - '**.cs'
+    - '**.csproj'
+    - '**.xaml'
+    - '**.razor'
+  pull_request:
+    branches: [ main ]
+    paths:
+    - '**.cs'
+    - '**.csproj'
+    - '**.xaml'
+    - '**.razor'
+
+env:
+  DOTNET_VERSION: '8.0.x' # The .NET SDK version to use
+
+jobs:
+  build:
+
+    name: Build All Projects
+    runs-on: windows-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        project:
+        - Finish
+        - Part 1 - Displaying Data
+        - Part 2 - Add Monkey Dialog
+        - Part 3 - Navigation
+        - Part 4 - Platform Features
+        - Part 5 - Theming the app
+        - Part 6 - Advanced Topics
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Setup .NET
+      uses: actions/setup-dotnet@v4
+      with:
+        dotnet-version: ${{ env.DOTNET_VERSION }}
+
+    - name: Setup MSBuild.exe
+      uses: microsoft/setup-msbuild@v2
+      with:
+        vs-prerelease: true
+
+    - name: Install .NET workloads
+      shell: pwsh
+      run: |
+        dotnet workload install android
+        dotnet workload install ios
+        dotnet workload install maccatalyst
+        dotnet workload install maui
+      
+    - name: Build ${{ matrix.project }}
+      run: dotnet build "${{ matrix.project }}/MonkeyFinderHybrid/MonkeyFinderHybrid.csproj"

.gitignore

@@ -396,3 +396,4 @@ FodyWeavers.xsd
 
 # JetBrains Rider
 *.sln.iml
+.DS_Store

Community Modules/README.md

@@ -0,0 +1,19 @@
+# Community Workshop Modules
+
+Here you will find additional modules that build upon the completed workshop application that highlight different features and capabilities from the community. This may include how to implement new architecture, use a different testing framework, or integrate a third party control from the community or a control vendor. Each module is built to showcase a unique capability with Blazor Hybrid, .NET MAUI and the .NET ecosystem and can be completed standalone or when you finish the main workshop. These modules are maintained by the original author of the community module. If you run into any problems with a community module, please open a new issue with the on the GitHub repository mentioning the module in question.
+
+## Available Modules
+
+Coming soon!
+
+## Contributing Modules
+
+So, you have an awesome library, component, or architecture pattern that you want to showcase in this workshop? Then you are in the right place because you can contribute your very own community module right here! Before you do though, be sure to follow these instructions:
+
+1. Open a new issue with your idea for the community module. This issue should outline what the module will be about, if their are any account creation requirements, and what the main steps of the module will be.
+2. Once approved, work on your module and adhear to the same pattern as the main workshop giving developers are starting point and walking them through adding the functionality.
+3. Ensure a slide deck is included with your module.
+4. Create a PR with your module in the "Community Modules" folder.
+5. Work with the workshop maintainers to get your PR approved and just like that your module will be live!
+
+By creating a community module you are signing up to keep your module up to date with the latest versions of Blazor Hybrid, .NET MAUI, other 3rd party packages, and any other changes that may need to be adjusted over time. Failure to update a module or respond to feedback/issues on GitHub will result in your module being archived. If this all sounds good to you and you are ready to get rolling then open up that issue with your community module.

Finish/MonkeyFinderHybrid.sln

@@ -0,0 +1,26 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.5.002.0
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MonkeyFinderHybrid", "MonkeyFinderHybrid\MonkeyFinderHybrid.csproj", "{0D09B878-27F8-473C-8F48-B0B82CF2E6CD}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{0D09B878-27F8-473C-8F48-B0B82CF2E6CD}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{0D09B878-27F8-473C-8F48-B0B82CF2E6CD}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{0D09B878-27F8-473C-8F48-B0B82CF2E6CD}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{0D09B878-27F8-473C-8F48-B0B82CF2E6CD}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{0D09B878-27F8-473C-8F48-B0B82CF2E6CD}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {25132CDC-EDF8-4441-83A1-A6267274B021}
+	EndGlobalSection
+EndGlobal

Finish/MonkeyFinderHybrid/App.xaml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:MonkeyFinderHybrid"
+             x:Class="MonkeyFinderHybrid.App">
+        <Application.Resources>
+
+        </Application.Resources>
+</Application>

Finish/MonkeyFinderHybrid/App.xaml.cs

@@ -0,0 +1,18 @@
+namespace MonkeyFinderHybrid;
+
+public partial class App : Application
+{
+	public App()
+	{
+		InitializeComponent();
+	}
+
+	protected override Window CreateWindow(IActivationState? activationState)
+	{
+		return new Window(new NavigationPage(new MainPage())
+		{
+			BarBackgroundColor = Color.FromArgb("#ffc107"),
+			BarTextColor = Colors.White
+		});
+	}
+}

Finish/MonkeyFinderHybrid/Components/Controls/MyButton.razor

@@ -0,0 +1,10 @@
+<button class="button-yellow" @onclick="Callback">@Caption</button>
+
+@code {
+    [Parameter]
+    [EditorRequired]
+    public string Caption { get; set; } = string.Empty;
+
+    [Parameter]
+    public EventCallback Callback { get; set; }
+}

Finish/MonkeyFinderHybrid/Components/Controls/SimpleCustomizedDialog.razor

@@ -0,0 +1,43 @@
+@implements IDialogContentComponent<Monkey>
+
+@* Header *@
+<FluentDialogHeader ShowDismiss="true">
+    <FluentStack VerticalAlignment="VerticalAlignment.Center">
+        <FluentLabel Typo="Typography.PaneHeader">
+            @Dialog.Instance.Parameters.Title
+        </FluentLabel>
+    </FluentStack>
+</FluentDialogHeader>
+
+@* Body *@
+<FluentDialogBody>
+    <FluentTextField @bind-Value="@Content.Name">Name:</FluentTextField>
+    <FluentTextField @bind-Value="@Content.Details">Description:</FluentTextField>
+    <FluentTextField @bind-Value="@Content.Location">Location:</FluentTextField>
+    <FluentTextField @bind-Value="@Content.Image">Image:</FluentTextField>
+    <FluentNumberField @bind-Value="@Content.Population">Population:</FluentNumberField>
+</FluentDialogBody>
+
+@* Footer *@
+<FluentDialogFooter>
+    <FluentButton Appearance="Appearance.Accent" OnClick="@SaveAsync">Save</FluentButton>
+    <FluentButton Appearance="Appearance.Neutral" OnClick="@CancelAsync">Cancel</FluentButton>
+</FluentDialogFooter>
+
+@code {
+    [Parameter]
+    public Monkey Content { get; set; } = default!;
+
+    [CascadingParameter]
+    public FluentDialog Dialog { get; set; } = default!;
+
+    private async Task SaveAsync()
+    {
+        await Dialog.CloseAsync(Content);
+    }
+
+    private async Task CancelAsync()
+    {
+        await Dialog.CancelAsync();
+    }
+}

Finish/MonkeyFinderHybrid/Components/Layout/MainLayout.razor

@@ -0,0 +1,16 @@
+@inherits LayoutComponentBase
+
+<div class="page">
+
+    <div class="sidebar">
+        <NavMenu />
+    </div>
+
+    <main>
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+
+    <FluentDialogProvider />
+</div>

Finish/MonkeyFinderHybrid/Components/Layout/MainLayout.razor.css

@@ -0,0 +1,81 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(255, 193, 7) 0%, #ffc107 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.top-row ::deep a,
+.top-row ::deep .btn-link {
+    white-space: nowrap;
+    margin-left: 1.5rem;
+    text-decoration: none;
+}
+
+.top-row ::deep a:hover,
+.top-row ::deep .btn-link:hover {
+    text-decoration: underline;
+}
+
+.top-row ::deep a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a,
+    .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row,
+    article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}

Finish/MonkeyFinderHybrid/Components/Layout/NavMenu.razor

@@ -0,0 +1,23 @@
+<div class="navbar navbar-light" style="background-color: #ffc107;">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="">MonkeyFinderHybrid</a>
+    </div>
+</div>
+
+<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
+
+<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+    <nav class="flex-column">
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Monkeys
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="options">
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Options
+            </NavLink>
+        </div>
+
+    </nav>
+</div>