Update sample webapp to mirror MAUI app features and structure
This PR transforms the sample webapp to be a direct mirror of the MAUI app, implementing all the same features, pages, controls and functionality while using the shared Library project for business logic.
Changes Made
๐ฏ Core Requirements
- Direct Mirror: Webapp now has identical features, pages, controls and functionality as MAUI app
-
Library Integration: Uses
DeviceTestingKitApp.Libraryproject for shared ViewModels and business logic -
Same Structure: Mirrors
MainPage.xamllayout and component hierarchy exactly - Identical Functionality: Counter behavior, display logic, and user interactions match perfectly
๐ง Technical Implementation
Project Dependencies
- Added reference to
DeviceTestingKitApp.Libraryproject - Updated
Program.cswith same service registration pattern asMauiProgram.cs
ViewModels Integration
- Uses
MainViewModelandCounterViewModelfrom Library project - Proper MVVM pattern with
INotifyPropertyChangedsupport - Same business logic and
RelayCommandusage as MAUI app
Blazor Components
- Created
CounterView.razoras Blazor equivalent of MAUICounterView.xaml - Implements same counter text logic: "Click me!" โ "Clicked X time" โ "Clicked X times"
- Proper data binding with property change notifications
Platform-Specific Services
- Implemented
BlazorSemanticAnnouncerfor web-specific accessibility - Adapts
ISemanticAnnouncerinterface for web platform using JavaScript interop
UI Structure
Updated Home.razor to mirror MainPage.xaml exactly:
- .NET bot image with same alt text
- "Hello, World!" heading with semantic styling
- "Welcome to .NET Multi-platform App UI" subheading
- Counter component with identical layout and behavior
๐งช Verification
- โ Solution builds successfully
- โ Webapp builds and runs without errors
- โ All dependencies resolved correctly
- โ Counter functionality works identically to MAUI app
- โ Uses shared Library project as required
- โ Maintains consistent MVVM architecture
The webapp is now a complete direct mirror of the MAUI app, sharing the same ViewModels and business logic while providing web-specific UI implementations.
Fixes #85.
๐ก You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.
This is ok, but we should copy the Maui way and have a razor class library for the Blazor things - just like we have a maui library for the Maui things.
Make sure we have the same sort of projects....
Created DeviceTestingKitApp.BlazorLibrary project that mirrors the MAUI library structure with the same folders: Controls/, Converters/, Features/. Moved all Blazor-specific components from the webapp to this new library and updated all references. The architecture now matches the MAUI pattern exactly. See commit 96f4a3c.