So, here’s a quick overview of my setup:

• Running on Windows with VSCode
• Using a devcontainer setup under WSL to make sure Claude can’t go rogue on my PC
• I created the initial Uno Platform application using “dotnet new unoapp -preset recommended” to create my application using the latest Uno Platform guidance (Material, MVUX, Navigation etc)
• I’m using Claude Code
• I’ve added both Uno Platform MCP servers
• Validated that both Uno Platform MCPs are connected and have tools loaded

IMPORTANT: In order to get a good outcome it’s very important that the Uno Platform App MCP is connected and is reporting tools (there should be 11 at the time of writing). If the tools don’t load after 30 seconds (default timeout), it’s likely to be a result of one or two reasons:

• Not Authenticated with Uno Platform account. If you’re in a container/WSL you can launch the Studio app by running (substitute {version} with the version that you have. If none, run dotnet restore on your Uno Platform app):
  dotnet ~/.nuget/packages/uno.settings.devserver/{version}/tools/manager/Uno.Settings.dll
• Not able to resolve Solution or Project that references Uno Platform. Change to the directory that has the Solution (.sln) file before running Claude.

Whilst I’m using Claude in this example, the above setup, including the instructions for validating MCPs, applies to other AI agent CLIs (eg Codex).

Application Specification

Before I got started building the application I launched an interactive session with Claude and in Plan mode proceeded to describe the set of features for my application. I started with a brief description of the app:

“Help me determine the specifications for a financial tracking and planning application”

Through structured Q&A, , the following was established:

• Audience: Personal/household use
• Platforms: Web (WASM), Desktop (Win/Mac/Linux), Mobile (iOS/Android)
• Tech stack: Uno Platform (.NET/C#), SQLite, MVUX, Uno Material, LiveCharts2
• Data entry: Manual only (no bank sync/import)
• Storage: Local only (no cloud)
• Auth: Local account — username + BCrypt password + recovery phrase + optional PIN

8 features were defined (F1–F8):

All 8 features were broken down into 42 issues on GitHub with full acceptance criteria and linked to their parent epics.

Basic Ralph

Sometimes when I hear Ralph discussed it ends up being overly complex, for example requiring the use of plugins. This is one of those topics that you can make as complex as you want. For me, it’s just a basic execution loop that works through a predefined list of tasks until completed.

With this in mind, the first thing to do was to create an ordered list of my GitHub issues for my Ralph loop to work through. Again, I used Claude for this with the following prompt:

Retrieve all open github issues. Sort them in the order that they should be completed (ignore epics) and write them to a file openissues.md

This created an openissues.md file with issues listed as follows:

Now onto the Ralph loop itself. This is just a bash script (Credit to Dan Vega in his video The Ralph Loop Explained: Automate AI Coding Tasks in Java where I borrowed the structure of this script from).

#!/bin/bash

SLEEP_BETWEEN=10
LOG_DIR="logs"

mkdir -p "$LOG_DIR"

for ((i=1; i<=$1; i++)); do
  echo ""
  echo "****************************************"
  echo "Iteration $i of $1"
  echo "****************************************"

  outfile="$LOG_DIR/iteration_${i}.log"

  claude --dangerously-skip-permissions -p "@openissues.md @progress.txt \
0. Make sure uno and unoapp MCP are connected and that unoapp MCP has 11 tools available. After 30s if the unoapp MCP tools are not available, do not update GitHub issue and exit immediately. \
1. Read progress.txt to see what has been completed. \
2. Get the next issue from openissues.md. \
3. If there are no issues, output <promise>COMPLETE</promise> and exit. \
4. Complete the issue as required. \
5. If the issue requires code changes, make the necessary changes and commit them to GitHub. \
6. Ensure there are adequates tests for the changes you made. \
7. If the issue requires documentation changes, update the relevant documentation. \
8. Run the application and verify that the issue is resolved. Capture screenshots or logs as evidence of the fix. \
9. Update the GitHub issue with a comment describing how you resolved the issue, including any screenshots or logs. Close the GitHub issue as done. \
10. Append your progress to progress.txt with what you completed. \
11. If ALL tasks in openissues.md are complete, output <promise>COMPLETE</promise>. \
ONLY WORK ON ONE TASK PER ITERATION." > "$outfile" 2>&1 || {
    echo "Warning: Iteration $i failed (exit code $?). See $outfile for details. Continuing..."
    continue
  }

  cat "$outfile"

  if grep -q '<promise>COMPLETE</promise>' "$outfile"; then
    echo ""
    echo "openissues.md complete after $i iterations!"
    exit 0
  fi

  if (( i < $1 )); then
    sleep "$SLEEP_BETWEEN"
  fi
done

echo ""
echo "Reached $1 iterations. openissues.md may not be complete."

To execute you can just call

bash ralph.sh 100

This will run the loop 100 times, which in my case was enough to complete all 42, non-epic, GitHub issues.

And now you wait….. and wait…. and once you’ve verified that the first iteration doesn’t blow up and something is happening (you should see files being created and logs written)…. you can leave Ralph to it and come back in a few hours. I actually just went to bed and checked on the progress when I work up.

Ralph is Not a Designer

Actually, this should be Claude isn’t a designer, or at least is no substitute for a good UX designer. After working all night my Ralph loop and Claude had concocted what I’m sure is a fully functional app that meets my specifications. In fact, the over 1200 tests it created hopefully verifies that at least the functionality works. However, as the following screenshot of the MainPage will attest to, there was no thought towards building a usable interface.

There’s no doubt that Claude, Codex etc are all super powerful tools but if you don’t provide them with enough input, you’re at their mercy. In this case I’d come up with a detailed specification but hadn’t spent time working out what the UX should be. I ended up with a basic, input based, UX where there were CRUD style interfaces for each of the elements of the data model.

Summary

There are two clear takeaways from this. Firstly, building apps, even cross platform apps, has been dramatically condensed – we’re talking weeks, perhaps even months, of development down to a mere few hours. Secondly, that more time spent coming up with specifications, application flow, designs, will significantly improve the quality of the outcome.

From here I clearly need to spend more time with Claude coming up with a better UX for the application. In the past, this would have required reworking the application to adapt it to the new UX. However, since it only took a few hours to build the first version, and I don’t need to worry or care about users having to upgrade to a new version, why not completely rebuild the application from scratch!!! I’ll leave you with this thought – whether it’s better to adapt or rebuild, now that development cost isn’t what it used to be.

The post Ralph built a Cross-Platform app using Uno Platform whilst I slept. appeared first on Nick's .NET Travels.

I build Windows apps. I run Windows as my primary dev machine. It’s been home.

But recently? That’s been challenged — not by another OS, but by AI.

Developer workflow is changing fast. Agents, containers, automation — they’re reshaping how we build software. So let’s rewind a little, talk about why Windows, and then look at what’s shifting under our feet.

Why Windows?

There are really two answers.

1️⃣ The Tools — Visual Studio

For years, Visual Studio was untouchable.

While others were sprinkling Console.WriteLine or scanning logs, Windows developers had:

• Step-through debugging
• Deep variable inspection (even the gnarly ones)
• Conditional breakpoints
• Edit-and-Continue (Hot Reload)
• Integrated build, test, and profiling

It wasn’t just an editor — it was a command center.

And honestly? It still is when I need serious debugging power.

2️⃣ The Stack — XAML and Beyond

The second reason: the Windows UI stack.

Since the early days of WPF and Silverlight, I’ve loved XAML. Declarative UI. Clean separation. Powerful binding.

As the platform evolved — WPF → Win8 → UWP → WinUI — XAML stayed central.

Now with the Uno Platform, that same XAML lets me target:

• Windows (WinUI & Desktop)
• macOS
• Linux
• Android
• iOS
• Web (WASM)

One UI definition. Everywhere.

Pair that with MVVM and you get a clean, structured architecture. Add MVUX from Uno and you get a reactive, modern state management model.

It’s simple. Powerful. Productive.

So What Changed?

For the first time in my career…

I’m not building for WinUI first.

That used to be my workflow:

1. Build and debug on WinUI
2. Then test on other Uno targets

But when Uno recommended the Skia backend, things shifted.

Now I default to the Desktop target (Windows, macOS, Linux). Why?

• Faster build and launch
• Clearer XAML errors
• Better day-to-day debugging flow

Ironically, building for Windows became less about WinUI itself.

And that shift matters — because an even bigger shift was coming.

Enter AI Agents + App MCP

This is where things really changed.

With AI agents — whether it’s Claude, Copilot, or Codex — and the Uno Platform App MCP:

An agent can:

• Build the app
• Run it
• Take screenshots
• Verify changes
• Repeat across Desktop, Web, and Mobile

I can now assign an entire issue to an agent.

It will:

1. Plan the solution
2. Implement it
3. Run the app
4. Validate the outcome

Across multiple platforms.

That’s not autocomplete.

That’s delegation.

Containers, YOLO Mode, and Dev Isolation

The next evolution?

Running agents in YOLO mode inside a dev container.

I’m using:

• A Linux container
• Running on WSL
• Connected via VS Code

The dev container stays locked down:

• Limited GitHub access
• Controlled environment
• Isolation from the host

I can still launch desktop and web targets for debugging — but the agent operates in a contained sandbox.

It’s structured chaos.

Where That Leaves Me

So here I am.

Still using Windows.
Still building for Windows.
But not the way I used to.

Visual Studio is now my “serious debugging” tool.

Day-to-day development?
Often handled by an AI agent — inside a container — through whatever console I happen to be using.

That’s a massive shift.

The Bigger Picture

AI isn’t just speeding up development.

It’s redefining the workflow.

Agents. Sub-agents. Teams of agents.
Parallelizing feature work.
Burning down backlogs.
Testing across platforms automatically.

The tooling and models are evolving monthly.

Six months from now? The workflow may look completely different again.

One thing is clear:

Being a developer today isn’t just about writing code.

It’s about orchestrating intelligence.

The post I used to be a Windows Developer….. and I still am (sort of) appeared first on Nick's .NET Travels.

Today you can pick any one of the leading AI models and ask it to create you a cross-platform application using the Uno Platform. This will have varying levels of success depending on whether the model is able to find the dotnet new templates (see uno.templates) and whether it’s able to disambiguate the Uno Platform documentation from the other XAML related documentation (WPF, WinUI, Maui etc).

The secrete to being successful in the use of AI to build Uno Platform applications is through the use of the two MCPs that are packages with the IDE extensions. To get started, make sure you install the appropriate extension for your IDE (see Getting Started).

As I mentioned the MCPs are packaged with the IDE extensions, which means they’re only enabled once the extension is loaded. The extensions are loaded when an Uno Platform app is detected, which means you first need to create an Uno Platform application. If you’re already familiar with this you can jump the next section that goes through the flow of creating an Uno Platform application (in VS Code in this instance)

Creating an Uno Platform Application+

Start by going to https://new.platform.uno and enter an application name.

Select the various options you want to include in your application – in this case I’m just going to go with a Basic app to keep things simple since I want AI to create a simple one page application.

Once you’re done selecting the options, click the Create button and copy the dotnet new command.

Drop the copied dotnet new command into a terminal window and let dotnet new create the application from the Uno Platform templates.

Once the command has finished executing, open the newly created folder in VS Code.

VS Code will automatically run uno-check, which you can see as the icon in the middle of the status bar. Clicking the icon will show the Uno Platform Status page. In this case my installation is reporting an error as I haven’t finished off setting up the Android SDK. What’s critical is that the solution has been correctly loaded and that Dev Server is ready (required for Hot Reload and Hot Design to work).

Now, from the status bar, pick the target platform you want to run on (I’ve selected desktop) and then you can run with or without the debugger. Note that Hot Design is only supported in VS Code when running without the debugger.

Clicking the Hot Design button (left icon in the floating toolbar) for the first time, it indicates I need to sign in with an Uno Platform account, via the Uno Platform Studio app.

From here I can click the Register (first time users) or Sign In buttons.

After being redirected to the Uno Platform website to register and/or sign in, returning to the running app you should see that both icons have updated. Here we can see that Hot Reload is connected and ready to go. The Hot Design icon is not green because I’m currently using an account that is in the initial (free) trial period.

Clicking the Hot Design button enters design mode – the app is still running but is placed in the center of the window surrounded by the Hot Design tooling. If you’ve seen Hot Design in the past, you may not have seen the new Agent mode, which allows you to create an entire page using AI from a prompt within Hot Design. Experiment with different prompts and then pick the best outcome.

Ok, now that we have a basic Uno Platform application, let’s open up the Chat window in VS Code. If you click on the Configure Tool button (to the right of the AI model selector at the bottom of the Chat window) you can see that the two Uno MCP servers are enabled. This will upskill the AI agent with access to the Uno Platform documentation, as well as the ability to launch and interact with the application.

Let’s enter the following prompt: “Create an interest calculator app that is acble to calculate fixed or variable interest for a loan over a specified period. Fixed interest has a single interest rate that’s applied for the full duration of the loan. Variable interest has a starting rate and then can be adjusted any number of times throughout the loan.” When you click the Send button, you’ll see the agent kick in and start building out the application.

The first iteration of the app, based on numerous calls to the Uno MCP servers is already very functional. During the creation I left the application running and it was periodically updated to reflect the changes being made.

Whilst this application is functional, it’s not particularly pleasing to look at. Let’s get the agent to improve this somewhat with the prompt: “Improve the appearance of the application by making it more modern and add a more pleasing theme”.

What’s interesting here is that you can see that the agent is launching and then taking a screenshot of the application, in order to verify the visual changes being made.

The outcome is a much nicer looking application

The agent was even able to nicely format the list of interest payments.

In this post we walked through using AI to create a cross platform Uno Platform application using a combination of the MCP servers that are provided as part of the Uno Platform IDE extensions.

The post Use AI to Build Cross Platform Applications with Uno Platform, VS Code, Agents and MCPs appeared first on Nick's .NET Travels.

In discussing the development process I don’t want to get into the debate over the relative merits of different processes, such as Waterfall, Agile, Scrum, etc. Instead, I’m going to focus our attention on the relatively low-level workflow that a developer might follow when going about their work. Let’s assume that this starts with being assigned, or self-assigning, an issue to work on. The developer would go about doing the necessary investigation, planning, design, coding, tests etc required in order to complete the work. Once they’re done, there’s probably some sort of review process from a peer, or manager, before the work is either merged (if it needs to be combined into an existing code base), or published (if it’s a standalone tool/app/site). This might seem overly simplistic but let’s examine how this looks when we introduce AI.

Again, for the purpose of this discussion, let’s keep our attention on the developer workflow. Of course, AI can be incorporated into many other aspects of the product development lifecycle but for now, let’s look at in the context of the workflow we’ve just described. To start with, let’s start at the point the developer picks up the issue to work on. Normally it would be up to the developer to start investigating the issue in order to work out either the cause of the bug, or what needs to be done to implement a feature. With AI, depending on which tool you’re using, this initial step can either be skipped, or altered.

Some tools, like GitHub and Codex, support the full delegation of an issue, allowing the agent to investigate, plan and complete the implementation. The output is either a branch or a pull request, which can then be reviewed by the human-in-the-loop. This might result in further direction to the agent to continue development. Alternatively, the developer might pick up the work and either complete it, or adjust the work, in order to provide more direction to how the agent should complete the work. This is not too dissimilar to the role of a senior developer delegating work to a more junior developer.

Alternatively, the developer might want to be more involved. Rather than simply assigning the issue to the agent they can pick up the issue themselves. However, again, instead of going at it alone, the developer can interact with AI using chat to ask, plan and even code some of the work, much like when developers pair program.

In either of these two augmented workflows the developer is leveraging AI to both increase their productivity as well as their effectiveness. The developer is moving away from being a day-coder, into more of an orchestrator role.

In this post we’ve briefly examined one area where AI is making a difference in the development process. What’s becoming clear is that whilst there’s currently no clear guidlines for developers to follow when using AI, developers need to become familiar with the evolving world of AI agents and tools. Understanding when to delegate steps in the process to AI will become a key skill required to be a successful developer in the world of AI engineering.

The post Development Process with AI appeared first on Nick's .NET Travels.

Before we get started, I will note that MCP on Windows is a prerelease feature and that I’m accessing it as part of the Windows Insiders program, on the dev channel.

To find out more about MCP on Windows and the Windows ODR you can start with the Microsoft Learn documentation for MCP on Windows. If you’re not familiar with MCP, I would suggest reading the documentation and then playing around with some MCPs in your AI tooling of choice (Copilot, Cursor, Codex etc).

Enabling Experimental Agentic Features

The Windows ODR comes with a convenient command line tool, odr.exe, which you can invoke from any command prompt. However, what you’ll find is that you will get an unintelligible error, Fatal: No symbol result found with name "app-agents".

Of course, what the documentation fails to point out is that this error actually indicates you haven’t enabled the experimental AI features on Windows. If you go to Settings > System > AI components, you’ll see a new Experimental agentic features option, that is set to Off by default.

When you attempt to toggle this option to On, you’ll get prompted to confirm that you’re enabling experimental agentic features.

Enabling experimental features is something you should only do on computers dedicated for testing out preview Windows features.

Registering an MCP with ODR

Now that we have enabled the experimental agentic features, we can take a look at the odr.exe command line tool. If you open a command prompt and simply type odr, you’ll see some basic help information, including a list of the commands.

Currently there’s only one command supported, which is “mcp”. To get the options, you can execute odr with parameters mcp and -h.

As the documentation section MCP agent connectors on Windows covers, Microsoft has already started to create Windows specific MCPs. Executing odr with parameters mcp list will return the list of currently registered MCPs. This includes the Windows File Explorer MCP.

From the help listing for the mcp parameter, there is an add option which can be combined with either a manifest file, or the uri of a remote server. Using this option we can register the Uno Platform remote MCP.

Unfortunately, the information returned after adding the mcp, nor if we now run the list command, doesn’t include the server id of the MCP server. This makes it hard to remove the MCP registration. Luckily you can discover the id of the server by attempting to register the same server again.

In this case the server id is uno-docs-mcp-1.2.3 and this id can be used to remove the MCP registration.

One thing to note is that when you have registered an MCP, it now appears within Settings under the connectors available for a specific agent. From the System > AI components screen in Setttings, click on the Agents link.

This will list the known agents, in this case just the Terminal I have open.

Clicking the Terminal item provides more information about the agent and the MCPs that are available.

We can see here both the File Explorer and the uno-docs-mcp connectors.

We’ve covered some of the basics of getting started with MCP on Windows and the on-device agent registry (ODR). In subsequent posts will look at how we can access these registered MCPs and also how your Windows application can include, and register, an MCP server.

The post Getting Started with MCP on Windows appeared first on Nick's .NET Travels.

I want to start by saying that, as with most tools, technologies, processes etc, there’s going to be times when Vibe Coding is the right tool for the job (I use the term “tool” here loosely here as it may not be a specific tool, perhaps instead a process, or lack thereof). Furthermore, you shouldn’t read into this post any judgement on whether Vibe Coding is a good or bad practice. At the end of the day, whether Vibe Coding is right or wrong, should be determined based on the achieved outcome in terms of time, cost and quality of the output.

Let’s back up a little and look at what we mean by Vibe Coding. For a quick summary we can track Vibe Coding from being an Internet meme through to being a more widely recognized practice in software development:

Internet meme → Indie dev/streamer slang → AI-assisted era → Recognized as a legit creative practice.

I have to say that I truly appreciate the honesty of the Merriam-Webster definition of vibe coding:

In Practice

One of the hip trends online is the slew of low or no-code online app builders such as Lovable, TemoLabs and co.dev. Most of these start with a singular prompt, encouraging you to give a one or two sentence description of the app that you want to build. The builder then goes off and builds a very rudimentary application that looks very run-of-the-mill.

The experience of then interacting with the builder site in order to coerce it to give you the application you want can be both rewarding and somewhat infuriating. The ability to create a fully-fledged application from a mere sentence or two is simply astounding, if you compare to where we were even 2 years ago in the world or low-code/no-code solutions. It can be really rewarding to have an idea, generate a simple, yet working, prototype and be able to validate the idea in minutes, rather than days, weeks or months.

On the flipside, sometimes the model can really struggle with what might seem like almost basic issues. This could be a simple compile error that for whatever reason the model can’t rectify without some intervention. As the models and site integration of the models improves this will get better but inevitably there will be compile errors, logic errors and complexity that is beyond the scope that can be resolve via a simple prompt-based interaction.

There’s also the cost aspect of these builder sites – they significantly reduce the cost of creating applications but at the expense of building something that has a strong architecture and is able to mature and grow with the requirements of the application. Furthermore, once you get beyond the included tokens, you need to start paying for tokens in order to keep feeding the AI algorithm. The more complexity in the app, the more likely the model will yield build errors, which in turn mean more tokens consumed to fix the errors the model created (yeh, there’s no “you broke it, so fix it for free” when it comes to AI).

If we consider the app builder sites as the completely hands-off approach, where you’re simply interacting via a prompt with minimal interaction with code, the other trend is to interact with AI models using IDE or console tools, like Cursor, Windsurf, GitHub Copilot (VS Code and/or Visual Studio), Codex, Warp etc. Most of these tools allow you to control which AI model you want to use and the type of interaction you want to have with the model. For example, this illustration is from the Chat pane inside VS Code, allowing you to configure the mode (Agent) and model (Claude Sonnet 4).

What you select for the mode really determines the level of actual coding you want to be doing. If you’re deep in the trenches writing a lot of code, the Ask mode is great for suggesting ways to code a method, analysing existing code, providing hints and information on how to use an API etc. Of course, if you want the model to be more involved, you can switch to Edit mode, in which case the model will start to apply changes, and potentially changes across a number of files. Lastly, if you want to be really hands-off you can set the mode to Agent. Agent mode is great for where you want to hand off a coding task and simply be involved in the reviewing phase. In the recent release of Codex, this has gone one step further, making it easy to dispatch whole coding tasks into the cloud to be done in an asynchronous manner, freeing you up to continue with other tasks.

Cost Cutting

The opening premise of this post was to consider vibe coding in the context of building better, and cheaper, software. In the preceding section we looked at two of the approaches to vibe coding, app builders and AI enabled tooling, and I would argue that there’s a mix of pros and cons with both approaches.

If we look at the app builders there is definitely a cost saving when it comes to the ability to generate quick, working, prototypes in order to validate ideas. It’s questionable as to whether these can easily be used as the basis for quality production-ready application without substantial investment in developers to review, refactor and stabilize the codebase.

On the flipside, AI enabled tooling can offer a mixed bag of success. This is a much larger topic that’s really still in its infancy regarding the optimum way to interact with AI models but enough to say that even if you were to occasionally use the AI models in Ask mode, you’d still derive some benefit from the speed and knowledge that the AI model brings when it offers up solutions.

In Summary

I think it’s too early for companies to be making significant reductions in their development teams. Rather they should be investing in internal knowledge/research into the ways that AI can assist the existing development team to be more productive. Teams that can adopt AI tools and leverage agent mode will surely be able to deliver more features, quicker, and with more stability.

The post Is Vibe Coding Just a Cost Cutting Strategy, like Outsourcing/Offshore Development? appeared first on Nick's .NET Travels.

Similar to how we implemented Click to Do using URI protocol activation, there are three steps in setting up the Uno Platform application (well, in fact, any Windows App Sdk based application) to integrate with Click to Do using the IActionProvider interface:

1. Include action registration JSON file as Content in your application.
2. Register for the com.microsoft.windows.ai.actions extension in the packageappx.manifest, as well as defining a windows.comServer extension.
3. Implement the IActionProvider interface, including starting and registering the COM Server.

We’ll start with another newly created Uno Platform application, BusinessSearchActionProviderApp, using the Blank preset and making sure we add Windows App SDK in the Platforms section of the wizard.

Actions Registration

Like we did previously, add a new file into the Assets folder. We’ll call it actions.json but you can call it what you want, just make sure you use the same name later in the packagappx.manifest. In this file, include the registration for your actions, for example.

{
  "version": 1,
  "actions": [
    {
      "id": "BusinessSearchActionProvider.Actions.NameSearch",
      "description": "Name search with action provider",
      "inputs": [
        {
          "name": "Message",
          "kind": "Text"
        }
      ],
      "outputs": [],
      "instantiationDescription": "Business Name Search Action Provider: '${Message.ShortText}'",
      "invocation": {
        "type": "COM",
        "clsid": "4531D13F-5953-432E-8841-53A58EA26DFE"
      }
    }
  ]
}

The details for the JSON schema can found in the documentation but in brief, this JSON snippet registers a single action, BusinessSearchActionProvider.UriActions.NameSearch, that accepts a single input, Message, that is Text. The application will be invoked via COM – make sure you select a new GUID for your action provider (In Visual Studio, you can use the Create GUID item from the Tools menu).

Package Manifest

As we did in the previous post, we need to register the com.microsoft.windows.ai.actions extension, specifying the name of the JSON file that includes the actions to register.

The following packageappx.manifest has been modified to include additional namespacess uap3, com, com2 and com3, and an Extensions block that registers the actions extension, specifying the Actions.json file. It also registers a windows.comServer extensions, which will act as the entry point for the application when invoked from Click to Do. It’s important that the GUID specified in this extension matches the GUID specified in the Actions.json file.

<?xml version="1.0" encoding="utf-8"?>
<Package
  xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
  xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
  xmlns:uap3="http://schemas.microsoft.com/appx/manifest/uap/windows10/3"
  xmlns:com="http://schemas.microsoft.com/appx/manifest/com/windows10"
  xmlns:com2="http://schemas.microsoft.com/appx/manifest/com/windows10/2"
  xmlns:com3="http://schemas.microsoft.com/appx/manifest/com/windows10/3"
  xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
  IgnorableNamespaces="uap rescap">

    <Identity />
    <Properties />

    <Dependencies>
        <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
        <TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
    </Dependencies>

    <Resources>
        <Resource Language="x-generate"/>
    </Resources>

    <Applications>
        <Application Id="App"
          Executable="$targetnametoken$.exe"
          EntryPoint="$targetentrypoint$">
            <uap:VisualElements />
            <Extensions>
                <uap3:Extension Category="windows.appExtension">
                    <uap3:AppExtension
                    Name="com.microsoft.windows.ai.actions"
                    Id="BusinessSearchActionsCOMServer"
                    DisplayName="Actions for Business Search COM Server"
                    PublicFolder="Assets">
                        <uap3:Properties>
                            <Registration>Actions.json</Registration>
                        </uap3:Properties>
                    </uap3:AppExtension>
                </uap3:Extension>
                <com2:Extension Category="windows.comServer">
                    <com2:ComServer>
                        <com3:ExeServer Executable="BusinessSearchActionProviderApp.exe" DisplayName="Business Search App COM Server">
                            <com:Class Id="4531D13F-5953-432E-8841-53A58EA26DFE" DisplayName="Business Search App COM Server" />
                        </com3:ExeServer>
                    </com2:ComServer>
                </com2:Extension>
            </Extensions>
        </Application>
    </Applications>

    <Capabilities>
        <rescap:Capability Name="runFullTrust" />
    </Capabilities>
</Package>

Application and Startup Logic

In order to register the COM server, we first need to disable the startup logic that the WinAppSdk tooling generates. Add the following property to the csproj

<DefineConstants>DISABLE_XAML_GENERATED_MAIN</DefineConstants> 

With the property set, you’re now responsible for the startup logic for the application. Let’s create Program.cs in the Platforms\Windows folder and add the following code.

using Shmuelie.WinRTServer;
using System;
using System.Threading.Tasks;
using Shmuelie.WinRTServer.CsWinRT;
using System.Diagnostics;


namespace BusinessSearchActionProviderApp;

public static class Program
{
    [STAThread]
    static async Task Main(string[] args)
    {
        WinRT.ComWrappersSupport.InitializeComWrappers();

        await using (ComServer server = new())
        {
            var sampleActionProvider = new BusinessSearchActionProvider();
            server.RegisterClass<BusinessSearchActionProvider, Windows.AI.Actions.Provider.IActionProvider>(() => sampleActionProvider);
            server.Start();

            Application.Start((p) =>
            {
                var context = new Microsoft.UI.Dispatching.DispatcherQueueSynchronizationContext(Microsoft.UI.Dispatching.DispatcherQueue.GetForCurrentThread());
                SynchronizationContext.SetSynchronizationContext(context);
                new App();
            });

            // Regular disposing of the ComServer is broken (https://github.com/shmuelie/Shmuelie.WinRTServer/issues/28).
            // We instead call the UnsafeDispose method to dispose it.
            server.UnsafeDispose();
        }
    }
}

In order for this to compile you’ll need to add some package references (which includes the ComServer implementation that simplifies registering a COM Server) and the BusinessSearchActionProvider (which implements the IActionProvider interface). Here are the package references you’ll need

    <ItemGroup Condition="'$(TargetFramework)'=='net9.0-windows10.0.26100'">
        <PackageReference Include="Microsoft.Windows.CsWin32">
            <PrivateAssets>all</PrivateAssets>
            <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
        </PackageReference>
        <PackageReference Include="Microsoft.Windows.CsWinRT" />
        <PackageReference Include="Shmuelie.WinRTServer" />
    </ItemGroup>

And then the IActionProvider implementation. Make sure the Guid attribute value matches the Guid used in the Actions.json and the packageappx.manifest.

using System.Runtime.InteropServices;
using Windows.AI.Actions;
using Windows.Foundation;
using WinRT;

namespace BusinessSearchActionProviderApp;

// Class is declared partial to allow cswinrt insert generated code to enable marshalling without using reflection
[Guid("4531D13F-5953-432E-8841-53A58EA26DFE")]
public partial class BusinessSearchActionProvider : Windows.AI.Actions.Provider.IActionProvider
{
    public IAsyncAction InvokeAsync(ActionInvocationContext context)
    {
        return InvokeAsyncHelper(context).AsAsyncAction();
    }

    private static async Task InvokeAsyncHelper(ActionInvocationContext context)
    {
        string result = "UnknownResult";

        if (context.ActionId.StartsWith("BusinessSearchActionProvider.Actions.NameSearch", StringComparison.Ordinal))
        {
            bool found = false;
            NamedActionEntity[] inputs = context.GetInputEntities();
            foreach (NamedActionEntity namedEntity in inputs)
            {
                if ((namedEntity.Name.Equals("Message") || namedEntity.Name.Equals("Contact")) && namedEntity.Entity.Kind == ActionEntityKind.Text)
                {
                    found = true;

                    TextActionEntity textEntity = CastToType<ActionEntity, TextActionEntity>(namedEntity.Entity);
                    string message = textEntity.Text;

                    await EnsureAppIsInitialized();

                    var completion = new TaskCompletionSource<string>();
                    App.MainWindow.DispatcherQueue.TryEnqueue(async () =>
                    {
                        var messageResult = await ((App.MainWindow!.Content as Frame)!.Content as MainPage)!.AddMessageAsync(message);
                        completion.SetResult(messageResult);
                    });
                    result = await completion.Task;
                }
            }

            if (!found)
            {
                context.ExtendedError = new KeyNotFoundException();
                context.Result = ActionInvocationResult.Unsupported;
            }
        }
        else
        {
            context.ExtendedError = new NotImplementedException();
            context.Result = ActionInvocationResult.Unsupported;
        }

        ActionEntity responseEntity = context.EntityFactory.CreateTextEntity(result);
        context.SetOutputEntity("MessageCount", responseEntity);
    }

    private static async Task EnsureAppIsInitialized()
    {
        if (App.loaded.Task.IsCompleted)
        {
            return;
        }

        await App.loaded.Task;
    }

    public static TTo CastToType<TFrom, TTo>(TFrom obj)
    {
        IntPtr abiPtr = default;
        try
        {
            abiPtr = MarshalInspectable<TFrom>.FromManaged(obj);
            return MarshalInspectable<TTo>.FromAbi(abiPtr);
        }
        finally
        {
            MarshalInspectable<object>.DisposeAbi(abiPtr);
        }
    }
}

As you can see from this code, this relies on being able to call the AddMessageAsync on the MainPage (the current Window Content). Here’s the codebehind for MainPage:

using System.Collections.ObjectModel;

namespace BusinessSearchActionProviderApp;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private ObservableCollection<string> Messages { get; } = new ObservableCollection<string>();


    public async Task<string> AddMessageAsync(string message)
    {
        TaskCompletionSource<string> tcs = new();
        DispatcherQueue.TryEnqueue(() =>
        {
            Messages.Add(message);
            tcs.SetResult("Message received");
        });

        return await tcs.Task;
    }
}

And that’s it for the major components required to create and register an IActionProvider implementation to be invoked by Click to Do.

Note: As at the time of writing Click to Do seems to be broken in the latest dev insider preview. With each iteration of Windows there appears to be improvements across the board, so one can only hope that Click to Do will continue to evolve and improve.

The post Windows AI – Click to Do with an Uno Platform Application as an IActionProvider appeared first on Nick's .NET Travels.

The first thing you’re going to need is the Microsoft Update Catalog. If you follow this link, you’ll end up at the catalog with “Visual Studio 2022” already entered as the search term.

Scan the list of updates and find the version you want to install. For example, let’s install 17.14.8. Click the Download button

And then click the link in order to download an executable eg visualstudioupdate-17.0.0to17.14.8-online_1f22e142e483a2bdf9de7e67271627023972d13a.exe.

Ok, the next step can be a little tricky. When you run the executable, it’s going to extract the compressed contents to the Temp folder (eg C:\Users\[Username]\AppData\Local\Temp). However, once the executable has finished executing, it will clean up this folder, so you only have a few seconds to copy the extracted folder so that you can use it in the next step. For me I’ve copied the folder to C:\temp\1facaca3398aca1c021efd11ff6df750.

In order to install the version of Visual Studio 2022 you going to execute the vs_setup.exe in the extracted folder. However, the trick is that you need to tell it the location of the ChannelManifest.json file, which is alongside the vs_setup.exe in the extracted folder. Whilst it would have been super convenient if it would automatically search that folder by default, the only way I could get it to work was to setup a network share and specify that when executing vs_setup.exe.

To setup a folder as a network share, right click on the folder in Windows Explorer and open Properties. Click on the Sharing tab, and click the Share button. For simplicity (not secure!!!) I just added Everyone to the access list, and then clicked Share.

Once you’ve clicked Share, you can then right click on the shared folder and select Copy Link.

This should give you a link in the format 1facaca3398aca1c021efd11ff6df750 (file://NICKINSIDERPC/1facaca3398aca1c021efd11ff6df750). You’ll need to adjust this to include the full path to the ChannelManifest.json file eg \NICKINSIDERPC\1facaca3398aca1c021efd11ff6df750\VisualStudioUpdate-17.0.0To17.14.8-Online\ChannelManifest.json.

Now we’re in a good place to run vs-setup.exe using the following command.

vs_setup.exe install --channelURI \NICKINSIDERPC\1facaca3398aca1c021efd11ff6df750\VisualStudioUpdate-17.0.0To17.14.8-Online\ChannelManifest.json --channelId VisualStudio.17.Release --productId Microsoft.VisualStudio.Product.Professional

This should launch the Visual Studio installer directly into the screen where you can pick the workloads you want to install.

And there, that’s it, you’ve successfully installed a previous version of Visual Studio 2022.

The post Installing Older Versions of Visual Studio 2022 appeared first on Nick's .NET Travels.

Getting Started

To switch your Uno Platform application across to using the CherylUI theme, there’s three things you need to do:

1. Add a reference to the CherylUI.Uno nuget package
2. Add the Cheryl.Uno style dictionary to your App.xaml (ie <ResourceDictionary Source="ms-appx:///Cheryl.Uno/Styles/Index.xaml" />)
3. Add the InteractiveContainer to the root of your Page.

Hot Design Enabled

Now that you’ve got the setup done, you can start to build out the UI of your application. Here’s a short video where I replace the default content of the application with the InteractiveContainer and then proceed to add an instance of the MobileDatePicker. This is all done using Hot Design, rather than having to manually write the XAML.

The great thing about the CherylUI nuget package is that it not only adjusts the theme of the built in controls, it also offers a number of great controls, such as the MobileDatePicker, that you can use as you build your application. You can even check out the GitHub repository in order to see the Styles and Templates that are being used.

The post CherylUI theme for your Uno Platform Applications appeared first on Nick's .NET Travels.

Before we jump into our Uno Platform application, let’s take a quick look at Click to Do. Firstly, this Windows feature is still in preview – this is very evident as I kept having to restart it whilst working with it (you can do this by launching the “Click to Do (preview)” application from the Start menu). You also currently need to be a) on a Copilot+ PC and b) on the latest dev preview of Windows (at time of writing).

You can launch Click to Do by holding the Start key and either pressing Q on the keyboard, or clicking with the mouse. The latter I found easiest, particularly if you’re interested in a particular image or text on the screen. As you can see in the following image, when you trigger Click to Do, Windows attempts to highlight text on the screen (including embedded in images) and then provides you a context menu of actions you can perform with the selection.

To get started integrating your application with Click to Do, you should start with the developer documentation (overview, actions registration, package manifest) and understand the different types of action entities and how you can launch your application either via URI or via COM. In this post we’re going to keep it simple and register an Uno Platform application to be launched via URI.

One thing to note is that as Click to Do is a Windows features, you’ll need to make sure you include the Windows App SDK target when creating your Uno Platform application.

There are three things you need to do in order to integrate your Uno Platform application with Click to Do:

1. Include action registration JSON file as Content in your application.
2. Register for the com.microsoft.windows.ai.actions extension in the packageappx.manifest, as well as setting a windows.protocol, the URI protocol to use to launch the application.
3. Handle the launch arguments.

Let’s go through each of these.

Actions Registration

Add a new file into the Assets folder. We’ll call it actions.json but you can call it what you want, just make sure you use the same name later in the packagappx.manifest. In this file, include the registration for your actions, for example.

{
  "version": 1,
  "actions": [
    {
      "id": "BusinessSearch.UriActions.NameSearch",
      "description": "Name search",
      "inputs": [
        {
          "name": "Message",
          "kind": "Text"
        }
      ],
      "outputs": [],
      "instantiationDescription": "Business Name Search: '${Message.ShortText}'",
      "invocation": {
        "type": "Uri",
        "uri": "business-search://NameSearch?name=${Message.Text}"
      }
    }
  ]
}

The details for the JSON schema can found in the documentation but in brief, this JSON snippet registers a single action, BusinessSearch.UriActions.NameSearch, that accepts a single input, Message, that is Text. The application will be invoked using a Uri, and will used the defined uri template, which provides the Message.Text as the name query string value.

Package Manifest

Simply including a JSON file as Content isn’t enough, you need to update the packagappx.manifest file to register the com.microsoft.windows.ai.actions extension, specifying the name of the JSON file that includes the actions to register.

The following packageappx.manifest has been modified to include an additional namespace, uap3, and an Extensions block that registers the actions extension, specifying the Actions.json file, and registers the business-search protocol, which will be used to launch the application. Note that this protocol aligns with the uri template specified earlier in the Actions.json

<?xml version="1.0" encoding="utf-8"?>
<Package
  xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
  xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
  xmlns:uap3="http://schemas.microsoft.com/appx/manifest/uap/windows10/3"
  xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
  IgnorableNamespaces="uap rescap">

    <Identity />
    <Properties />

    <Dependencies>
        <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
        <TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
    </Dependencies>

    <Resources>
        <Resource Language="x-generate"/>
    </Resources>

    <Applications>
        <Application Id="App"
          Executable="$targetnametoken$.exe"
          EntryPoint="$targetentrypoint$">
            <uap:VisualElements />
            <Extensions>
                <uap3:Extension Category="windows.appExtension">
                    <uap3:AppExtension
                    Name="com.microsoft.windows.ai.actions"
                    Id="BusinessSearchActions"
                    DisplayName="Actions for Business Search"
                    PublicFolder="Assets">
                        <uap3:Properties>
                            <Registration>Actions.json</Registration>
                        </uap3:Properties>
                    </uap3:AppExtension>
                </uap3:Extension>
                <uap:Extension Category="windows.protocol">
                    <uap:Protocol Name="business-search"/>
                </uap:Extension>
            </Extensions>
        </Application>
    </Applications>

    <Capabilities>
        <rescap:Capability Name="runFullTrust" />
    </Capabilities>
</Package>

Application Logic

In the startup logic for the application the launch arguments need to be extracted and used by the application. For the purpose of this post we’re just going to extract the query string value and pass it through to the MainPage of the application.

    protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
    {
        var message = "";

#if WINDOWS
        var activationArgs = Microsoft.Windows.AppLifecycle.AppInstance.GetCurrent().GetActivatedEventArgs();
        if (activationArgs.Kind == ExtendedActivationKind.Protocol)
        {
            var protocolArgs = activationArgs.Data as ProtocolActivatedEventArgs;
            if (protocolArgs != null)
            {
                var query = protocolArgs.Uri.Query;
                message = query.Substring("?name=".Length);
            }
        }
#endif

        MainWindow = new Window();
#if DEBUG
        MainWindow.UseStudio();
#endif


        // Do not repeat app initialization when the Window already has content,
        // just ensure that the window is active
        if (MainWindow.Content is not Frame rootFrame)
        {
            // Create a Frame to act as the navigation context and navigate to the first page
            rootFrame = new Frame();

            // Place the frame in the current Window
            MainWindow.Content = rootFrame;

            rootFrame.NavigationFailed += OnNavigationFailed;
        }

        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), message);
        }

        MainWindow.SetWindowIcon();
        // Ensure the current window is active
        MainWindow.Activate();
    }

And now all we need to do is run the application for the first time in order for the actions to be registered. After running the application, you can check to confirm the actions have been registered by pressing Start and typing App Actions – there’s a new section under Settings that will appear in the Start menu. The Apps > Actions section of Settings allows you to see all registered actions, and opt in/out of them.

With our Uno Platform application successfully registered, let’s trigger Click to Do and use it to launch the application. Here we’ve triggered Click to Do using Start + Q (Start + mouse click will work too) and have selected a block of text. At the bottom of the Click to Do context menu is our newly registered action, Business Search”

Clicking the Business Search will launch the Uno Platform application, displaying the text as it’s defined in the query string value.

Obviously, our application should do more to process and use the provided Message.Text value.

In this post we’ve connected an Uno Platform application to Click to Do so that it’s launched via URI in order to take action on a specified piece of text. This is just one way you can include AI into your Uno Platform application.

The post Windows AI – Click to Do with an Uno Platform Application appeared first on Nick's .NET Travels.

What's the best guidance for building cross platform applications?

From ChatGPT:

The best guidance for building cross-platform applications can be broken into strategic decisions, tooling choices, and development best practices. Here’s a comprehensive set of recommendations tailored for modern app development in 2025:

Strategic Decisions

1. Define “Cross-Platform” Clearly

Decide what platforms you actually need to support:

• Mobile (iOS, Android)
• Desktop (Windows, macOS, Linux)
• Web (browsers)
• Embedded or smart devices?

Also clarify performance, UX, and platform-specific functionality requirements. “Write once, run anywhere” often needs compromises.

Uno Platform enables the creation of applications that targets all of the above targets. Whether you're building for mobile, desktop, web or devices, you can build your application from a single code base with the Uno Platform.

Tooling & Framework Choices

2. Choose the Right Technology Stack

Each stack has trade-offs in performance, tooling, community, and long-term support:

.NET MAUI / Uno Platform

• Best for .NET developers
• MAUI: Good for mobile/desktop; limited web support (via Blazor)
• Uno Platform: Stronger web and Windows support, good for enterprise/WinUI compatibility

Flutter

• Excellent native performance
• Great UI consistency across platforms
• Web support improving but still behind mobile

React Native + Expo

• Strong JavaScript ecosystem
• Good native module support
• Can reuse code with React for Web

Electron / Tauri

• Electron: Easy desktop apps with web tech, heavier footprint
• Tauri: Lightweight, Rust-backed alternative, gaining traction

Progressive Web Apps (PWAs)

• Great for broad reach (especially web and mobile)
• Limited access to native APIs

Choose based on:

• Team skills (C#, Dart, JS, etc.)
• Performance and UX needs
• Platform coverage

Uno Platform provides developers with a variety of options when it comes to building their cross platform application. It supports developers working on Windows, MacOS or Linux, with extensions/plugins for Visual Studio, VS Code and Rider. The UI can be written in XAML or C#; there's support for both the traditional MVVM and MVUX, a more modern, MVU-based, approach to state management. 

Development Best Practices

3. Architect for Scalability and Portability

• Use clean architecture with clear separation of UI, logic, and services
• Apply MVUX, MVVM, or Redux patterns based on framework
• Leverage dependency injection to swap platform-specific implementations

4. Maximize Code Sharing

• Share business logic and models across all platforms
• Use abstraction layers for platform-specific services (e.g., camera, storage)
• Use shared resources for styling/themes when possible

5. Build for Native UX

• Respect platform conventions (navigation, gestures, typography)
• Use adaptive layout techniques
• Provide platform-specific polish where it matters

In addition to the core platform, Uno Platform offers a number of libraries that support the creation of well architected applications. Uno.Extensions leverages the Microsoft Extensions to provide feature such as Dependency Injection, Configuration, Logging and Navigation. As mentioned earlier, there's support for both MVVM (Recommending the Community Toolkit MVVM for a code generation based approach) and MVUX for state management. As the entire platform is .NET based, it makes it easy to leverage other community packages and to reuse logic across both the client application and any server logic. Lastly, unlike some of the web-based offerings, Uno Platform creates a native application that ensures high performance across all target platforms. 

Testing & Tooling

6. Automate Testing Across Platforms

• Use unit tests for core logic
• UI automation tools (e.g., Appium, Playwright, XCUITest)
• Use CI/CD pipelines with tools like GitHub Actions, Azure DevOps, Bitrise, etc.

7. Use Hot Reload / Live Preview

• Drastically speeds up development feedback loops
• Available in MAUI, Uno Platform, Flutter, React Native

The Uno Platform is, and will continue to be, free and open source. Recently Uno Platform Studio was released, which is a subscription based offering that's aimed at making development of Uno Platform applications even quicker and easier. The Community license includes improved Hot Reload support, whilst the Pro license includes Hot Design, a runtime designer experience that allows you to adjust the layout of your application whilst it's running. No more messing around with fake/mock data at design time; now you can see exactly how your application looks as you make changes. 

Deployment & Maintenance

8. Plan for Platform-Specific Deployments

• App Stores (Apple, Google, Microsoft)
• Web hosting (for PWA/web builds)
• Manage signing, updates, versioning per platform

9. Monitor and Analyze

• Use tools like App Center, Firebase, Sentry, or custom telemetry
• Track usage and crash analytics per platform

10. Keep Dependencies Up-to-Date

• Use LTS (Long-Term Support) versions of frameworks
• Stay on top of breaking changes across OS versions

You can publish your Uno Platform application to the appropriate platform stores. There are existing .NET libraries for various monitoring and analytic tools, which can be used with an Uno Platform application. As Microsoft announces new versions of the .NET Framework, the Uno Platform is right there with near day-on-day releases to ensure you're always able to take advantage of the latest features and improvements.

Final Thought

The best cross-platform apps don’t just run everywhere — they feel native, perform well, and are maintainable by the team that builds them.

If you tell me what languages you prefer, which platforms you’re targeting, or what kind of app you’re building (consumer, enterprise, internal tool), I can tailor this even more.

Ok, that's a wrap - I thought ChatGPT did a relatively good job of providing guidance for cross platform developers. Hopefully the additional information specific to the Uno Platform provided in this post will help you in the selection of your cross platform technology as you embark on your next application.

The post ChatGPT Guide to Building Cross Platform Applications appeared first on Nick's .NET Travels.

The first thing to be aware of after creating, or even opening an existing, Uno Platform application is any Uno Check prompts that might appear. If you see one of these prompts, take a few minutes to fix any of the identified issues, to avoid countless hours wondering why you can’t build, launch, debug or publish your application.

Once you’ve fixed any issues, you can go ahead and run the application – Both the Hot Reload and Hot Design experiences work with a running application. Check out the Hot Reload support matrix to determine whether to run with or without the debugger – Hot Reload is required for Hot Design, so make sure you pick the debugging option that enables Hot Reload.

Studio Toolbar

When you launch an Uno Platform application in debug, you’ll see the Studio Toolbar, which currently includes the Hot Design (left) and Hot Reload (right) icons.

If instead the toolbar buttons appear with a blue dot (see below image), this means that you either don’t have an Uno Platform account, or you’re not signed into your account.

Clicking on either button will show a teaching tip with more information and a button to launch the Studio app, that comes with the IDE extension/plugin.

The Studio application will appear (if it’s not visible, it may have launched behind other windows) and will give you options to register or sign in. Both options require opening the Uno Platform website and creating or signing into your account.

Once you’re signed in, the buttons in the Studio toolbar will automatically update, as too will the information in the Studio app.

Launching Hot Design

Clicking the Hot Design button will launch the designer experience.

Toolbox

In the top-left is the Toolbox, listing available controls which can be added to the application.

Controls in the Toolbox can be dragged onto either the canvas (design area in the middle) or the Elements tree

Elements

The Elements tree shows a hierarchical breakdown of the UI elements visible in the current Window.

In the Elements tree existing elements can be individually, or multi, selected.

Properties

With items selected (either from the Elements tree, or clicking on them in the canvas), the available properites for the selected selements is available in the Properties.

In addition to showing the current property values, the Properties can also be used to update property values.

Studio Toolbar

Once inside Hot Design, the Studio Toolbar transforms into a toolbar that assists with testing different form factors, different themes, toggling into interaction mode and performing undo/redo operations.

The form factor flyout allows for adjusting the design size of the application, with predefined devices sizes and the ability to enter a custom size. The flyout can also be used to adjust the zoom applied to the design canvas.

In this post we’ve touched on a few of the key tool windows that make up Hot Design. Stay tuned for more feature deep dives in the coming posts.

The post Launching and Exploring Hot Design for Uno Platform appeared first on Nick's .NET Travels.

Let’s break it down.

Uno Platform (Free & Open Source)

Uno Platform is an open-source project that lets you build single-codebase applications using C# and XAML across all major platforms:

• Desktop (Windows, Linux, MacOS)
• Mobile (iOS, Android)
• Web (WebAssembly)

Key Features

• State management options with MVUX and MVVM
• XAML Hot Reload
• C# Markup support

Uno Platform is completely free to use and is released under the Apache 2.0 license.

Uno Platform Studio (Commercial Productivity Suite)

Uno Platform Studio is a paid, proprietary set of tools built on top of the Uno Platform. It’s designed to make application development faster, more visual, and more accessible—especially for design-oriented developers or teams with mixed skill sets.

Key Features

• Hot Design: Drag-and-drop UI designer that syncs with XAML and your app’s live preview.
• Live Property Editing: Modify properties via the property grid with real-time feedback.
• Template and Style Application: Easily apply control templates and styles visually.
• Element Tree & Canvas Sync: Navigate, inspect, and modify your UI elements in real time.
• Project Scaffolding & App Templates: Kickstart your app with built-in templates and patterns.

Uno Platform Studio is a commercial offering with licensing and support options tailored for professional teams.

How They Work Together

You don’t have to choose one or the other—they’re designed to be complementary:

Feature	Uno Platform (OSS)	Uno Platform Studio (Paid)
Cross-platform runtime
XAML/C# app development
Drag-and-drop designer
Property Grid
Visual template editing
Cost	Free	Subscription-based

Which One Should You Use?

• Start with Uno Platform if you’re a developer who wants to build cross-platform apps with full control over your stack.
• Add Uno Platform Studio if you want to speed up development with visual tools, streamline styling and layout, or improve collaboration across your team.

Whether you’re prototyping or shipping production-ready apps, Uno Platform Studio builds on the power of Uno Platform to help you move faster, design better, and build smarter.

Learn More

• Explore Uno Platform on GitHub
• Try Uno Platform Studio
• Read the Documentation

The post 🆓 Uno Platform vs 💼 Uno Platform Studio: What’s the Difference? appeared first on Nick's .NET Travels.

Lack of Visual States

If we consider that validation of an input control, such as a TextBox, is basically a visual state, then the control can either being in a ValidState, or an InvalidState. As WinUI controls don’t have these as built in states, we’re going to have to create them. Luckily XAML was built to support the ad-hoc addition of visual states. Since validation is mutually exclusive to any other built in state, such as disabled or focused, the validation state should exist in their own state group.

In order to add the validation states, we’re going to clone the DefaultTextBoxStyle into our application. Note that we’ll use the BasedOn attribute so that we only need to include the Setter for the Template, rather than the other default property values. I’ve omitted unmodified parts of the original style for brevity.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <SolidColorBrush x:Key="ValidationErrorBorderBrush" Color="#FFB00020" />
    </ResourceDictionary>
    <ResourceDictionary x:Key="Light">
        <SolidColorBrush x:Key="ValidationErrorBorderBrush" Color="#FFB00020" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

<Style x:Key="ValidationTextBoxStyle"
        TargetType="TextBox"
        BasedOn="{StaticResource DefaultTextBoxStyle}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid>
                    ...
                    <VisualStateManager.VisualStateGroups>
                        ...
                        <VisualStateGroup x:Name="ValidationStates">
                            <VisualState x:Name="ValidState" />
                            <VisualState x:Name="InvalidState">
                                <VisualState.Setters>
                                    <Setter Target="ValidationBorder.Visibility" Value="Visible" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    ...
                    <Border x:Name="ValidationBorder"
                            Grid.Row="3" Grid.ColumnSpan="2"
                            Background="{ThemeResource ValidationErrorBorderBrush}"
                            Height="2" Margin="0,-2,0,0"
                            Visibility="Collapsed" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="TextBox" BasedOn="{StaticResource ValidationTextBoxStyle}" />

What you can see here is that there’s an additional border that appears under the TextBox in order to indicate validation state. The border is made visible by the InvalidState visual states.

IsValid Attached Property

Since the implementation of the TextBox doesn’t know about the ValidState or InvalidState visual states, we’re going to have to invoke the state change using the VisualStateManager.GoToState method. For this, we’re going to use an attached property (as an aside, the entire code for this attached property was created, without modification, by Copilot in agent mode with Claud Sonnet 4).

/// <summary>
/// Attached properties for validation state management
/// </summary>
public static class ValidationProperties
{
    /// <summary>
    /// IsValid attached property that manages visual states
    /// </summary>
    public static readonly DependencyProperty IsValidProperty =
        DependencyProperty.RegisterAttached(
            "IsValid",
            typeof(bool),
            typeof(ValidationProperties),
            new PropertyMetadata(true, OnIsValidChanged));

    /// <summary>
    /// Gets the IsValid property value
    /// </summary>
    /// <param name="obj">The target object</param>
    /// <returns>The IsValid value</returns>
    public static bool GetIsValid(DependencyObject obj)
    {
        return (bool)obj.GetValue(IsValidProperty);
    }

    /// <summary>
    /// Sets the IsValid property value
    /// </summary>
    /// <param name="obj">The target object</param>
    /// <param name="value">The IsValid value</param>
    public static void SetIsValid(DependencyObject obj, bool value)
    {
        obj.SetValue(IsValidProperty, value);
    }

    /// <summary>
    /// Handles the IsValid property changed event
    /// </summary>
    /// <param name="d">The dependency object</param>
    /// <param name="e">The event args</param>
    private static void OnIsValidChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is Control control)
        {
            bool isValid = (bool)e.NewValue;
            string stateName = isValid ? "ValidState" : "InvalidState";
            
            VisualStateManager.GoToState(control, stateName, true);
        }
    }
}

We can apply this to our TextBox:

xmlns:validation="using:ValidationSampleApp.AttachedProperties"

<TextBox Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
            PlaceholderText="Enter your name:"
            validation:ValidationProperties.IsValid="{Binding NameIsValid}" />

And of course, we’ll need to update our ViewModel to expose the NameIsValid property.

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(NameIsValid))]
    private string? name;

    public bool NameIsValid => Name is { Length: > 0 };

(and yes, before all you smart people out there decide to comment that this is using MVVM, despite my “Stop using MVVM” post, you’re 100% right, this is MVVM. The same mechanism will work nicely with MVUX, or any other framework you use, so long as you have a mechanism to trigger the state change between ValidState and InvalidState).

Ok, so now let’s see this in action.

As you can see, this is an incredibly simple way to add validation to your application. It requires modifying the control template for each control where you want to add validation. However, once you’ve done it once, you can set it to be the default style (which is what we did in the last line of the earlier XAML) and it will be available everywhere, even if you don’t need validation on a particular instance of the control.

The post How to do Validation in Windows and Uno Platform Applications – the Easy Way appeared first on Nick's .NET Travels.

Enter MVUX—a modern, state-driven evolution of MVVM inspired by unidirectional data flow architectures like Redux. MVUX simplifies UI development by shifting the focus from object binding and manual state tracking to declarative, immutable state and reactive updates. Let’s explore why developers should consider moving from MVVM to MVUX.

A Quick Overview of MVVM

MVVM is composed of three main components:

• Model: Represents the domain data or business logic.
• View: The UI layer (XAML, HTML, etc.).
• ViewModel: The intermediary that exposes data and commands for the View.

The View binds to the ViewModel using data binding (e.g., INotifyPropertyChanged in .NET). Commands are typically exposed as ICommand implementations for interaction handling.

Benefits of MVVM:

• Clear separation of UI and logic.
• Enables testing without a UI.
• Promotes reuse and abstraction.

But for all its benefits, MVVM has its share of pain points.

Limitations of MVVM

1. Boilerplate and Verbosity

MVVM often requires a lot of boilerplate: implementing INotifyPropertyChanged, managing backing fields, writing RelayCommands or DelegateCommands, etc.

csharpCopyEditprivate string _name;
public string Name
{
    get => _name;
    set
    {
        _name = value;
        OnPropertyChanged();
    }
}

This is repeated across most ViewModels, inflating code and reducing developer productivity.

2. State Synchronization is Hard

In MVVM, state is often distributed across multiple properties and can become difficult to track, especially in complex UIs. There’s no single source of truth for UI state.

3. Command Explosion

Every user interaction typically requires a dedicated command. This leads to an explosion of ICommand implementations or lambdas, often with overlapping responsibilities.

4. Implicit Flow and Debugging Difficulty

MVVM relies on implicit bindings between View and ViewModel. When things go wrong, debugging a broken binding or a misfired command can be a frustrating experience.

Introducing MVUX: A Better Way

MVUX (Model-View-Update-eXtended) is a modern take on state-driven UI development. It’s designed to reduce boilerplate, centralize state, and embrace unidirectional data flow with immutable updates—leading to simpler, more maintainable, and predictable UIs.

MVUX Core Concepts:

• State: A single immutable object representing the UI state.
• Reducers: Pure functions that return new state based on an input and the current state.
• Effects: Handle asynchronous operations like API calls or side-effects.
• View: Declaratively renders UI based on the current state.

Side-by-Side Example: Business Search

Application includes a service that exposes a SearchAsync method.

public interface IAbnLookupService
{
   ValueTask<IImmutableList<BusinessResult>> SearchAsync(string name, CancellationToken cancellationToken = default);
}

The MainPage of the application includes a TextBox where the user can enter a business name or ABN, and a ListView that displays the search results. Here is the MainViewModel as defined using MVVM (MVVM Toolkit).

public partial class MainViewModel : ObservableObject
{
    private readonly IAbnLookupService _abnLookupService;

    [ObservableProperty]
    private string _searchText = string.Empty;
    public ObservableCollection<BusinessResult> SearchResults { get; }

    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(CanSearch), nameof(SearchButtonText))]
    [NotifyCanExecuteChangedFor(nameof(SearchCommand))]
    private bool _isSearching = false;
    public bool CanSearch => !IsSearching;

    public string SearchButtonText => IsSearching ? "Searching..." : "Search";

    [RelayCommand]
    private async Task HandleEnterKeyAsync()
    {
        if (CanSearch)
        {
            await SearchAsync();
        }
    }

    public MainViewModel(IAbnLookupService abnLookupService)
    {
        _abnLookupService = abnLookupService;
        SearchResults = new ObservableCollection<BusinessResult>();
    }

    [RelayCommand(CanExecute = nameof(CanSearch))]
    private async Task SearchAsync()
    {
        var searchTerm = SearchText?.Trim();

        SearchResults.Clear();

        if (string.IsNullOrEmpty(searchTerm))
        {
            return;
        }

        // Show loading state
        IsSearching = true;

        try
        {
            var results = await _abnLookupService.SearchAsync(searchTerm);
            SearchResults.AddRange(results);
        }
        finally
        {
            // Reset button state
            IsSearching = false;
        }
    }
}

In addition to basic properties for SearchText and SearchResults, the MainViewModel exposes properties IsSearching and SearchResultText that are used to control the appearance of the Search button.

Here’s the equivalent using MVUX.

public partial record MainModel(IAbnLookupService abnLookupService)
{
    // State for search text
    public IState<string> SearchText => State<string>.Value(this, () => string.Empty);

    // Feed for search results
    public IListFeed<BusinessResult> SearchResults =>
        SearchText
            .Where(text => !string.IsNullOrWhiteSpace(text))
            .SelectAsync(abnLookupService.SearchAsync)
            .AsListFeed(); 
}

The SearchText property is two way data bound to the search TextBox, and the SearchResults feed is derived from the current SearchText value. As the user types in the TextBox, the SearchResults is automatically executed. There are no additional properties required to indicate that the search is in progress.

Note that MVUX makes use of a FeedView in the UI in order to automatically display a progress indicator when the search is being executed.

Advantages of MVUX

1. Centralized State

Everything is driven from a single state object. You always know where the source of truth lives, making debugging and testing far easier.

2. Less Boilerplate

No property-changed notifications, no commands to wire up—just pure data and transformations.

3. Predictable UI Behavior

With unidirectional data flow, each action leads to a new state, and the view renders from state. This makes behavior easier to reason about and reduces bugs from hidden bindings.

4. Built-in Side Effect Management

MVUX separates side-effects (like network calls or file I/O) from state logic, making code cleaner and more testable.

5. Better Testability

Reducers are pure functions: given the same input, they always return the same output. This makes unit testing trivial.

When Should You Use MVUX?

MVUX is particularly well-suited for:

• Applications with complex UI state or flows.
• Apps where you want strict control and visibility into state changes.
• Teams looking to reduce code complexity and improve maintainability.
• Developers familiar with Redux or functional paradigms.

Conclusion

MVVM has served us well, but it shows its age in modern, state-heavy applications. MVUX is a powerful evolution that embraces immutability, functional updates, and unidirectional data flow to make UI development simpler, clearer, and more maintainable.

If you’re tired of verbose ViewModels, hunting down binding errors, or managing a growing list of ICommands, it might be time to rethink your architecture—and give MVUX a try.

Resources:

• MVUX in Uno Platform Docs
• MVUX GitHub

The post Stop Using MVVM appeared first on Nick's .NET Travels.

Setting up VS Code for Uno Platform Development

The first step is to install the Uno Platform extension for VS Code (you can follow this link, or install from the Extensions list inside VS Code):

Once install, you’ll want to make sure you run uno-check to ensure all the dependencies are installed. In the past you would have had to download uno-check but it’s now part of the extension, so you can invoke it directly from the command palette.

Uno-check will run as a separate process, stepping through each set of dependencies to make sure you’re all setup to build and run Uno Platform applications.

Now that we have all the dependencies installed, let’s go ahead and create a new project. You can do this directly from the command line by exploring the options of the unoapp template by running "dotnet new unoapp -h". Alternatively, you can use the Uno Platform Live Wizard to step through the available options and then generate the appropriate dotnet new command that you can run to create your application.

In this case we’re going to be creating a new application using the Recommended preset.

dotnet new unoapp -o InstructionsSampleApp -preset "recommended"

Inside a Terminal within VS Code we can execute this code in order to create the application.

The last thing to do is to open the newly created InstructionsSampleApp folder in VS Code.

After opening the application in VS Code, use the highlighted (red) project selector button at the bottom of the screen to select the project file as the active project.

Next, pick the target platform (click the target platform selector button at bottom of screen), in this case net9-desktop.

Now we can run the application. If you run without the debugger you’ll see that the Hot Design button (left) in the Studio toolbar is enabled.

Clicking the Hot Design button will launch the runtime design experience, allowing the creation, selection and modification of elements in the running application.

If you haven’t already checked out the Hot Design experience, give it a shot today as we’d love to hear your feedback.

Creating Instruction files

Ok, now we have our Uno Platform application setup and ready to go, we can use Copilot Chat in VS Code to use AI to modify our application. Chat can be launched from the View menu.

Opening Copilot chat gives us various options to pick the AI model and the mode – in this case I’m using Agent mode with Claude.

Before I start interacting with Copilot Chat, I make sure that I setup my application to guide AI as to how I want code to be created. To do this you can define instruction files that will help guide AI. Rather than create instruction files manually, in the latest VS Code Preview, there’s a new option to Generate Instructions.

When you select this option, Copilot will spend a couple of minutes analyzing your existing project structure in order to determine the appropriate instructions.

Here you can see a snapshot of the instructions created for our sample application – we created an application using the Recommended presets in the unoapp template, so the instructions are quite opinionated and use a lot of the Uno Platform features such as Toolkit and Extensions.

If I repeat this process using the Blank preset, the instructions file is still quite detailed but isn’t as opinionated when it comes to how code should be structured.

After creating the instructions file, you should see that the output of any interaction with Copilot Chat will be more inline with the existing structure of your application. Of course, you’ll want to adjust and extend the generated instructions file as you continue to develop your application.

Hopefully in the post you’ve seen how to successfully create an Uno Platform application and how you can improve the output of Copilot Chat using instruction files.

The post Using Instruction Files with VS Code Agent Mode and the Uno Platform appeared first on Nick's .NET Travels.

Skia Renderers

If you’re familiar with the Uno Platform, one of the most significant changes in v6 is the switch from native to Skia-based renderers for all Uno Platform targets (which excludes the WinAppSdk target, which continues to rely on Microsoft’s implementation). When you look at the Platforms tab in the wizard, you’ll see that there is a tag at the bottom of each of the tiles, indicating whether the platform uses native or Skia renderer.

If you want to use the native renderers, they’re still available and supported. From the Features tab, you can switch between Skia and Native tiles.

Switching to Native will adjust the tag on most of the Platform tiles. Note that the Desktop tile continues to use Skia as there’s no native alternative.

It’s also worth noting that the WinAppSdk tile isn’t checked by default. We highly recommend checking out the Desktop platform for targeting Windows unless there are specific WinAppSdk features or third party controls that you want to take advantage of that isn’t available for the Desktop target.

Kiota

One of the other notable additions to the wizard is the option to use Kiota instead of Refit for the consumption of Swagger/OpenAPI endpoints. This option is enabled by default in the Recommended preset and is available under the Http section on the Extensions tab.

Uno Platform Studio: Hot Reload & Hot Design

As part of this release, Uno Platform Studio is now available, which includes Hot Reload and Hot Design^®, as well as Design-to-Code. We’ll go into these in more detail in subsequent posts but when you Debug an Uno Platform application, you’ll see the floating toolbar which includes the Hot Reload (right) and Hot Design (left) icons. If you don’t see the toolbar, make sure you’re debugging and Uno Platform target (ie not WinAppSdk) and that you’ve signed in using your Uno Platform account.

Clicking on the Hot Design icon takes you into Hot Design mode where you can select, create, modify and delete elements via the runtime designer. The changes you make are persisted to XAML, making it possible to create and iterate your application without having to stop, rebuild and debug your application repeatedly.

There’s plenty more to cover in the v6 release of the Uno Platform. In the meantime, get started with the extension for your choice of IDE (VS, VS Code or Rider) on Windows, MacOS, or Linux.

The post Uno Platform 6.0 for Windows and Cross-Platform Applications appeared first on Nick's .NET Travels.

At the end of the previous post, the layout was relatively basic, with the formatting of each item in the ListView being the ToString representation of the PhiMessage object.

To make it easier to distinguish between User input and the Assistant response, we’ll use two data templates that simply align the text to the left, for the Assistant, or the right, for the User. This will use a data template selector to pick which template to use based on the User property on the PhiMessage.

In the following video we create an ItemTemplate for the ListView, which will show the User and Message for the PhiMessage. We’ll also create a HeaderTemplate that will be data bound to a SystemMessage. For this, we’ll update the MainViewModel to include the SytemMessage property, which will be combined with the message history in forming the Phi Silica prompt.

[ObservableProperty]
private string _systemMessage = "You are an assistant for a 5 year old child";

public ObservableCollection<PhiMessage> Messages { get; } = new();

[ObservableProperty]
private string _response = string.Empty;

[RelayCommand]
public async Task SendMessage(string message)
{
    Messages.Add(new PhiMessage("User", message));
#if WINDOWS

    if (!LanguageModel.IsAvailable())
    {
        var op = await LanguageModel.MakeAvailableAsync();
    }

    var sysMessage = new PhiMessage("System", SystemMessage);

    var prompt = string.Join(Environment.NewLine, [sysMessage.ToString(), ..(from m in Messages
                                                    select m.ToString())]);


    using LanguageModel languageModel = await LanguageModel.CreateAsync();
    var progressTask = languageModel.GenerateResponseWithProgressAsync(prompt);
    progressTask.Progress +=
        (s, progress) => Dispatch(() => Response += progress);

    var result = await progressTask;
    Response = result.Response;
#else
    Response = "Design-time response....";
    await Task.Delay(1000);
    Response = "Design-time response....(updating)";
    await Task.Delay(1000);
    Response = "Final design-time response";
#endif
    Messages.Add(new PhiMessage("Assistant", Response));
    Response = string.Empty;
}

And now the video for creating the ItemTemplate and HeaderTemplate.

Now that we have an ItemTemplate, we can duplicate the template for the User template where the text is right aligned. In order to use these templates we’ll need a template selector.

public class MessageTypeSelector : DataTemplateSelector
{
    public DataTemplate UserTemplate { get; set; }

    public DataTemplate AssistantTemplate { get; set; }

    public DataTemplate SystemTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        if (item is PhiMessage message)
        {
            return message.User switch
            {
                "System" => SystemTemplate,
                "Assistant" => AssistantTemplate,
                _ => UserTemplate,
            };
        }
        return base.SelectTemplateCore(item, container);
    }
}

The two templates and an instance of the template selector, which references the two templates, need to be added to the Resources of the page.

<Page.Resources>
    <DataTemplate x:Key="UserDataTemplate">
        <Grid>
            <StackPanel>
                <TextBlock Style="{StaticResource CaptionTextBlockStyle}"
                            Text="{Binding User}"
                            TextAlignment="Right" />
                <TextBlock Style="{StaticResource BaseTextBlockStyle}"
                            Text="{Binding Message}"
                            TextAlignment="Right" />
            </StackPanel>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="AssistanctDataTemplate">
        <Grid>
            <StackPanel>
                <TextBlock Style="{StaticResource CaptionTextBlockStyle}"
                            Text="{Binding User}" />
                <TextBlock Style="{StaticResource BaseTextBlockStyle}"
                            Text="{Binding Message}" />
            </StackPanel>
        </Grid>
    </DataTemplate>

    <local:MessageTypeSelector x:Key="MessageTypeSelector"
                                UserTemplate="{StaticResource UserDataTemplate}"
                                AssistantTemplate="{StaticResource AssistanctDataTemplate}" />
</Page.Resources>

Using Hot Design, we can update the ListView to remove the locally defined ItemTemplate and select the MessageTypeSelector resource.

Now when we run the application on Window, we can customize the system message in order to change how Phi Silica responds.

The post AI on Windows: Chat Styling appeared first on Nick's .NET Travels.

We’ll start by amending the MainViewModel to include a collection of the prior messages. In addition, the prior messages are concatenated with the message entered by the user to build the prompt that’s sent to Phi Silica.

    public ObservableCollection<PhiMessage> Messages { get; } = new();

    [ObservableProperty]
    private string _response = string.Empty;

    [RelayCommand]
    public async Task SendMessage(string message)
    {
        Messages.Add(new PhiMessage("User",message));
#if WINDOWS

        if (!LanguageModel.IsAvailable())
        {
            var op = await LanguageModel.MakeAvailableAsync();
        }

        var prompt = string.Join(Environment.NewLine, (from m in Messages
                                                       select m.ToString()));


        using LanguageModel languageModel = await LanguageModel.CreateAsync();
        var progressTask = languageModel.GenerateResponseWithProgressAsync(prompt);
        progressTask.Progress +=
            (s, progress) => Dispatch(() => Response += progress);

        var result = await progressTask;
        Response = result.Response;
#else
        Response = "Design-time response....";
        await Task.Delay(1000);
        Response = "Design-time response....(updating)";
        await Task.Delay(1000);
        Response = "Final design-time response";
#endif
        Messages.Add(new PhiMessage("Assistant",Response));
        Response = string.Empty;
    }

    public class PhiMessage(string user, string message)
    {
        public string User { get; } = user;
        public string Message { get; } = message;

        public override string ToString()
            => $"{User}:\r\n{Message}";
    }

Here’s a quick video of how to update the UI using the Uno Platform Hot Design tool.

In summary we started with a basic Grid and added:

• ListView – bound to the Messages property, to show the history of messages
• TextBlock – bound to the Response property, to show the current progressive response
• TextBox – the InputText textbox for user input
• Button – the Send button bound to the SendMessageCommand, passing the InputText.Text in as a parameter

Here’s the app running:

And there you have it, we’ve stepped up our simple Phi Silica app to be a chat app capable of a multi-step interaction with Phi Silica.

The post AI on Windows: Chat with Phi Silica appeared first on Nick's .NET Travels.

The existing code called GenerateResponseAsync in order to get a response to the prompt provided as a parameter. This method needs to be awaited and simply returns a Response that is a string, which can be displayed to the user. If we change the code to use the GenerateResponseWithProgressAsync, we can attach an event handler to the Progress event.

The following code shows the MainViewModel which has been updated to use the GenerateResponseWithProgressAsync method. There is a new constructor parameter, a DispatcherQueue, and rather than just updating the Response property, the DispatcherQueue is used to ensure the update is done on the correct thread (the Progress event currently triggers on a different thread).

using Microsoft.UI.Dispatching;
using Microsoft.UI.Xaml.Data;
#if WINDOWS
using Microsoft.Windows.AI.Generative;
#endif

namespace PhiMessagingApp;

[Bindable]
public partial class MainViewModel(DispatcherQueue dispatcher) : ObservableObject
{
    [ObservableProperty]
    private string _response = string.Empty;

    [RelayCommand]
    public async Task SendMessage(string message)
    {
#if WINDOWS

        if (!LanguageModel.IsAvailable())
        {
            var op = await LanguageModel.MakeAvailableAsync();
        }

        using LanguageModel languageModel = await LanguageModel.CreateAsync();
        var progressTask = languageModel.GenerateResponseWithProgressAsync(message);
        progressTask.Progress += 
            (s, progress) => Dispatch(() => Response += progress);

        var result = await progressTask;
        Response = result.Response;
#else
        Response = "Design-time response....";
#endif
    }

    private void Dispatch(Action action)
    {
        if (dispatcher.HasThreadAccess)
        {
            action();
        }
        else
        {
            dispatcher.TryEnqueue(() => action());
        }
    }
}

When we run this, we can see that after clicking the Button we get a progressive response.

There are a couple of questions/suggestions I would make:

• I think it would make sense for the Progress event to be triggered on the same thread that the GenerateResponseWithProgressAsync is called on.
• I’m not quite sure why the API has both GenerateResponseWithProgressAsync and GenerateResponseAsync. If you await either of them you get a response that you can use. There’s no requirement to attach a Progress event handler, so I don’t understand why we need to have two methods.

The post AI on Windows: Progress Responses with Phi Silica appeared first on Nick's .NET Travels.

We’ll keep things simple and start with the Blank preset in the Uno Platform template wizard and add Mvvm support under the Presentation section.

In order to access the Phi Silica apis we’ll first need to update to the experimental release of the Windows App Sdk. With Uno, this is done by setting the WinAppSdkVersion property to the experimental version, 1.7.250127003-experimental3.

<PropertyGroup Condition="'$(TargetFramework)'=='net9.0-windows10.0.26100'">
    <WinAppSdkVersion>1.7.250127003-experimental3</WinAppSdkVersion>
</PropertyGroup>

The Phi Silica apis won’t appear whilst the Platform of the project is set to AnyCPU. To resolve this, we need to set both the Platforms and RuntimeIdentifiers properties, when the application is targeting Windows.

<PropertyGroup Condition="'$(TargetFramework)'=='net9.0-windows10.0.26100'">
    <Platforms>x86;x64;ARM64</Platforms>
    <RuntimeIdentifiers>win-x86;win-x64;win-arm64</RuntimeIdentifiers>
    <WinAppSdkVersion>1.7.250127003-experimental3</WinAppSdkVersion>
</PropertyGroup>

After making this adjustment, open Configuration Manager and make sure the Platform value is set to the correct architecture.

Let’s add a MainViewModel that will be used to send a message to Phi Silica and get a response.

using Microsoft.UI.Xaml.Data;
#if WINDOWS
using Microsoft.Windows.AI.Generative;
#endif

namespace PhiMessagingApp;

[Bindable]
public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    private string _response = string.Empty;

    [RelayCommand]
    public async Task SendMessage(string message)
    {
#if WINDOWS

        if (!LanguageModel.IsAvailable())
        {
            var op = await LanguageModel.MakeAvailableAsync();
        }

        using LanguageModel languageModel = await LanguageModel.CreateAsync();
        var result = await languageModel.GenerateResponseAsync(message);
        Response = result.Response;
#else
        Response = "Design-time response....";
#endif
    }
}

Next we’ll set an instance of the MainViewModel as the DataContext on the MainPage.

public MainPage()
{
    this.InitializeComponent();
    DataContext = new MainViewModel();
}

Whilst the Phi Silica APIs only work on Windows, for the purpose of designing the interface we’ll switch target to Desktop.

We’ll run the application and should see both Hot Design and Hot Reload buttons in the floating toolbar.

Clicking the Hot Design (left) button will enter the design experience. We’ll keep things simple by adding a TextBox (message input), Button (to invoke the SendMessage method) and TextBlock (response output). The following video shows adding these elements along with databinding the elements.

Now, with everything wired up we can switch back to the PhiMessagingApp (WinAppSDK Packaged) target.

Unfortunately, at this point you’ll likely run into the following exception:

System.Runtime.InteropServices.COMException: 'Interface not registered
Failed to find proxy registration for IID: {EBF3748D-1EF9-4B89-BA13-65D2B9EC04F0}.'

This exception is a result of the application running as self-contained, which is not supported by the experimental release, as noted in the docs.

Luckily, there’s a quick fix. We can adjust the WindowsAppSDKSelfContained property to false, which will resolve this issue.

<PropertyGroup Condition="'$(TargetFramework)'=='net9.0-windows10.0.26100'">
    <Platforms>x86;x64;ARM64</Platforms>
    <RuntimeIdentifiers>win-x86;win-x64;win-arm64</RuntimeIdentifiers>
    <WinAppSdkVersion>1.7.250127003-experimental3</WinAppSdkVersion>
    <WindowsAppSDKSelfContained>false</WindowsAppSDKSelfContained>
</PropertyGroup>

Let’s go ahead and run the application and enter a prompt, “Why is the sky blue”, and see the response.

As you can see from this post, it’s easy to reference Phi Silca from an Uno Platform application. Whilst the APIs are for Windows only, this can be used to light up your cross platform application with locally executing AI when running on Windows.

The post AI on Windows: Chatting with Phi Silica appeared first on Nick's .NET Travels.

If we ask Copilot what a Copilot+ PC is, the answer is somewhat vague, pointing out that the devices are “powered by high-performance processors” but falls short of defining them as a device that has a separate NPU. The Microsoft developer documentation site provides a more detailed explanation:

Copilot+ PCs are a new class of Windows 11 hardware powered by a high-performance Neural Processing Unit (NPU) — a specialized computer chip for AI-intensive processes like real-time translations and image generation—that can perform more than 40 trillion operations per second (TOPS). Copilot+ PCs provide all–day battery life and access to the most advanced AI features and models

In addition to the consumer features that having an NPU enables (eg Windows Studio Effects and Recall), it also enables developer capabilities via the Windows Copilot Runtime and associated APIs. Of course, if you’re going to start adding features to your application that leverage the Copilot runtime, you’re going to need a way to detect if the device you’re running on supports them.

Currently the APIs are all in the experimental release of the Windows App Sdk, and require your device to be on the developer branch of the Windows Insider program. As the APIs are still in active development, there are some limitations. Being able to detect whether a specific feature is supported on the current devices is one such limitation. Each of the feature APIs offer an IsAvailable method (eg TextRecognizer.IsAvailable()) that can be used to detect if the corresponding model is ready and available. If not, you then have to call the MakeAvailableAsync method (eg TextRecognizer.MakeAvailableAsync()). This will fail with an exception on devices where the model isn’t supported.

Detecting support by attempting to invoke MakeAvailableAsync (and having to wait for the model to be downloaded) is a pretty average experience. Luckily the team behind the AI Dev Gallery have some code that can be used to detect if there’s an NPU present on the device. Here’s a snippet of the code:

using Windows.Win32;
using Windows.Win32.Foundation;
using Windows.Win32.Graphics.DXCore;

    private static readonly Guid DXCORE_ADAPTER_ATTRIBUTE_D3D12_GENERIC_ML = new(0xb71b0d41, 0x1088, 0x422f, 0xa2, 0x7c, 0x2, 0x50, 0xb7, 0xd3, 0xa9, 0x88);
    private static bool? _hasNpu;
    public static bool HasNpu()
    {
        if (_hasNpu.HasValue)
        {
            return _hasNpu.Value;
        }

        IDXCoreAdapterFactory adapterFactory;
        if (PInvoke.DXCoreCreateAdapterFactory(typeof(IDXCoreAdapterFactory).GUID, out var adapterFactoryObj) != HRESULT.S_OK)
        {
            throw new InvalidOperationException("Failed to create adapter factory");
        }

        adapterFactory = (IDXCoreAdapterFactory)adapterFactoryObj;

        // First try getting all GENERIC_ML devices, which is the broadest set of adapters
        // and includes both GPUs and NPUs; however, running this sample on an older build of
        // Windows may not have drivers that report GENERIC_ML.
        IDXCoreAdapterList adapterList;

        adapterFactory.CreateAdapterList([DXCORE_ADAPTER_ATTRIBUTE_D3D12_GENERIC_ML], typeof(IDXCoreAdapterList).GUID, out var adapterListObj);
        adapterList = (IDXCoreAdapterList)adapterListObj;

        // Fall back to CORE_COMPUTE if GENERIC_ML devices are not available. This is a more restricted
        // set of adapters and may filter out some NPUs.
        if (adapterList.GetAdapterCount() == 0)
        {
            adapterFactory.CreateAdapterList(
                [PInvoke.DXCORE_ADAPTER_ATTRIBUTE_D3D12_CORE_COMPUTE],
                typeof(IDXCoreAdapterList).GUID,
                out adapterListObj);
            adapterList = (IDXCoreAdapterList)adapterListObj;
        }

        if (adapterList.GetAdapterCount() == 0)
        {
            throw new InvalidOperationException("No compatible adapters found.");
        }

        // Sort the adapters by preference, with hardware and high-performance adapters first.
        ReadOnlySpan<DXCoreAdapterPreference> preferences =
        [
            DXCoreAdapterPreference.Hardware,
                DXCoreAdapterPreference.HighPerformance
        ];

        adapterList.Sort(preferences);

        List<IDXCoreAdapter> adapters = [];

        for (uint i = 0; i < adapterList.GetAdapterCount(); i++)
        {
            IDXCoreAdapter adapter;
            adapterList.GetAdapter(i, typeof(IDXCoreAdapter).GUID, out var adapterObj);
            adapter = (IDXCoreAdapter)adapterObj;

            adapter.GetPropertySize(
                DXCoreAdapterProperty.DriverDescription,
                out var descriptionSize);

            string adapterDescription;
            IntPtr buffer = IntPtr.Zero;
            try
            {
                buffer = Marshal.AllocHGlobal((int)descriptionSize);
                unsafe
                {
                    adapter.GetProperty(
                        DXCoreAdapterProperty.DriverDescription,
                        descriptionSize,
                        buffer.ToPointer());
                }

                adapterDescription = Marshal.PtrToStringAnsi(buffer) ?? string.Empty;
            }
            finally
            {
                Marshal.FreeHGlobal(buffer);
            }

            // Remove trailing null terminator written by DXCore.
            while (!string.IsNullOrEmpty(adapterDescription) && adapterDescription[^1] == '\0')
            {
                adapterDescription = adapterDescription[..^1];
            }

            adapters.Add(adapter);
            if (adapterDescription.Contains("NPU"))
            {
                _hasNpu = true;
                return true;
            }
        }

        _hasNpu = false;
        return false;
    }

You’ll need to add a package reference to Microsoft.Windows.CsWin32 and include a NativeMethods.txt file to tailor the code generator to include the required methods.

Once you’ve added this code, you can call the HasNpu method and be able to detect, without relying on exceptions being thrown, whether the device you’re running on has an Npu and thus whether it supports the Copilot Runtime. Note that you should always include exception handling around the calls to MakeAvailableAsync, as there are other reasons that this might fail and you want to ensure your application handles these scenarios gracefully.

The post AI on Windows: Detecting NPU appeared first on Nick's .NET Travels.

In order to do a comparison with my experience from my last attempt I started from scratch again. This reset the number of prompt that I could use – last time I mentioned the number of tokens used but it would appear that they’ve changed this to list the number of prompts I’ve used.

As you can see from this image I’ve only used 4 out of my 10 prompts. Within this, I was able to ask it to build a cross platform application capable of returning the ABN information for a business. The workflow went pretty much the same as last time:

• Created a basic app that had an input page, a search results page and an error page. All working but not connected to anything real
• Connected app to real ABN lookup service, it only returned the first result
• Updated app to show multiple results

At this point, I couldn’t click on the search results to get further information, so I asked it to create a details page that included web results.

• Created a details page that had some placeholder/fake information about the business
• Updated the details page to include real web search results (using Serper).

What was particularly interesting is that it was no longer necessary for me to connect my application so Superbase in order to store the API keys (ABN lookup and Serper). Of course, this meant I (and anyone else using the tool) needed to enter them on first run but it was nice to not automatically take on the Superbase dependency just to mock something out.

Given how far I was able to get in just over 10minutes, it’s staggering how far these AI tools have come. Comments like “90% marketing and 10% reality” from industry greats like Linus Torvalds indicate how some in the industy are going to be caught flat footed if they’re not already experimenting with AI tools.

The post AI App Builders – Re-take – TempoLabs appeared first on Nick's .NET Travels.

Let’s get started by creating a new repository in GitHub. This will be an empty repository, except for a default .gitignore file. Since we’re building a .NET application, it makes sense to go with the Visual Studio .gitignore template.

Next step is to open the repository in Codespaces. This can be done from the dropdown on the Code button.

When Codespaces opens it looks and feels very similar to VS Code, just running within the bounds of the browser

Since we’re going to be creating an Uno Platform application, let’s go ahead and install the Uno Platform extensions

This will take a minute or two as it needs to install not only the Uno Platform extension but also the C# and C# Dev Kit extensions.

The next thing we need to do is to make sure that we have .NET 9 installed – by default Codespaces currently has version 8.0.404 of the .NET SDK installed. Follow the instructions to install .NET 9.

Next up, is to run uno-check. This is available via the command palette.

As uno-check runs, you can follow along in the Terminal and enter “y” when prompted to install the latest uno.sdk and the uno.templates.

Once uno-check completes, we’re setup and ready to create the application. We’re going to use the dotnet new unoapp command to create a new application. The full command is

dotnet new unoapp -o MyCodeSpaceApp -vscode

If you want assistance with the various options available for the unoapp template, go to https://new.platform.uno/ and select the options you want. At the end of the process, you’ll have a dotnet new command you can simply paste into the Terminal.

In order for the Uno Platform tooling to work we need to open the newly created application by invoking Open Folder from the File menu, and then selecting the newly created application folder.

At the bottom of the screen you should now see the solution file highlighed in red – you need to click this in order to select the project file from the dropdown at the top of the screen.

At this point you may notice a prompt requesting that you register/sign-in – this won’t currently work as it will attempt to launch a skia desktop application (the team is aware of this limitation). For now to work around this, you can register and sign in via Visual Studio, VS Code or Rider, and then copy the license files into your codespace. The license files are located at C:\Users\{User}\AppData\Local\Uno Platform. Copy the whole folder into a folde in Codespaces by creating a Licensing folder, and dragging the files from File Explorer into the Licensing folder in Codespaces.

These file then need to be copied to the location where Uno Platform is expecting the license: ~/.local/share/'Uno Platform'. In the Terminal navigate to the Licensing folder than then invoke:

cp . -R ~/.local/share/'Uno Platform'

With the copied licensing files in place, they should auto-matically renew without a prompt. However, if the license does expire, you may need to repeat this process (at least until Uno Platform is updated to support signing in via a browser based app).

Before you can run the application, you need to change the target to .net9-browserwasm.

At this point, if you switch to the Output tab and select the Uno Platform – Hot Reload option from the dropdown, you should see that the license has been successfully refreshed.

Now we can go ahead and run the application by invoking

dotnet run -f net9.0-browserwasm

This will build and run the wasm target. Once it’s ready, a prompt will appear giving you the option to Open in Browser. Before doing this, you should click the Make Public button.

When you click the Make Public button, the notification will go away but you can still open the application in the browser by ctrl-clicking on the App url. This will successfully launch the application.

However, you’ll notice that both the Hot Reload and Hot Design buttons are red, indicating that they’re not connected correctly. To fix this we need to do two things back in our Codespace.

From the Ports tab, make sure that the Visibility of all ports is set to Public

Not that you should only have two ports but if you happen to have an additional port (like in the above image) you need to return to the Output tab and confirm what port number DevServer is running on. In my case it’s 39681, so you want to make sure this port, along with the port for the web application (5000 in my case) are set to Public.

Ok, so the last thing we need to do is to compensate for an issue where the Uno Platform isn’t assigning the correct hostname during the compilation, meaning that Hot Reload isn’t connecting correctly. To fix this we need to add a couple of properties to our csproj file.

<UnoRemoteControlHost>symmetrical-space-orbit-x5jgp5qpgjcqp7-39681.app.github.dev</UnoRemoteControlHost>
<UnoRemoteControlPort>443</UnoRemoteControlPort>

Importantly, the UnoRemoteControlPort should always be 443. The UnoRemoteControlHost should be the Fowarded Address that correlates to the Port that DevServer is listening on. The port was 39681 in my case, so the UnoRemoteControlHost is symmetrical-space-orbit-x5jgp5qpgjcqp7-39681.app.github.dev.

Return to the Terminal and restart the web by rerunning the dotnet run command. In some cases, Codespaces will revert the web application port to private, so you may need to set that back to public.

If, after restarting the web application, the Hot Reload icon is still appearing red, you may need to remove the UnoRemoteControlPort from the csproj.user file.

Remove this line and save the file. Then restart the web application.

Now you can go ahead and click on the Hot Design button, and enter the design mode for your application.

As you make changes in Hot Design, these are going to be reflected back into the XAML file(s) of your application.

As you can see, you can get from an empty repository through to a running application in Codespaces in a few minutes. There are a couple of rough corners right now, but expect that this process will get easier as we continue to roll out new and improved tooling for the Uno Platform. Also, don’t forget that in addition to creating a web application (WASM), you’ve also created an application that will work on Windows (WinUI and/or Skia), iOS, Android, Mac (MacCatalyst and/or Skia) and Linux.

The post Building Cross Platform Applications using Hot Design and Codespaces with Uno Platform and No IDE appeared first on Nick's .NET Travels.

As with the previous attempts, my input to the AI prompt is fairly simple: Create a cross platform application that can lookup the ABN of a business using an online service.

As the AI starts to get going I’m suitably impressed with the interpretation of my input and the subsequent mermaid diagram it generates. However, the experience rapidly when downhill from there as the wireframe generation phase seemed to break. I tried the usual reqeusts to the AI prompt for it to fix the errors but after multiple attempts it wasn’t getting very far. I even tried deleting the partially generated UI, only for it to again fail to generate the wireframes.

Ironically, as I was putting this post together, I returned to the app I was creating in TempoLabs and the screen must have refreshed because there was my generated wireframes.

Now that we had a UI, it needed to be connected to the ABN lookup service. After a couple of simple prompts, the AI had built a service that would then connect to the ABN lookup service. I was moderately surprised that it was indeed able to call the service. Interestingly, it didn’t quite understand my initial prompt which I was looking to retrieve the ABN for a business; instead it assumed I had an ABN that I needed to lookup. This was easily rectified by a prompt that clarified that I wanted the ABN for a business name that would be entered.

The result was a basic UI that would indeed lookup a business name.

The only point I would make is that during this process the AI realised that I needed to enter a API key in order to access the service. Instead of prompting me for the GUID and then putting it somewhere sensible (as other services like Lovable have done), it instead suggested I needed to create a .env file and add the GUID myself….. I promptly asked the AI to do it for me.

I then requested that the UI be changed to show all results. Somehow the AI generated code that caused an error, which it detected and then prompted me as to what to do.

I clicked the Fix with AI and the issue was then solved, resulting in a UI that did indeed return all the search results.

The weird thing about this exchange is that I’m not in control of the changes the AI is making, so when it makes a mistake and causes an error, it should be able to automatically iterate until it’s either stuck (unable to fix the issue) or it’s fixed the error. It would seem that prompting me with the error should be a last resort.

Ok at this point I’m going to give TempoLabs the win as I feel it’s been able to achieve what others haven’t – a basic application that’s able to retrieve ABN numbers for a business. Not withstanding the rough edges in places, this was a surprisingly good experience.

Could you continue building a real application with this tool? I think you could. However, you would probably have to sign up to one of their paid tiers because just this small set of experimentation used up over half (350K of 500K) of the daily tokens you get on the free tier.

Anyhow, here’s an update on the current scoreboard.

Human Developers: 2 AI Code Builders: 2

Also for reference here’s the current ordering of the services I’ve tried to date:

• TempoLabs
• Lovable
• Co.dev

The post AI App Builders – Take 3 – TempoLabs appeared first on Nick's .NET Travels.

Firstly I have to hand it to Lovable, they’ve done a great job with the user experience of the site. It’s really easy to get started, all from an initial prompt, and when you need things along the way (eg supabase) it’s always there to guide you – it’s like they’ve run this process a thousand times and have ironed out all the kinks.

I also loved that out of the box, the application that was created was simple, yet stylish, and overall worked even in the context of a mobile/desktop application.

I followed a similar process to my previous attempt, however I was a little more vague when it came to the webservice I wanted to call. At the prompt I entered “connect this to an abn lookup service available online”. I was totally blown away that it was able to find the correct service with it’s response being “I’ll help you connect the application to a real ABN lookup service. The Australian Business Register (ABR) provides a web API for looking up ABN details. To use it, we’ll need to register for an ABR GUID (authentication key).”

I was then prompted to enter the ABR GUID (which I have from previously requesting access to the service), connect to Supabase and approve changes to the database schema to store historical searches (all pretty cool stuff).

Ok, so this is where the wheels fell of the bus. Despite it’s best attempt, Lovable wasn’t able to call the service with any success. Furthermore, it actually made a number of changes to the app that actually broke it, or raised an error when calling the ABN lookup service. Each time, I was required to prompt Lovable to fix the issue…… surely the AI should be able to run the site, test it and then iterate until it works.

Unfortunately it was at this point that I ran out of my free prompts. To continue I had to sign up to one of the planes…. despite not having anything that resembles a working app.

I’m not at the point where I’m going to be spending money on these services, so I’ll wrap up the test drive of Lovable. I was quite impressed, so I suspect that AI should both get a point (for being quite proactive) and drop a point (for not being able to get the service calling working). If you’re keeping score:

Human Developers: 2 AI Code Builders: 1

The post AI App Builders – Take 2 – Lovable appeared first on Nick's .NET Travels.

In this first post we’re going to pick on co.dev that claims to be able to convert “text to app in minutes”.

First up, as you can imagine, there’s a mandatory sign-up/login flow – AI isn’t cheap and they want to ensure you’re not a bot or some other AI service. As I’ll be testing out their services, I don’t mind this requirement but it does make me wonder whether organisations will be open to their devs having to sign into this online service, effectively giving over access to some of their enterprise data. Data security is definitely going to be an interesting space and it’ll be a challenge for organisations to find the balance between locking down their data versus providing access to enable the generation of data driven applications by these AI tools.

I figured I’d try out building a relatively simple application that accepts a single user input, the name of a business, and calls a web api to retrieve the Australian Business Number (publically available here). Already I know there are a couple of wrinkles here, such as the web api requiring an API key and there are two different formats, SOAP and JSON, and a couple of different endpoint methods to select from. However, the web api is by no means complex, and a typical developer, using tooling built into VS (eg Add Web Service), could get an API call going in say 10-15mins.

The overall experience of starting a new project was quite good as it stepped me through a number of prompts, including setting up Supabase. Only minor quirk was that after opening a different tab to setup Supabase I had to convince co.dev to refresh in order to see my new Supabase project).

I was prompted as to what I wanted to create, so I entered “A cross-platform application that can be used to look up the ABN for an organisation”. After a few minutes a skeleton application was created. I liked the fact that it had wired up authentication, which is oftern a challenging aspect, and I was able to create an account and login. I didn’t like that despite saying I wanted a cross-platform application, it just built me a web application. I wasn’t in any illusion that I was going to get an actual cross platform application but it would have been nice for it to create something that didn’t look like a generic web portal.

I also liked that in the Chat pane it was describing what was going on, giving some insight into how the AI was thinking about/changing the application.

The current Dashboard page was blank, so I entered a prompt to build out the functionality: “On the dashboard page add an input box where the user can type the name of the business they want to search for and a submit button. When the user clicks the submit button, use the input to call the search api at https://abr.business.gov.au/Documentation/WebServiceMethods”. Again, the AI went off an processed for a few minutes before it came back and updated the dashboard page.

Despite again feeling that this was more of a web portal than an actual application, I realised that the AI was indeed adding value. I’d created the basics on this application in under 5 minutes, so who was I to complain about the way it looked.

Ok, so the real test was when I entered the name of a business and clicked the Search button.

FAIL

It raised an error – I figured this was likely to happen, so I asked AI to investigate the error (you can click on the error in the UI and add it as context to the chat, which was nice). The AI went off, churned for a bit, made some changes (switched from JSON to SOAP services) and came back claiming it had fixed the issue. I entered a name and clicked Search.

FAIL

I repeatedly tried to convince the AI to make changes to fix the issue calling the web api. This included one prompt where I told it to continue working until it could successfully call the web api.

FAIL,

FAIL,

FAIL,

FAIL,

At this point my experiment was over, and given I wasn’t paying for the premium offering, I didn’t see a way to take a look at the code to see what the issue was. The way I see it is that there are definitely some time savings to be had but as soon as AI has to go do something of even moderate complexity, it gets stuck.

Human Developers: 1 AI Code Builders: 0

Let’s try out another AI builder and see how we get on.

The post AI App Builders – Take 1 – co.dev appeared first on Nick's .NET Travels.

Let’s create a new application using the Uno Platform Template Wizard – by default this will create a cross platform application that includes all the supported Uno Platform targets but if you only want to target Windows (or a different subset of the platforms) you can adjust this from the Platforms tab.

We’re going to go with the Recommended preset, which includes support for Microsoft.Extensions. In the Logging section, we’ll stick with Default for now, but it’s useful to know that you can select the Serilog option if you want to write log information to files.

Ok, next up we need to add a reference to the Microsoft.Extensions.Logging.ApplicationInsights nuget package.

If you don’t already have an Azure Application Insights resource, take the opportunity to create one now via the Azure Portal. Once you’ve created the Application Insights resource, copy the Connection String value for use in the next step.

In Solution Explorer, locate the appsettings.json file (or if you only want to set different values for development than for production, locate the appsettings.development.json file) and add a new section, TelemetryConfiguration, with a single node, ConnectionString, which contains the Connection String copied from the Azure portal.

{
  ... ,
  "TelemetryConfiguration": {
    "ConnectionString": "InstrumentationKey=XXXXXXXX"
  }
}

Next we need to call logBuilder.AddApplicationInsights(), as part of configuring the application Host. This will setup logging to output to Application Insights.

We’ll also configure an instance of the TelemetryClient as a service that can be used to track events.

services.AddSingleton(sp => new TelemetryClient(sp.GetRequiredService>().Value));

And that’s all we need to do to install and configure support for Azure Application Insights in our application.

We can make use of this in two ways. Firstly, when the application calls any of the log methods on ILogger, a trace is added to Application Insights. Alternatively, the application can access the TelemetryClient and use it to track events.

var logger = Host.Services.GetRequiredService<ILogger<App>>();
logger.LogError("Nicks Error - AppInsights!");

var telemetryClient = Host.Services.GetRequiredService<TelemetryClient>();
telemetryClient.TrackEvent("Test event");

Here I make the distinction between a trace and an event because Application Insights sees these as different things. If you click on the Events node under Usage, you can see information about entries made by calling TrackEvent.

Alternatively, if you click on the Logs node under Monitoring, you can invoke a query to see all the traces. This includes entries made using logging in the application – be aware that any filtering specified in the logBuilder configuration is done in the application before entries are sent to Application Insights.

Ok, there you have it, a quick summary of how you can extend logging in your Windows and cross platform application using Azure Application Insights.

The post Logging with Azure Application Insights in a Windows Application appeared first on Nick's .NET Travels.

1>Tool xcrun execution finished (exit code = 1).
1>C:\Program Files\dotnet\packs\Microsoft.iOS.Sdk.net8.0_18.0\18.0.8314\targets\Xamarin.Shared.Sdk.targets(1648,3): error : clang++ exited with code 1:
1>C:\Program Files\dotnet\packs\Microsoft.iOS.Sdk.net8.0_18.0\18.0.8314\targets\Xamarin.Shared.Sdk.targets(1648,3): error : ld: library 'f:/packages/microsoft.ml.onnxruntime.extensions/0.13.0/buildTransitive/net6.0-ios15.4/../../runtimes/ios/native/onnxruntime_extensions.xcframework.zip' not found
1>C:\Program Files\dotnet\packs\Microsoft.iOS.Sdk.net8.0_18.0\18.0.8314\targets\Xamarin.Shared.Sdk.targets(1648,3): error : clang++: error: linker command failed with exit code 1 (use -v to see invocation)

This appears to be a known issue tracked on the onnx runtime github repository in relation to building an .NET MAUI application. In the issue there is a workaround that suggests manually extracting the zip file that contains the native reference. However, if you do this, you’ll need to manually do it on each computer you want to run the application on.

Let’s walk through how we can apply the workaround suggest in the issue in a way that will work on any computer that wants to run the application, without having to apply a bunch of manual steps. The first thing to do is to extract the two native references from the NuGet packages Microsoft.ML.OnnxRuntime and Microsoft.ML.OnnxRuntime.Extensions:

• packages\microsoft.ml.onnxruntime.extensions\0.13.0\runtimes\ios\native\onnxruntime_extensions.xcframework.zip
• packages\microsoft.ml.onnxruntime\1.20.1\runtimes\ios\native\onnxruntime.xcframework.zip

Each of these zip files was extracted into a Library folder at the solution level, resulting in the following folder structure.

Each of the NuGet packages, Microsoft.ML.OnnxRuntime and Microsoft.ML.OnnxRuntime.Extensions, includes a targets file that contains a single NativeReference item, for example.

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <ItemGroup Condition="('$(OutputType)'!='Library' OR '$(IsAppExtension)'=='True')">
    <NativeReference Include="$(MSBuildThisFileDirectory)..\..\runtimes\ios\native\onnxruntime.xcframework.zip">
      <Kind>Static</Kind>
      <IsCxx>True</IsCxx>
      <SmartLink>True</SmartLink>
      <ForceLoad>True</ForceLoad>
      <LinkerFlags>-lc++</LinkerFlags>
      <WeakFrameworks>CoreML</WeakFrameworks>
    </NativeReference>
  </ItemGroup>
</Project>

Unfortunately, it appears that the MSBuild task that is responsible for extracting the zip file and resolving the native reference, doesn’t appear to be working correctly. Since we’ve manually extracted the zip files into a location where they can be checked in, alongside the application, we just need to update the NativeReference by changing the Directory.Build.targets to the following:

<Project>
    <ItemGroup Condition="(('$(OutputType)'!='Library' OR '$(IsAppExtension)'=='True') AND '$(TargetFramework)'=='net8.0-ios')">
        <NativeReference Remove="@(NativeReference)" />

        <NativeReference Include="$(MSBuildThisFileDirectory)..\Library\onnxruntime.xcframework">
            <Kind>Static</Kind>
            <IsCxx>True</IsCxx>
            <SmartLink>True</SmartLink>
            <ForceLoad>True</ForceLoad>
            <LinkerFlags>-lc++</LinkerFlags>
            <WeakFrameworks>CoreML</WeakFrameworks>
        </NativeReference>
        <NativeReference Include="$(MSBuildThisFileDirectory)..\Library\onnxruntime_extensions.xcframework">
            <Kind>Static</Kind>
            <IsCxx>True</IsCxx>
            <SmartLink>True</SmartLink>
            <ForceLoad>True</ForceLoad>
            <LinkerFlags>-lc++</LinkerFlags>
            <WeakFrameworks>CoreML</WeakFrameworks>
        </NativeReference>
    </ItemGroup>
</Project>

With this change, the ObjectDetection application will now run on iOS. Here’s it running in on the iOS simulator via the Remote Simulator.

The post Taking AI Dev Gallery Code Cross Platform with Uno Platform – iOS appeared first on Nick's .NET Travels.

Let’s start by trying to run the application on Android. The first issue we see is that the path to the Faster RCNN 10 model isn’t being resolved correctly; we can’t just assume a path relative to the InstalledLocation of the application. The OnNavigatedTo and InitModel methods can be updated as follows:

protected override async void OnNavigatedTo(Microsoft.UI.Xaml.Navigation.NavigationEventArgs e)
{
    //await InitModel(System.IO.Path.Join(Windows.ApplicationModel.Package.Current.InstalledLocation.Path, "Models", @"FasterRCNN-10.onnx"));
    await InitModel("Models/FasterRCNN-10.onnx");
}

private Task InitModel(string modelPath)
{
    return Task.Run(async () =>
    {
        if (_inferenceSession != null)
        {
            return;
        }

        var file = await Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(new Uri($"ms-appx:///{modelPath}"));

        SessionOptions sessionOptions = new();
        sessionOptions.RegisterOrtExtensions();

        _inferenceSession = new InferenceSession(file.Path, sessionOptions);
    });
}

Now that we have the correct path to the model being passed into the InferenceSession constructor, we see a different issue emerge. A TypeInitializationException is raised when trying to initialize the NativeMethods type.

I realised that this was related to the current set of PackageReferences which includes Microsoft.ML.OnnxRuntime.DirectML. This package is an optimization of the OnnxRuntime that leverages DirectX 12, which would explain why it’s not compatible with Android (and other non-DirectX platforms). Let’s update the package references.

<ItemGroup>
    <PackageReference Include="Microsoft.ML.OnnxRuntime" Condition="'$(TargetFramework)' != 'net8.0-windows10.0.26100'" />
    <PackageReference Include="Microsoft.ML.OnnxRuntime.DirectML" Condition="'$(TargetFramework)' == 'net8.0-windows10.0.26100'" />
    <PackageReference Include="Microsoft.ML.OnnxRuntime.Extensions" />
    <PackageReference Include="System.Drawing.Common" />
</ItemGroup>

The Microsoft.ML.OnnxRuntime PackageReference will include a managed implementation of the OnnxRuntime. We’re conditionally including the DirectML implementation for Windows and the Microsoft.ML.OnnxRuntime package when not on Windows.

With these changes, the application starts up correctly. However, when we go to select an image, we experience further issues with any code that uses the System.Drawing.Common package.

I’m going to rant a little here because it’s annoying that Microsoft publishes a netstandard2.0 library that is only designed to work on Windows. This library should only include Windows tfms. Alternatively, if the intent is to allow the library to compile for all targets, the methods should be marked as NotImplemented for all targets except Windows.

Ok, so that ends my rant but the question remains, how do we replace System.Drawing.Common. A while ago I posted on using ImageSharp with the Uno Platform, so it makes sense to use this library. Let’s update the PackageReferences:

<ItemGroup>
    <PackageReference Include="Microsoft.ML.OnnxRuntime" Condition="'$(TargetFramework)' != 'net8.0-windows10.0.26100'" />
    <PackageReference Include="Microsoft.ML.OnnxRuntime.DirectML" Condition="'$(TargetFramework)' == 'net8.0-windows10.0.26100'" />
    <PackageReference Include="Microsoft.ML.OnnxRuntime.Extensions" />
    <!--<PackageReference Include="System.Drawing.Common" />-->
    <PackageReference Include="SixLabors.ImageSharp" />
    <PackageReference Include="SixLabors.ImageSharp.Drawing" />
</ItemGroup>

And now we need to replace the methods in BitmapFunctions.cs, which use methods in System.Drawing.Common, with equivalent methods that use ImageSharp. Not all methods in BitmapFunctions.cs are used by this application, so I’ve only migrated the two methods required into a static class, ImageFunctions.

using Microsoft.ML.OnnxRuntime.Tensors;
using Microsoft.UI.Xaml.Media.Imaging;
using SixLabors.Fonts;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;

namespace ObjectDetection;

internal static class ImageFunctions
{
    private static readonly float[] Mean = [0.485f, 0.456f, 0.406f];
    private static readonly float[] StdDev = [0.229f, 0.224f, 0.225f];

    private static Uri FontUri = new Uri("ms-appx:///Uno.Fonts.OpenSans/Fonts/OpenSans.ttf");

    public static DenseTensor<float> PreprocessBitmapForObjectDetection(Image<Rgb24> bitmap, int paddedHeight, int paddedWidth)
    {
        int width = bitmap.Width;
        int height = bitmap.Height;
        DenseTensor<float> input = new([3, paddedHeight, paddedWidth]);

        bitmap.ProcessPixelRows(pixelAccessor =>
        {
            for (int y = 0; y < pixelAccessor.Height; y++)
            {
                Span<Rgb24> row = pixelAccessor.GetRowSpan(y);

                // Using row.Length helps JIT to eliminate bounds checks when accessing row[x].
                for (int x = 0; x < row.Length; x++)
                {
                    input[0, y, x] = row[x].B - Mean[0];
                    input[1, y, x] = row[x].G - Mean[1];
                    input[2, y, x] = row[x].R - Mean[2];
                }
            }
        });

        return input;
    }


    public static async Task<BitmapImage> RenderPredictions(Image<Rgb24> image, List<Prediction> predictions)
    {
        FontCollection collection = new();

#if WINDOWS
        collection.AddSystemFonts();
        collection.TryGet("Arial", out var family);
#else
        var fontFile = await Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(FontUri);
        collection.Add(fontFile.Path);
        collection.TryGet("Open Sans", out var family);
#endif

        image.Mutate(g =>
        {
            // Draw prediciton
            int markerSize = (int)((image.Width + image.Height) * 0.04 / 2);
            int fontSize = (int)((image.Width + image.Height) * .04 / 2);
            fontSize = Math.Max(fontSize, 1);

            Pen pen = new SolidPen(Color.Red, markerSize / 10);

            var brush = new SolidBrush(Color.White);



            Font font = family.CreateFont(fontSize);


            foreach (var p in predictions)
            {
                if (p == null || p.Box == null)
                {
                    continue;
                }

                // Draw the box
                g.DrawLine(pen, new PointF(p.Box.Xmin, p.Box.Ymin), new PointF(p.Box.Xmax, p.Box.Ymin));
                g.DrawLine(pen, new PointF(p.Box.Xmax, p.Box.Ymin), new PointF(p.Box.Xmax, p.Box.Ymax));
                g.DrawLine(pen, new PointF(p.Box.Xmax, p.Box.Ymax), new PointF(p.Box.Xmin, p.Box.Ymax));
                g.DrawLine(pen, new PointF(p.Box.Xmin, p.Box.Ymax), new PointF(p.Box.Xmin, p.Box.Ymin));

                // Draw the label and confidence
                string labelText = $"{p.Label}, {p.Confidence:0.00}";
                g.DrawText(labelText, font, brush, new PointF(p.Box.Xmin, p.Box.Ymin));
            }

        });

        // returns bitmap image
        BitmapImage bitmapImage = new();
        using (MemoryStream memoryStream = new())
        {
            image.Save(memoryStream, SixLabors.ImageSharp.Formats.Png.PngFormat.Instance);

            memoryStream.Position = 0;

            bitmapImage.SetSource(memoryStream.AsRandomAccessStream());
        }

        return bitmapImage;
    }
}

Lastly, the code in MainPage.xaml.cs needs to be updated to use ImageSharp and ImageFunctions. Here I’ve included the UploadButton_Click method and the DetectObjects method which include the changes required to select an image, load an Image<Rgb24> and use it to prepare the image to run the object detection, and finally to load an updated Image<Rbg24> to display the results.

private async void UploadButton_Click(object sender, RoutedEventArgs e)
{
    var window = App.MainWindow ?? new Window();
    var hwnd = WinRT.Interop.WindowNative.GetWindowHandle(window);

    var picker = new FileOpenPicker();

    WinRT.Interop.InitializeWithWindow.Initialize(picker, hwnd);

    picker.FileTypeFilter.Add(".png");
    picker.FileTypeFilter.Add(".jpeg");
    picker.FileTypeFilter.Add(".jpg");

    picker.ViewMode = PickerViewMode.Thumbnail;

    var file = await picker.PickSingleFileAsync();
    if (file != null)
    {
        UploadButton.Focus(FocusState.Programmatic);
        await DetectObjects(file);
    }
}

private async Task DetectObjects(StorageFile file)
{
    Loader.IsActive = true;
    Loader.Visibility = Visibility.Visible;
    UploadButton.Visibility = Visibility.Collapsed;

    DefaultImage.Source = new BitmapImage(new Uri(file.Path));

    Image<Rgb24>? image = default;

    var predictions = await Task.Run(async () =>
    {
        using var strm = await file.OpenStreamForReadAsync();
        image = Image<Rgb24>.Load<Rgb24>(strm);


        // Resizing image ==> Suggested that height and width are in range of [800, 1333].
        float ratio = 800f / Math.Max(image.Width, image.Height);
        int width = (int)(ratio * image.Width);
        int height = (int)(ratio * image.Height);

        var paddedHeight = (int)(Math.Ceiling(image.Height / 32f) * 32f);
        var paddedWidth = (int)(Math.Ceiling(image.Width / 32f) * 32f);

        var resizedImage = image.Clone(ctx =>
        {
            ctx.Resize(new ResizeOptions
            {
                Size = new Size(paddedWidth, paddedHeight),
                Mode = ResizeMode.Pad
            });
        });
        image.Dispose();
        image = resizedImage;


        // Preprocessing
        Tensor<float> input = new DenseTensor<float>([3, paddedHeight, paddedWidth]);
        input = ImageFunctions.PreprocessBitmapForObjectDetection(image, paddedHeight, paddedWidth);


        // Setup inputs and outputs
        var inputMetadataName = _inferenceSession!.InputNames[0];
        var inputs = new List<NamedOnnxValue>
        {
            NamedOnnxValue.CreateFromTensor(inputMetadataName, input)
        };

        // Run inference
        using IDisposableReadOnlyCollection<DisposableNamedOnnxValue> results = _inferenceSession!.Run(inputs);

        // Postprocess to get predictions
        var resultsArray = results.ToArray();
        float[] boxes = resultsArray[0].AsEnumerable<float>().ToArray();
        long[] labels = resultsArray[1].AsEnumerable<long>().ToArray();
        float[] confidences = resultsArray[2].AsEnumerable<float>().ToArray();
        var predictions = new List<Prediction>();
        var minConfidence = 0.7f;
        for (int i = 0; i < boxes.Length - 4; i += 4)
        {
            var index = i / 4;
            if (confidences[index] >= minConfidence)
            {
                predictions.Add(new Prediction
                {
                    Box = new Box(boxes[i], boxes[i + 1], boxes[i + 2], boxes[i + 3]),
                    Label = RCNNLabelMap.Labels[labels[index]],
                    Confidence = confidences[index]
                });
            }
        }

        return predictions;
    });

    BitmapImage outputImage = await ImageFunctions.RenderPredictions(image!, predictions);

    DispatcherQueue.TryEnqueue(() =>
    {
        DefaultImage.Source = outputImage;
        Loader.IsActive = false;
        Loader.Visibility = Visibility.Collapsed;
        UploadButton.Visibility = Visibility.Visible;
    });

    image.Dispose();
}

Our application is good to go for Android. For some reason, I didn’t have much luck running this code on an Android emulator but it runs fine on an actual Android device. However, I will comment that the object detection isn’t particularly fast – there might be some room to optimize the image manipulation code.

The post Taking AI Dev Gallery Code Cross Platform with Uno Platform – Android appeared first on Nick's .NET Travels.

We’ll start by creating a new Uno Platform application, called ObjectDetection. From the Uno Platform Template Wizard, select the Blank preset on the left side of the window, and then click Create.

Before we start adding the code for object detection, we first need to add some project references and of course the Faster RCNN model file. In the ObjectDetection project file, add the following PackageReference elements.

<ItemGroup>
    <PackageReference Include="Microsoft.ML.OnnxRuntime.DirectML" />
    <PackageReference Include="Microsoft.ML.OnnxRuntime.Extensions" />
    <PackageReference Include="System.Drawing.Common" />
</ItemGroup>

The corresponding PackageVersion needs to be added to the Directory.Packages.props file.

<Project ToolsVersion="15.0">
    <ItemGroup>
        <PackageVersion Include="Microsoft.ML.OnnxRuntime.DirectML" Version="1.20.1" />
        <PackageVersion Include="Microsoft.ML.OnnxRuntime.Extensions" Version="0.13.0" />
        <PackageVersion Include="System.Drawing.Common" Version="9.0.0" />
    </ItemGroup>
</Project>

Next, copy the Models folder, which includes the FasterRCCN-10.onnx file, from the exported project, into the ObjectDetection project folder. In Visual Studio, select the onnx file and in the Properties winodw, set the Build Action to Content.

Now it’s time to copy across the bulk of the code from the exported project into the ObjectDetection project. Copy the files, BitmapFunctions.cs, HardwareAccelerator.cs, Prediction.cs and RCNNLabelMap.cs into the ObjectDetection project (Note that in BitmapFunctions.cs there’s an ambiguous type reference, which can be resolved by replacing the type “Brush” with “var”)

Instead of copying across the ObjectDetection.xaml and ObjectDetection.xaml.cs files, we’ll copy the contents of these files into the existing MainPage.xaml and MainPage.xaml.cs files. Here’s the MainPage.xaml:

<Page x:Class="ObjectDetection.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:ObjectDetection"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ScrollViewer>
        <Grid RowSpacing="16">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Image x:Name="DefaultImage"
                   MaxWidth="800"
                   MaxHeight="500" />
            <ProgressRing x:Name="Loader"
                          Grid.Row="1"
                          IsActive="false"
                          Visibility="Collapsed" />
            <Button x:Name="UploadButton"
                    Grid.Row="1"
                    HorizontalAlignment="Center"
                    Click="UploadButton_Click"
                    Content="Select image"
                    Style="{StaticResource AccentButtonStyle}" />
        </Grid>
    </ScrollViewer>
</Page>

And the corresponding MainPage.xaml.cs. Note that we’ve commented out the line that hides the ProgressRing in the exported project, and the initial call to DetectObject since we won’t be packaging any images with the application for now.

using Faster_RCNN_Object_DetectionSample.SharedCode;
using Microsoft.ML.OnnxRuntime.Tensors;
using Microsoft.ML.OnnxRuntime;
using Microsoft.UI.Xaml.Media.Imaging;
using Windows.Storage.Pickers;
using System.Drawing;

namespace ObjectDetection;

public sealed partial class MainPage : Page
{
    private InferenceSession? _inferenceSession;

    public MainPage()
    {
        this.Unloaded += (s, e) => _inferenceSession?.Dispose();
        this.InitializeComponent();
    }

    protected override async void OnNavigatedTo(Microsoft.UI.Xaml.Navigation.NavigationEventArgs e)
    {
        await InitModel(System.IO.Path.Join(Windows.ApplicationModel.Package.Current.InstalledLocation.Path, "Models", @"FasterRCNN-10.onnx"));

        //App.Window?.ModelLoaded();

        // Loads inference on default image
        //await DetectObjects(Windows.ApplicationModel.Package.Current.InstalledLocation.Path + "\\Assets\\team.jpg");
    }

    private Task InitModel(string modelPath)
    {
        return Task.Run(() =>
        {
            if (_inferenceSession != null)
            {
                return;
            }

            SessionOptions sessionOptions = new();
            sessionOptions.RegisterOrtExtensions();

            _inferenceSession = new InferenceSession(modelPath, sessionOptions);
        });
    }

    private async void UploadButton_Click(object sender, RoutedEventArgs e)
    {
        var window = new Window();
        var hwnd = WinRT.Interop.WindowNative.GetWindowHandle(window);

        var picker = new FileOpenPicker();

        WinRT.Interop.InitializeWithWindow.Initialize(picker, hwnd);

        picker.FileTypeFilter.Add(".png");
        picker.FileTypeFilter.Add(".jpeg");
        picker.FileTypeFilter.Add(".jpg");

        picker.ViewMode = PickerViewMode.Thumbnail;

        var file = await picker.PickSingleFileAsync();
        if (file != null)
        {
            UploadButton.Focus(FocusState.Programmatic);
            await DetectObjects(file.Path);
        }
    }

    private async Task DetectObjects(string filePath)
    {
        Loader.IsActive = true;
        Loader.Visibility = Visibility.Visible;
        UploadButton.Visibility = Visibility.Collapsed;

        DefaultImage.Source = new BitmapImage(new Uri(filePath));

        Bitmap image = new(filePath);

        var predictions = await Task.Run(() =>
        {
            // Resizing image ==> Suggested that height and width are in range of [800, 1333].
            float ratio = 800f / Math.Max(image.Width, image.Height);
            int width = (int)(ratio * image.Width);
            int height = (int)(ratio * image.Height);

            var paddedHeight = (int)(Math.Ceiling(image.Height / 32f) * 32f);
            var paddedWidth = (int)(Math.Ceiling(image.Width / 32f) * 32f);

            var resizedImage = BitmapFunctions.ResizeBitmap(image, paddedWidth, paddedHeight);
            image.Dispose();
            image = resizedImage;

            // Preprocessing
            Tensor<float> input = new DenseTensor<float>([3, paddedHeight, paddedWidth]);
            input = BitmapFunctions.PreprocessBitmapForObjectDetection(image, paddedHeight, paddedWidth);

            // Setup inputs and outputs
            var inputMetadataName = _inferenceSession!.InputNames[0];
            var inputs = new List<NamedOnnxValue>
            {
                NamedOnnxValue.CreateFromTensor(inputMetadataName, input)
            };

            // Run inference
            using IDisposableReadOnlyCollection<DisposableNamedOnnxValue> results = _inferenceSession!.Run(inputs);

            // Postprocess to get predictions
            var resultsArray = results.ToArray();
            float[] boxes = resultsArray[0].AsEnumerable<float>().ToArray();
            long[] labels = resultsArray[1].AsEnumerable<long>().ToArray();
            float[] confidences = resultsArray[2].AsEnumerable<float>().ToArray();
            var predictions = new List<Prediction>();
            var minConfidence = 0.7f;
            for (int i = 0; i < boxes.Length - 4; i += 4)
            {
                var index = i / 4;
                if (confidences[index] >= minConfidence)
                {
                    predictions.Add(new Prediction
                    {
                        Box = new Box(boxes[i], boxes[i + 1], boxes[i + 2], boxes[i + 3]),
                        Label = RCNNLabelMap.Labels[labels[index]],
                        Confidence = confidences[index]
                    });
                }
            }

            return predictions;
        });

        BitmapImage outputImage = BitmapFunctions.RenderPredictions(image, predictions);

        DispatcherQueue.TryEnqueue(() =>
        {
            DefaultImage.Source = outputImage;
            Loader.IsActive = false;
            Loader.Visibility = Visibility.Collapsed;
            UploadButton.Visibility = Visibility.Visible;
        });

        image.Dispose();
    }
}

As you would imagine, running this application on Windows (WinAppSdk) doesn’t look much different that the exported application.

What’s a little misleading here is that whilst all the different Uno Platform target platforms build, if we attempt to run the application on other targets, we’ll run into some issues. In the next post in this series we’ll look at what’s not compatible with cross platform targets and how we can improve this sample code to get this object detection sample to work on other platforms.

The post Adding AI to an Uno Platform Application using AI Dev Gallery appeared first on Nick's .NET Travels.

Recently, Microsoft announced an open-sourced project that they’ve been working on, AI Dev Gallery. Whilst it’s not available on the Microsoft Store as an app you can download, it’s easy enough to clone the repository and run the app. In this post we’ll use the AI Dev Gallery to build a simple Windows application that can detect objects in an image.

Let’s get started by running the AI Dev Gallery.

At the core, the application makes use of a NavigationView to switch between Home, Samples and Models. There’s also a search box in the TitleBar that can be used to search samples or models. For example searching for ‘object’ returns “Detect Objects”, a sample that makes use of the Faster RCNN 10 model to detect objects in images.

In the top right corner, there are buttons for showing the Code for the sample, and to Export a project that includes the sample code, and optionally the model.

The exported project can be opened and run in Visual Studio. You can select an image and any objects detected will be highlighted with a red box and a title showing the object type and confidence level.

In the next post we’ll take the sample code and add it into an Uno Platform application so that we can take it cross platform.

The post Using the AI Dev Gallery to Create a Windows Application with AI appeared first on Nick's .NET Travels.

The post Windows UI Kit for Figma appeared first on Nick's .NET Travels.

We’ll start by creating a new application using the Uno Platform Template Wizard from within Visual Studio. If you’re not using Visual Studio, you can generate the appropriate “dotnet new” commandline via the online wizard at https://new.platform.uno/. We’re going to go with the default “Recommended” preset and click the Create button.

Once the application has been created, we’re going to add a chat client to the application. The Recommended preset already sets the application up to use the Microsoft.Extensions hosting, which means we can register both the OpenAIClient and a ChatClient. Before we can do that, we need to add references to the Microsoft.Extensions.AI and Microsoft.Extensions.AI.OpenAI packages.

The OpenAIClient and ChatClient can be registered in the App.xaml.cs by amending the ConfigureService call to add an OpenAIClient as a singleton and a ChatClient using the AddChatClient extension method.

.ConfigureServices((context, services) =>
{
    services.AddSingleton(new OpenAIClient(context.Configuration["AI:OpenAI:Key"]));
    services.AddChatClient(c => {
        var openAIClient = c.Services.GetRequiredService<OpenAIClient>();
        var modelId = context.Configuration["AI:OpenAI:Chat:ModelId"] ?? "gpt-4o-mini";
        return c.Use(openAIClient.AsChatClient(modelId));
    });
})

This code relied on a couple of configuration values that define the OpenAI API Key and the OpenAI Chat Model. These can be added to the appsettings.json as follows.

{
  "AppConfig": {
    "Environment": "Production"
  },
  "AI": {
    "OpenAI": {
      "Key": "[your-openai-api-key]",
      "Chat": {
        "ModelId": "gpt-4o-mini"
      },
      "Embedding": {
        "ModelId": "text-embedding-3-small"
      }
    }
  }
}

Next up is to add some code to the MainModel that will call the CompleteAsync method on the IChatClient instance in order to get a chat response to the Message. The following code uses MVUX, which automatically routes the Message state into the message parameter on the GetChatResponse method.

public partial record MainModel
{
    private IChatClient _chat;
    public MainModel(
        IChatClient chat)
    {
        _chat = chat;
    }

    public IState<string> Message => State<string>.Value(this, () => string.Empty);
    public IState<string> Response => State<string>.Value(this, () => string.Empty);

    public async Task GetChatResponse(string message)
    {
        var result = await _chat.CompleteAsync(message, cancellationToken: default);
        await Response.UpdateAsync(x => result.Message.Contents.LastOrDefault()?.ToString(), default);
    }
}

Lastly, the XAML needs to be updated to accept the Message and output the Response.

<TextBox Text="{Binding Message, Mode=TwoWay}"
          PlaceholderText="Enter your message:" />
<Button Content="Get Response"
        Command="{Binding GetChatResponse}" />
<TextBlock Text="{Binding Response}" />

And there we have it, adding AI into an application is as simple as registering services in the ConfigureService method and then adding IChatClient as a dependency to the MainModel. There are various Azure AI and Github AI services that can be added using a similar mechanism.

The post Adding AI to a Windows and Uno Platform Application using Microsoft.Extensions.AI appeared first on Nick's .NET Travels.

In XMAL a DataTemplate is used in order to control the way that a piece of data is displayed. Typically the first place that a new XAML developers will come across is an ItemTemplate in a ListView, where a DataTemplate is used to define how each item in a list is displayed. However, there are other template properties where a DataTemplate can be used. Sticking with a ListView, the HeaderTemplate and FooterTemplate can be used to control how the Header and Footer data are displayed. For example:

<ListView Header="Products">
  <ListView.HeaderTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding}"
                  FontSize="42" />
    </DataTemplate>
  </ListView.HeaderTemplate>

More often than not, the HeaderTemplate property isn’t used, with the XAML instead being added directly to the Header property.

<ListView DataContext="Products">
  <ListView.Header>
      <TextBlock Text="{Binding}"
                  FontSize="42" />
  </ListView.Header>
</ListView>

Another example of where a DataTemplate can be used is with a Button. Let’s start with the following XAML that defines a Button with a SymbolIcon inside a ViewBox.

<Button
    Width="200"
    Height="200">
    <Viewbox>
        <SymbolIcon
            Margin="20"
            Symbol="Accept" />
    </Viewbox>
</Button>

This yields a simple icon button where the icon is scaled based on the size of the Button.

Now if we want to resuse this layout but don’t want to go all the way to overriding the Button Style/ControlTemplate, we can move the XAML into a DataTemplate and then set it via the ContentTemplate property.

<StackPanel>
  <StackPanel.Resources>
    <DataTemplate x:Key="IconButtonTemplate">
      <Viewbox>
        <SymbolIcon Margin="20"
                    Symbol="{Binding}" />
      </Viewbox>
    </DataTemplate>
  </StackPanel.Resources>

  <Button Width="200"
          Height="200"
          Content="Accept"
          ContentTemplate="{StaticResource IconButtonTemplate}" />
  <Button Width="200"
          Height="200"
          Content="Cancel"
          ContentTemplate="{StaticResource IconButtonTemplate}" />
</StackPanel>

The Content set on the Button becomes the DataContext inside the DataTemplate, meaning that it will be set as the Symbol property via the Binding expression.

The last way that we’ll cover in this post is where you simply want to reuse blocks of XAML without wanting to attach any additional functionality (such as additional properties, or custom logic and behaviors). For this you can again define a DataTemplate, and use it anywhere in your application using a ContentPresenter.

<ContentPresenter
    Content="Accept"
    ContentTemplate="{StaticResource IconButtonTemplate}" />

Alternatively you can use a ContentControl, which in this scenario delivers the same result. However, the ContentControl class is really designed to be the base class for custom controls, rather than being used explicitly in your application layout. The default ContentTemplate of a ContentControl uses a ContentPresenter in order to display the Content. As such, if all you’re doing is reusing XAML, using the ContentPresenter directly is a simpler approach.

In this post we’ve touched on using DataTemplate for reusing blocks of XAML in your application. If you need to associate logic or behaviour with the XAML you’re reusing, you’ll need to consider building a UserControl or custom control.

The post XAML Reuse with Templates in Applications for Windows and the Uno Platform appeared first on Nick's .NET Travels.

The first thing to do is to locate the resources and styles that ship with the Windows App Sdk. These are conveniently located in the Microsoft.WindowsAppSdk package that can be found in your nuget packages folder (assuming you’ve created/loaded/restored a Windows App Sdk based application). Here’s the default location:

C:\Users\<usrename>.nuget\packages\microsoft.windowsappsdk

Side note – if you haven’t already checked it out, I would recommend setting up a Dev Drive, which you can do via Dev Home. After setting up a Dev Drive, you can move your nuget packages folder and cache to your Dev Drive (see instructions).

Within the the Microsoft.WindowsAppSdk package folder, you need to drill into a version folder, and then further into the lib folder, and then keep going until you find the generic.xaml file, located in the Themes folder. For example here’s the full path fo the 1.5.240627000 version of the Windows App Sdk.

1.5.240627000\lib\net6.0-windows10.0.18362.0\Microsoft.WinUI\Themes\generic.xaml

This file is a standard XAML (ie XML) file, so you can open it in any code editor. I typically open it in VS Code as I find it easier to search and navigate the file, since it provides some rudimentary XML color coding and the ability to expand/collapse XML elements.

ThemeResources

The generic.xaml file contains nothing more than a dictionary of resources, that are included by default in a Windows App Sdk application that uses Windows UI. The file begins with a set of three ThemeDictionaries, Default (aka Dark), HighContrast and Light.

As you can imagine, based on the names of these theme dictionaries, they define resources that should be used when the host system is set to dark (ie the default theme) or light (for applications), or if the high contrast accessibility option is enabled. Note that within your application, you can override the system theme by setting the RequestedTheme on elements within your application. This can be useful if you want to provide users with the option to specify a particular theme for your application but don’t forget to give them the option to revert back to the system theme.

The other interesting thing to note about theme resources is that they can be overridden at any level using a technique called light weight styling.

If you expand any of the theme dictionaries, you’ll see that it defines low level resources such as FontFamily, Min/Max Width/Height, Opacity, Thickness, Color and a lot of Brushes.

Following the themedictionaries there are some othe constant values resources that are defined. It’s not expected that these will be altered based on the theme and it doesn’t seem possible to override the resources and have the updated value take effect within the built in templates and styles.

Templates and Styles

The next section of the file defined DataTemplate and Style elements that control the look and feel of the built in Windows UI elements. For any given control type, there may be more than on Style defined but there can only be one default Style. Let’s take the Button control for example. There are multiple named (explicit) styles that have a TargetType of Button (or ButtonBase): AccentButtonStyle, EllipsisButton, …, and DefaultButtonStyle. It’s important to note that just because a style has been named DefaultButtonStyle, doesn’t make it the default style for a Button. It’s the definition of an implicit (unnamed) style that determines the default style for a Button.

<Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}" />

If we drill into the DefaultButtonStyle we can see that it starts with a number of property setters, that define the default property values set by the Style, and that can be overridden on an instance of the Button.

<Style x:Key="DefaultButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
    <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />

Note that a lot of these properties are set to be a theme resource. This means that the property can either be updated by setting the property directly on the Button instance, or it be changed by redefining the theme resource.

One of the properties being set is the Template property, which defines a ControlTemplate.

<Style x:Key="DefaultButtonStyle" TargetType="Button">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <ContentPresenter x:Name="ContentPresenter" ... >
                    <ContentPresenter.BackgroundTransition>
                        <BrushTransition Duration="0:0:0.083" />
                    </ContentPresenter.BackgroundTransition>
                    <VisualStateManager.VisualStateGroups>
                    ...
                    </VisualStateManager.VisualStateGroups>
                </ContentPresenter>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The Button ControlTemplate is relatively straightforward, being mostly made up of a ContentPresenter, essentially a host control for the Content defined on the Button instance. What’s been cropped in the above XAML for brievity is that the ContentPresenter has properties such as BorderThickness, BorderBrush and Background, which means that the Button ControlTemplate doesn’t need to define a separate element to draw a border or set the background on the content.

The other block of XAML that has been cropped in the above ControlTemplate are the VisualStateGroups for the Button. In fact there is only one VisualStateGroup, CommonStates, that defines the main interaction states of the Button, Normal, PointerOver, Pressed and Disabled. If you’re familiar with other flavours of XAML you might be wondering where the visual state group is for the focus states of the Button. These states aren’t defined by default because by default the Button style sets the UseSystemFocusVisuals property to true, meaning that focus visuals are applied by the system. If you want to provide custom focus visuals, set the UseSystemFocusVisuals property to false, and define a new visual state group with states, Focused, Unfocused and PointerFocused.

The following XAML shows the Normal state (which represents the default/rest state of the Button) and the PointerOver (ie when the mouse hovers over the control) state. The PointerOver state defines both some Storyboard and a property Setter. The first Storyboard (the others have been cropped for brevity) changes the Background on the ContentPresenter to the ButtonBackgroundPointerOver theme resource.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="PointerOver">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />
                </ObjectAnimationUsingKeyFrames>
                ...                
            </Storyboard>
            <VisualState.Setters>
                <Setter Target="ContentPresenter.(controls:AnimatedIcon.State)" Value="PointerOver" />
            </VisualState.Setters>
        </VisualState>

The important thing to note about how Styles are defined for controls is that it provides a way that you as a developer can override the look and feel of any of the controls. You can clone the existing Style and make any changes to either the property setters, or the ControlTemplate. You don’t need to clone the entire Style, instead you can base your new Style on the built-in Style (by setting the BasedOn attribute) and then only override the properties you want to modify.

<Style x:Key="CustomButtonStyle"
        TargetType="Button"
        BasedOn="{StaticResource DefaultButtonStyle}">
  <Setter Property="Padding"
          Value="40" />
</Style>

In summary the take away points are that if you want to understand the default control styles for Windows UI (and Uno Platform) you can inspect the generic.xaml file. You can also see from this file the additional styles that are available for a control. You can use this information to override theme resources, to make changes to the theme of your application. Lastly you can use these styles as the basis for your custom control styles.

The post Understanding Styles and Resources in Windows and Uno Platform Applications appeared first on Nick's .NET Travels.

Button Component

We’re going to jump to the Basic Input page and look at the Button component. At the top of the Button section of the page, there’s a brief description of the element, followed by a “Copy me” section.

If you want to make use of a control in your design, you can select the element from the “Copy me” section and use copy and paste to create a new instance on your design. Alternatively, you can find the control in the Assets window. From the Assets window, you can drag the control directly onto your design. Alternatively, if you click on the control, you’ll be presented with the list of Properties you can select before clicking the Insert Instance button.

Each of the Properties correlates to a variant of the component and can either be selected prior to inserting an instance, or afterwards via the element properties window.

Button Variants

Let’s return to the Basic input page and take a look at the next section, Variants. This section defines the different overall layouts for the Button

Style: The Style property determines the overall Button style such as Accent, Standard (ie Default) or Subtle

Layout: The different Layout options include Text only, Icon, Icon before and after text

Size: The Size options are Standard and Compact

Note that there are a number of “Design Preview Only” badges that have been applied under the variant title. These badges indicate that there are variant options that are not included in the standard fluent styles that ship with Windows UI.

Main Components

The next section, Main Components, provides a visual guide to some of the different combinations of variants of the Button.

Going down the page are the variants that relate to the layout of the Button such as Style, Layout and Size. Again, there are some variants that are marked as Design Preview Only, so these don’t correlate to actual styles that ship with Windows UI.

Each variant is shown in dark and light mode to illustrate how the Button would look in dark and light theme respectively.

Across the page are the variants that relate to the states of the Button. These are represented by two properties, Focus and State. The State property has values Rest, Hover, Pressed and Disabled. The Focus property is a boolean value.

Variants in XAML

Now that we have a bit of an understanding how components and variants are defined in Figma for the Button control, let’s look at how this relates to the way the Button control is defined in XAML. The built-in/default styles for controls that are part of Windows UI / Windows App Sdk are included in the generic.xaml file included int Microsoft.WindowsAppSdk nuget package (eg c:\Users\[User]\.nuget\packages\microsoft.windowsappsdk\1.5.240627000\lib\net6.0-windows10.0.18362.0\Microsoft.WinUI\Themes\generic.xaml).

The Style variant property correlates to the different Button styles, AccentButtonStyle (Accent) and DefaultButtonStyle (Normal). The Subtle variant included in the Figma file is marked as Design Preview Only as it doesn’t exist in the styles that ship with the Windows App Sdk.

If we take a look at the DefaultButtonStyle, which is also the implicit, or default, style for a Button, we can see that there are different visual states that map to the variants defined by the State property: Normal (Rest), PointerOver (Hover), Pressed and Disabled.

The last variant property is Focus. This isn’t represented by visual states since Windows UI controls have an option to UseSystemFocusVisuals (see documentation for how system focus visuals work)

In this post we’ve seen that the Windows UI Figma file defines the visual styles of the controls that ship with Windows UI and the Windows App Sdk. We’ve seen that the component variants aligns to styles and visual states for XAML controls, and that there some variants that are only defined in the Figma file.

The post How Figma Component Variants map to XAML Visual States in Windows UI appeared first on Nick's .NET Travels.

We’re going to start with a new application created using the Uno Platform Template Wizard from within Visual Studio. Using the recommended preset, the only change is to check the Web option for Authentication (I’ve also opted to go with Mvvm for this sample but Mvux will work just as well)

Settings

We’ll start by updating the AppSettings to include information we’ll need. In order to authenticate with Figma you’ll need to register an application. Navigate to the MyApps tab in the Figma developer portal. Add an new application and make note of the generated ClientId, ClientSecret and the Callback url (to support device authentication we’ve added a protocol base callback, btrfigma://callback)

This information can be used to populate the appsettings.json (or the appsettings.development.json for debug) file. The following json can be used but make sure you update the AppConfig values according to the application you’ve registered with Figma.

{
  "AppConfig": {
    "ClientId": "{figma client id}",
    "ClientSecret": "{figma client secret}",
    "RedirectUri": "btrfigma://callback"
  },
  "WebAuthentication": {
    "LoginStartUri": "https://www.figma.com/oauth?client_id={0}&redirect_uri={1}&scope=files:read,file_comments:write&response_type=code",
    "AccessTokenKey": "code"
  },
  "FigmaAuthClient": {
    "Url": "https://www.figma.com",
    "UseNativeHandler": true
  },
  "FigmaApiClient": {
    "Url": "https://api.figma.com",
    "UseNativeHandler": true
  }
}

We’ll need to modify the AppConfig class to replace the Environment property with ClientId, ClientSecret and RedirectUri

public record AppConfig
{
    public string? ClientId { get; init; }
    public string? ClientSecret { get; init; }
    public string? RedirectUri { get; init; }
}

Note that in addition to the AppConfig section, there are three additional sections:

• WebAuthentication – This is used by Uno.Extensions web configuration to define the url used to start the login process. The inclusion of the redirect_uri parameter will automatically be used to determine the end of the web authentication process
• FigmaAuthClient – The initial web authentication process will return a code to the application. This needs to be converted into access and refresh tokens by calling the token endpoint, which is part of the oauth endpoint off www.figma.com
• FigmaApiClient – The Figma apis for retrieving information about figma files are defined on a different base uri, api.figma.com

This information will be used in the subsequent sections as we complete the configuration for the application.

Configuration

There are three main additions that need to be made to the configuration of the application defined in app.xaml.cs: Registering Auth Endpoint, Registering Api Endpoint, Configuring Web Authentication.

Registering Auth Endpoint

In order to register an endpoint that can be called by the application, the first thing to do is to create an interface that defines the path and parameters for the request. The IFigmaAuthClient interface includes two methods, GetToken and GetRefreshToken.

[Headers("Content-Type: application/json")]
public interface IFigmaAuthClient
{
    [Post("/api/oauth/token?client_id={clientId}&client_secret={clientSecret}&redirect_uri={redirectUri}&code={code}&grant_type=authorization_code")]
    Task<AuthResponse> GetToken(string clientId, string clientSecret, string redirectUri, string code, CancellationToken cancellationToken = default);

    [Post("/api/oauth/refresh?client_id={clientId}&client_secret={clientSecret}&refresh_token={refreshToken}")]
    Task<AuthResponse> GetRefreshToken(string clientId, string clientSecret, string refreshToken, CancellationToken cancellationToken = default);
}

public record AuthResponse(long user_id, string access_token, string refresh_token, long expires_in);

In app.xaml.cs update the .UseHttp method as follows:

.UseHttp((context, services) => services
    // Register HttpClient
#if DEBUG
    // DelegatingHandler will be automatically injected into Refit Client
    .AddTransient<DelegatingHandler, DebugHttpHandler>()
#endif
    .AddRefitClient<IFigmaAuthClient>(context))

Registering Api Endpoint

The api endpoint is defined in the same way as the auth endpoint.

[Headers("Content-Type: application/json")]
public interface IFigmaApiClient
{
    [Get("/v1/me")]
    Task<FigmaUser> GetMe(CancellationToken cancellationToken = default);
}

public class FigmaUser
{
    [JsonPropertyName("id")]
    public string Id { get; set; }

    [JsonPropertyName("email")]
    public string Email { get; set; }

    [JsonPropertyName("handle")]
    public string Handle { get; set; }

    [JsonPropertyName("img_url")]
    public string ImageUrl { get; set; }
}

And the registration:

.UseHttp((context, services) => services
    // Register HttpClient
#if DEBUG
    // DelegatingHandler will be automatically injected into Refit Client
    .AddTransient<DelegatingHandler, DebugHttpHandler>()
#endif
    .AddRefitClient<IFigmaAuthClient>(context)
    .AddRefitClient<IFigmaApiClient>(context)
    )

Configuring Web Authentication

The bulk of the complexity for authenticating with Figma is handled within the web authentication configuration which requires defining three different callbacks on the builder exposed by the AddWeb extension method.

.UseAuthentication(auth =>
    auth.AddWeb(name: "WebAuthentication", configure: builder =>
    {
        // Define PrepareLoginStartUri, PostLogin and Refresh callbacks     
    })
)

First up is the PrepareLoginStartUri method, which is used to add ClientId and RedirectUri to the parameterized loginUri to return the uri that will be used to launch the web authentication process.

builder.PrepareLoginStartUri((IServiceProvider sp, ITokenCache cache, IDictionary<string, string>? credentials, string loginUri, CancellationToken ct) =>
{
    var appConfig = sp.GetRequiredService<IOptions<AppConfig>>().Value;
    return ValueTask.FromResult(string.Format(loginUri, appConfig.ClientId, appConfig.RedirectUri));
})

Next up, the PostLogin method, which converts the code returned by the web authentication process into access and refresh tokens.

.PostLogin(async (sp, cache, credentials, tokens, ct) =>
{
    var figma = sp.GetRequiredService<IFigmaAuthClient>();
    var appConfig = sp.GetRequiredService<IOptions<AppConfig>>().Value;
    var code = tokens[TokenCacheExtensions.AccessTokenKey];

    var authData = await figma.GetToken(appConfig.ClientId, appConfig.ClientSecret, appConfig.RedirectUri, code, ct);
    if (authData is null)
    {
        return tokens;
    }
    tokens[TokenCacheExtensions.AccessTokenKey] = authData.access_token;
    tokens[TokenCacheExtensions.RefreshTokenKey] = authData.refresh_token;
    tokens["ExpiresIn"] = authData.expires_in.ToString();
    tokens["UserId"] = authData.user_id.ToString();
    return tokens;
})

Lastly, the Refresh method, which uses the refresh token returned as part of the login process to create a new access token. This is called each time the application is launched, or when an api call fails with an authorization error, to get a new access token. If the call to Refresh method fails, the application will be automatically logged out, requiring the user to complete the web authentication process again.

.Refresh(async (sp, cache, tokens, ct) =>
{
    try
    {
        var figma = sp.GetRequiredService<IFigmaAuthClient>();
        var appConfig = sp.GetRequiredService<IOptions<AppConfig>>().Value;
        var refreshToken = tokens[TokenCacheExtensions.RefreshTokenKey];

        var authData = await figma.GetRefreshToken(appConfig.ClientId, appConfig.ClientSecret, refreshToken, ct);

        if (authData is null)
        {
            return tokens;
        }
        tokens[TokenCacheExtensions.AccessTokenKey] = authData.access_token;
        tokens["ExpiresIn"] = authData.expires_in.ToString();
        return tokens;
    }
    catch
    {
        return tokens;
    }
});

Callback Protocol

In order for authentication to work, you need to make sure you update the myprotocol protocol setup when the application was created using the Uno Platform template with the protocol used in the application defined with Figma. In the case of this application we’ll replace myprotocol with btrfigma (You can simply do a find and replace all in Visual Studio to make sure you update this value for all platforms).

Application Code

Now that we have the application configured, we can make use of api endpoint within our application. The MainViewModel has been updated as follows:

public partial class MainViewModel : ObservableObject
{
    private IAuthenticationService _authentication;

    private IFigmaApiClient _figma;

    [ObservableProperty]
    private FigmaUser? _user;

    public MainViewModel(
        IAuthenticationService authentication,
        IDispatcher dispatcher,
        INavigator navigator,
        IFigmaApiClient figma)
    {
        _authentication = authentication;
        _figma = figma;
        _ = LoadUserProfile(dispatcher);
    }

    private ValueTask LoadUserProfile(IDispatcher dispatcher)
        => dispatcher.ExecuteAsync(async ()=> User = await _figma.GetMe());


    [RelayCommand]
    private async Task DoLogout(CancellationToken token)
    {
        await _authentication.LogoutAsync(token);
    }
}

And the XAML for MainPage.

<Page x:Class="FigmaWebSampleApp.Presentation.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:FigmaWebSampleApp.Presentation"
      xmlns:uen="using:Uno.Extensions.Navigation.UI"
      xmlns:utu="using:Uno.Toolkit.UI"
      xmlns:um="using:Uno.Material"
      NavigationCacheMode="Required"
      Background="{ThemeResource BackgroundBrush}">

  <Grid utu:SafeArea.Insets="VisibleBounds">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>
    <utu:NavigationBar Content="{Binding Title}" />

    <StackPanel Grid.Row="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Spacing="16">
      <Image Height="100"
             Width="100"
             Source="{Binding User.ImageUrl}" />
      <TextBlock Text="{Binding User.Id}" />
      <TextBlock Text="{Binding User.Email}" />
      <Button Content="Logout"
              Command="{Binding LogoutCommand}" />
    </StackPanel>
  </Grid>
</Page>

Summary

Now we have all the pieces setup to run the application, login to Figma and return information about the current Figma user in the application.

Whilst it appears there’s a few steps to setup to get this to work, this is significantly simpler that having to create a web authentication flow from scratch and then having to interact with HttpClient to do the code to token hand off and the subsequent refreshing of tokens. Note that what’s abstracted here is that the access token is automatically passed as part of the calls to the api endpoint, with no extra code required!

The post Using Web Authentication (OAuth2) to access Figma from Windows and Uno Platform Application appeared first on Nick's .NET Travels.

Fluent

Let’s start with the Fluent design system, which is the default for Windows UI / Windows App Sdk based applications. Since the Uno Platform extends Windows UI cross platform, Fluent is also the default design for cross platform applications developed using the Uno Platform

Microsoft has a Fluent Figma file specifically for Windows UI, Windows UI 3, which is can be used as a starting point for designers wanting to use Fluent as the basis of the Windows or Uno Platform application design.

Whilst there’s no explicit tooling available for exporting designs out of the Fluent Figma file, if designs stick to using the predefined components, converting the Figma design into XAML is a relatively straight forward task. One useful trick that makes it easy to determine spacing/positioning of elements is to hold down the the ALT key when an element is selected. As you then move the mouse across other elements, Figma will show lines and labels indicating the distance between the elements.

Material

For Material there are plenty of Figma design files out there but for building Windows applications the best Figma file to use is the Material Toolkit offered by the Uno Platform.

What distinguishes the Material Toolkit from other Figma design files is that it has been specifically designed to work with Windows UI and the Uno Platform. This means that you can design your application using the Material Toolkit and export either XAML or C# Markup using the Uno Platform (Figma to C# or XAML) Plugin.

Depending on which design system you want to use for your application you can pick the appropriate Figma design file to start your application. Bothe design files have been created with Windows UI in mind and as such will work for designing both Windows and Uno Platform cross platform applications.

The post Using Figma to Develop Windows and Uno Platform Applications appeared first on Nick's .NET Travels.

Ok, so let’s backup a little – firstly, Swagger / OpenAPI (see description) is used to describe service endpoints. For example, let’s create a new application, KiotaSampleApp, using the Uno Platform Template Wizard by selecting the Blank preset, and then enable the Server option under Features.

This will generate both an Uno Platform application, as well as a Server project, which will contain a basic WeatherForecast service. If you run the Server project and navigate to https://localhost:5002/swagger/index.html, you’ll see the following Swagger UI that let’s you browse and interact with the WeatherForecast service.

At the top of the page, there is a link to the generated json file that defines the service endpoints, https://localhost:5002/swagger/v1/swagger.json.

Whilst there’s a lot of references to “Swagger”, as you can see at the top of the json document, the first property, openapi, has a value 3.0.1, indicating that the json conforms to version 3.0.1 of the OpenAPI specification. This means that it can be used by Kiota to generate client code (see documentation)

Before we start generating code in our Uno Platform application, we first need to add some package references. Either use the NuGet package manager to add the following packages, or run the dotnet commands to add references to the KiotaSampleApp project.

dotnet add package Microsoft.Kiota.Abstractions
dotnet add package Microsoft.Kiota.Http.HttpClientLibrary
dotnet add package Microsoft.Kiota.Serialization.Form
dotnet add package Microsoft.Kiota.Serialization.Json
dotnet add package Microsoft.Kiota.Serialization.Text
dotnet add package Microsoft.Kiota.Serialization.Multipart

Now that we have the references, we need to install and run the Kiota tool. There are various ways to install Kiota (see documentation); for this post I went with installing Kiota as a .NET tool.

dotnet tool install --global Microsoft.OpenApi.Kiota

Once installed, you can invoke Kiota from the command line. Make sure you have the Server project running, so that Kiota can access the swagger.json file. Run the following command from within the KiotaSampleApp project directory.

kiota generate -l CSharp -c WeatherClient -n KiotaSampleApp.Client -d https://localhost:5002/swagger/v1/swagger.json -o ./Client

The generated client files will be automatically included in the KiotaSampleApp, so all you have to do is write some code to use the WeatherClient, as follows:

private async void LoadWeatherClick(object sender, RoutedEventArgs e)
{
    // API requires no authentication, so use the anonymous
    // authentication provider
    var authProvider = new AnonymousAuthenticationProvider();
    // Create request adapter using the HttpClient-based implementation
    var adapter = new HttpClientRequestAdapter(authProvider, httpClient: new HttpClient());
    // Create the API client
    var client = new WeatherClient(adapter);
    adapter.BaseUrl = "https://localhost:5002";
    // GET /posts
    var weather = await client.Api.Weatherforecast.GetAsync();
    Console.WriteLine($"Retrieved {weather?.Count} forecasts.");
}

Important Note: When creating the HttpClientRequestAdapter, this code is creating an instance of the HttpClient. This is required to avoid an “System.PlatformNotSupportedException: Operation is not supported on this platform” error that occurs when attempting to create an instance of the SocketsHttpHandler, when running as a WebAssembly (WASM) application. It’s not required for other target platforms.

As you can see from this example, getting started with Kiota is relatively straight forward and means that you can easily generate code for accessing services defined by a Swagger or OpenAPI endpoint.

The post Add some Swagger to your Windows and Uno Platform application using Kiota and OpenAPI appeared first on Nick's .NET Travels.

My previous post gave a simple definition of a region as being an abstraction for any element in the application that’s capable of navigating (ie displaying) a view. The default (recommended) preset in the Uno Platform Solution Wizard uses a Frame to navigate between two pages but there are other types of regions. Regions are linked in a hierarchy that matches the hierarchy found in the visual tree within the application. As we get into discussing how routes are processed, the importance of this hierarchy will become evident.

The other thing to know about regions is that they have a corresponding INavigator implementation. The region itself, doesn’t include any control specific implmentation, instead it’s the corresponding INavigator that contains all the smarts to navigate with the specified control.

Here’s a quick list of the supported element types and the corresponding navigator:

• Frame – FrameNavigator – Navigates forward to new pages, or back to previous pages. The FrameNavigator also responds to when the Frame navigates, which means navigation can be initialised by the Frame. For example, on mobile device, a swipe will navigate to a previous page on a Frame, without the developer writing any navigation logic.
• ContentControl – ContentControlNavigator – Navigates by creating a new instance of the view and setting it as the Content on the ContentControl. Note that if the view is a page, a Frame is injected, along with a corresponding FrameNavigator, and used to navigate to the page. This means that if the page then attempts to navigate to another page, it will automatically have a back stack, making it possible to navigate back to the original page.
• ContentDialog – ContentDialogNavigator – If the view that you’re navigating to inherits from ContentDialog, the navigation will be treated as a dialog navigation (as if you’d prefixed the navigation route with the ! prefix) and the view will be displayed as a ContentDialog.
• Flyout – FlyoutNavigator – If the view that you’re navigating to inherits from Flyout, the navigation will be treat as a dialog navigation. Alternatively, you can prefix any navigation with ! and it will be treated as a dialog navigation with the view hosted inside a Flyout.
• MessageDialog – MessageDialogNavigator – If the navigation route is a predefined MessageDialog, or you’ve used the MessageDialog navigation extension methods, a MessageDialog will be displayed.
• NavigationView – NavigationViewNavigator – A selector based navigator where the navigation route will select a menu item in the NavigationView. Selector based navigators also listen for changes on the control and will initiate a new navigation based on the selected item.
• TabBar – TabBarNavigator – A selector based navigator (similar to NavigationViewNavigator)
• Panel – PanelVisibilityNavigator – Navigates by hiding and showing children of the Panel based on the Name assigned to them. If there is no child that matches the navigation route, and a view can be determines from the route (either from a RouteMap, or via reflection) a new instance will be created and added to the Panel. Again, if the view is a Page, a Frame will be injected first, and use to navigate to the Page. Note that this Navigator is not registered for implicit use, meaning that just because you nominate a Panel as a navigation Region (by adding the Region.IsAttached="true" attached property to the Panel), it won’t use the PanelVisibilityNavigator. To use this Navigator, you need to also set the Region.Navigator="Visibility"
• Popup – PopupNavigator – Navigates by hiding or showing the corresponding popup
• DrawerControl – DrawerControlNavigator – Navigaes by hiding or showing the corresponding DrawerControl.

The base class, Navigator, is also a valid Navigator and will be used if no other Navigator can be resolved. For example if you set Region.IsAttached="true" on a Panel, by default the Navigator class will be used. When the base Navigator class is used directly, it exhibit a slightly different behavior, acting to combine, or link, nested Regions. You can think of the Navigator acting as a composite Navigator, meaning that any navigation request that is set to it, will be forwarded to the Navigator instances for the child Regions.

An example of this composite behavior can be found in the Uno Platform documentation for Uno.Extensions Navigation that shows how to use the TabBar control (see example). Here’s a reduced snippet of the XAML.

<Page x:Class="UsingTabBar.Views.MainPage" ... >
    <Grid uen:Region.Attached="True">
        <Grid uen:Region.Attached="True"
              uen:Region.Navigator="Visibility">
            <Grid uen:Region.Name="One"  Visibility="Collapsed">
                <TextBlock Text="One" />
            </Grid>
            <Grid uen:Region.Name="Two"  Visibility="Collapsed">
                <TextBlock Text="Two" />
            </Grid>
            <Grid uen:Region.Name="Three" Visibility="Collapsed">
                <TextBlock Text="Three" />
            </Grid>
        </Grid>
        <utu:TabBar  uen:Region.Attached="True">
            <utu:TabBar.Items>
                <utu:TabBarItem uen:Region.Name="One" />
                <utu:TabBarItem uen:Region.Name="Two" />
                <utu:TabBarItem uen:Region.Name="Three" />
            </utu:TabBar.Items>
        </utu:TabBar>
    </Grid>
</Page>

The first Grid is set as a Region and will use the Navigator. The second Grid is set as a Region and will use the PanelVisibilityNavigator. The TabBar is set as a Region and will use the TabBarNavigator. Navigation request set to the Navigator will be forwarded to the other two Navigators. When the selected TabBarItem is changed, a navigation request is forwarded up to the Navigator which is then sent back to both child Navigators (the TabBarNavigator ignores the request since the correct TabBarItem is already selected).

In this post we’ve started to touch on the different Navigators and how they’re used within the Region based navigation system provided by Uno.Extensions. In subsequent posts we’ll look at more examples for the different Navigators.

The post What’s a Navigation Region in Windows and Uno Platform Applications? appeared first on Nick's .NET Travels.

We’ll kick of this post by creating a new application using the Uno Platform Template Wizard. If you just want to build for Windows, you can just pick Windows from the Platforms tab in the Wizard. For the purpose of this post we’ll go with the Recommended preset, which will create a XAML based Material themed application that uses both MVUX (a Reactive pattern for state management) and region based navigation (i.e. Uno.Extensions with Navigation).

If we run up the generated application, clicking the button will navigate from MainPage to SecondPage.

Unlike an application that you’d get if you used the Blank App template for WinUI/Windows App SDK, if you look in App.xaml.cs you won’t see the creation of a Frame or explicit calls to Navigate to MainPage. If you look inside ShellModel you’ll see there’s a Start method that’s invoked from the constructor, which invokes the NavigateViewModelAsync method, specifying the MainModel.

public async Task Start()
{
    await _navigator.NavigateViewModelAsync<MainModel>(this);
}

I’m not going to go into detail right now about ViewMap and RouteMap but if you look in App.xaml.cs you’ll see there are three ViewMap instances defined that match pages and models. In this case MainModel is associated with MainPage, which is how Navigation knows to navigate to the MainPage from the call to NavigateViewModelAsync.

So the next question is, where’s the Frame that’s being used to navigate between MainPage and SecondPage. One of the built in capabilities of Navigation is that if you attempt to navigate to a Page but there’s no Frame, a new Frame will be created and used to navigate. We’ll come back to this when we look at how NavigationView works but in the context of a new application, a Frame is created and used for navigation.

The follow up question is how does this newly created Frame get added to the application. To answer this, let’s step through the startup sequence for the application.

• An instance of the App class gets created
• The overridden App.OnLaunched method is invoked, which kicks of the initialization sequence for the application.
• An IApplicationBuilder instance is create by calling CreateBuilder and then a sequence of extension methods is invoked to register services etc. Note that these extension methods are very quick to execute because they don’t do much other than to register other callbacks for when Build is invoked.
• There are a couple of extension methods invoked on MainWindow to enable hot reload (in DEBUG) and to set the Window icon
• The NavigateAsync method is called on the IApplicationBuilder, specifying the UIElement that should be used as the root element of the application, in this case Shell.
• Inside the NavigateAsync method, a new instance of Shell will be created and set as the Content for the Window of the application. At this point the Window is activated so that the application appears and shows the progress indicator that’s part of the Shell.
• Build is invoked on the IApplicationBuilder, which calls Build on internally held IHostBuilder in order to create the IHost instance. Note that this is done after the instance of Shell is created to avoid any delays in displaying the application.
• After the IHost instance has been created, an instance of ShellModel is created (as this is the first RouteMap defined for the application), which in turn calls NavigateViewModelAsync to navigate to the MainModel.
• As there’s currently no Frame available, a new Frame is created and added to the Content property of the ContentControl specified by the Shell. In this case the ExtendedSplashScreen is returned – once all the startup logic has completed, the ExtendedSplashScreen will change states from displaying the LoadingContent, to displaying the Content
• The Navigate method on the Frame is invoked in order to navigate to the MainPage

As you can see from this sequence, there’s quite a few steps that are abstracted away through the use of Navigation, coupled with the Shell / ExtendedSplashScreen control.

Navigating from MainPage to SecondPage can be done a number of different ways. When the application is created from the template, the navigation is invoked by calling the NavigateViewModelAsync method via code in the MainModel (1 in the code below).

public async Task GoToSecond()
{
    var name = await Name;

    // 1 - Navigate based on Model/ViewModel
    await _navigator.NavigateViewModelAsync<SecondModel>(this, data: new Entity(name!));
    // 2 - Navigate to a view
    await _navigator.NavigateViewAsync<SecondPage>(this, data: new Entity(name!));
    // 3 - Navigate based on Data
    await _navigator.NavigateDataAsync(this, new Entity(name!));
}

Other alternative methods are NavigateViewAsync, where you can specify the type of view (in this case SecondPage) that you want to navigate to, and NavigateDataAsync where you specify an data instance and Navigation works out which view to navigate to based on the registered ViewMap instances.

You can also invoke navigation from either the codebehind or in XAML. Here’s an example of both:

Codebehind

private async void NavigateSecondPageClick(object sender, RoutedEventArgs e)
{
    await this.Navigator().NavigateViewModelAsync<SecondModel>(this);
}

XAML

<Button Content="Go to Second Page"
        uen:Navigation.Request="Second" />

As you can see from these code examples the navigation methods exist on an INavigator instance that is either passed into the constructor of a Model/ViewModel, or can be retrieved using the Navigator() extension method. You can think of an INavigator as being the controller for navigation for a particular Region. A Region is a logical abstraction for an element within the application responsible for navigating between views. In this case the Frame that was created during startup is a Region and there is a corresponding FrameNavigator instance that is used to control, and respond to, navigation on the Frame. It’s the FrameNavigator instance that’s injected into the MainModel constructor which is subsequently used to navigate to SecondPage.

In this post we’ve covered how Navigation works during application startup and discussed in brief the concept of a Region. I’ll continue this discussion in the next post where we look in more detail at other types of Regions and how they relate to each other.

The post Navigation using Regions in Windows and Uno Platform Applications appeared first on Nick's .NET Travels.

Let’s get started with a new application. In the Uno Platform Template Wizard, I’ve selected the Blank preset and then customized if by checking the .NET MAUI Embedding option under Features.

If you’ve used the wizard previously, you’ll notice that there’s one less steps as you no longer have to pick between the two presets before addiving at the customization screen. The presets are still there, they’re located in the top left corner, immediately below the name of the application you’re creating. After selecting a preset, if you start to customize the options, you’ll notice a third Custom option appears – you can switch between this option and the presets to compare, before clicking Create to complete the creation of your application.

The newly created application is significantly simpler with the 5.2 release of the Uno Platform where the various target platforms are now available via a single project (in the past, each target platform had its own project – this is still supported, so don’t feel you need to urgently change to the new structure!!!).

Because we’re using .NET MAUI Embedding, there’s a second project, which is a .NET MAUI library. This project is where we’ll reference any .NET MAUI third party control libraries and where we can customize any .NET MAUI elements we want to add to the application.

To get started with Syncfusion, right-click the MauiControls library and select Manage NuGet Packages. Search for “syncfusion maui” and select the library that you want to install. In this case we’re going to be using adding a data grid, so we’ll install the Syncfusion.Maui.DataGrid package.

After installing the package reference we can start to make use of the controls provided by Syncfusion. If you’re not familiar with the third party controls, Syncfusion provide some great getting started documentation. We’ll get started by walking through the Get Started with .NET MAUI DataGrid (SfDataGrid) documentation.

We’ve already completed steps 1 and 2, which is to create a new application and add a reference to Syncfusion.Maui.DataGrid. The next step is to add the namespace and an instance of the SfDataGrid control to the XAML file. In this case, you need to make sure you’re adding this to a XAML file in the MauiControls (.NET MAUI) project not the main application (Uno Platform) project. The MauiControls project already has an EmbeddedControl.xaml, so we’ve updated it to create an instance of the SfDataGrid control.

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SyncfusionDemoApp.MauiControls.EmbeddedControl"
             HorizontalOptions="Fill"
             VerticalOptions="Fill"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid">
  <syncfusion:SfDataGrid />
</ContentView>

Note: since we’ve removed all the existing elements in the EmbeddedControl, it’s important to also clear up any code in the codehind file (by default there’s an event handler, which updates the text on a button).

namespace SyncfusionDemoApp.MauiControls;

public partial class EmbeddedControl : ContentView
{
    public EmbeddedControl()
    {
        InitializeComponent();
    }
}

The next step is to register the handler, which is done by calling the ConfigureSyncfusionCore method. Unlike in a .NET MAUI application where this is done in the CreateMauiApp method, in .NET MAUI Embedding, this should be done in the UseMauiControls method in the AppBuilderExtensions class.

using Syncfusion.Maui.Core.Hosting;

namespace SyncfusionDemoApp;

public static class AppBuilderExtensions
{
    public static MauiAppBuilder UseMauiControls(this MauiAppBuilder builder) =>
        builder
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("Assets/Fonts/OpenSansRegular.ttf", "OpenSansRegular");
                fonts.AddFont("Assets/Fonts/OpenSansSemibold.ttf", "OpenSansSemibold");
            })
            .ConfigureSyncfusionCore();
}

In order for the SfDataGrid to show any data, it needs to be bound to some data. There is an example provided in the Syncfusion docs. We’ll add the OrderInfo and OrderInfoRepository to the MauiControls project (both added to the Models namespace).

We can create an instance of the OrderInfoRepository and assign it as the BindingContext as part of the XAML for defining the SfDataGrid. The following XAML was taken from the Syncfusion documentataion.

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SyncfusionDemoApp.MauiControls.EmbeddedControl"
             HorizontalOptions="Fill"
             VerticalOptions="Fill"
             xmlns:local="clr-namespace:SyncfusionDemoApp.Models"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid">
  <syncfusion:SfDataGrid x:Name="dataGrid"
                         ItemsSource="{Binding OrderInfoCollection}">

    <syncfusion:SfDataGrid.BindingContext>
      <local:OrderInfoRepository x:Name="viewModel" />
    </syncfusion:SfDataGrid.BindingContext>

    <syncfusion:SfDataGrid.Columns>
      <syncfusion:DataGridNumericColumn HeaderText="Order ID"
                                        Format="0"
                                        MappingName="OrderID"
                                        Width="150" />
      <syncfusion:DataGridTextColumn  HeaderText="Customer ID"
                                      MappingName="CustomerID"
                                      Width="150" />
      <syncfusion:DataGridTextColumn  HeaderText="Ship Country"
                                      MappingName="ShipCountry"
                                      Width="150" />
    </syncfusion:SfDataGrid.Columns>
  </syncfusion:SfDataGrid>
</ContentView>

Some minor changes to note:

• The SfDataGrid is added directly to the ContentView, whereas in the Syncfusion docs it’s added to the Control property on the ContentPage
• The BindingContext is set directly on the SfDataGrid, whereas in the Syncfusion docus it’s added as the BindingCotnext on the ContentPage
• The local namespace was added to the ContentView in order to access the classes in the Models namespace.

At this point you’ve done everything required to embed a Syncfusion DataGrid into your application. Unfortunately, there’s a known issue with the Windows App Sdk where you may see and error “The parameter is incorrect. This element does not have a XamlRoot. Either set the XamlRoot property or add the element to a tree.“

This error is a result of the trial license key notification that Syncfusion displays if you haven’t provided a valid license key. There are two work arounds:

• Provide a License Key

public static class AppBuilderExtensions
{
    public static MauiAppBuilder UseMauiControls(this MauiAppBuilder builder)
    {
        SyncfusionLicenseProvider.RegisterLicense("---mylicensekey---");
        return builder
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("Assets/Fonts/OpenSansRegular.ttf", "OpenSansRegular");
                fonts.AddFont("Assets/Fonts/OpenSansSemibold.ttf", "OpenSansSemibold");
            })
            .ConfigureSyncfusionCore();
    }
}

• Set the Source property on the MauiHost in Loaded event

Remove the Source property from the MauiHost element in the MainPage XAML, and attach an event handler to the Loaded event on the MauiHost.

<Page x:Class="SyncfusionDemoApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:SyncfusionDemoApp"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:maui="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:not_maui="http://notmaui"
      mc:Ignorable="d not_maui"
      xmlns:controls="using:SyncfusionDemoApp.MauiControls"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <StackPanel HorizontalAlignment="Center"
              VerticalAlignment="Center">
    <TextBlock AutomationProperties.AutomationId="HelloTextBlock"
               Text="Hello Uno Platform"
               HorizontalAlignment="Center" />
    <maui:Grid>
      <embed:MauiHost x:Name="MauiHostElement"
                      xmlns:embed="using:Uno.Extensions.Maui"
                      Loaded="MauiHostElementLoaded" />
    </maui:Grid>
    <not_maui:Grid>
      <TextBlock AutomationProperties.AutomationId="NotMauiTextBlock"
                 Text="Alternative content for Non-Maui targets"
                 HorizontalAlignment="Center" />
    </not_maui:Grid>
  </StackPanel>
</Page>

In the codebehind, set the Source property on the MauiHost

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void MauiHostElementLoaded(object sender, RoutedEventArgs e)
    {
        if (sender is MauiHost mauiHost)
        {
            mauiHost.Source = typeof(EmbeddedControl);
        }
    }
}

Now you can run the application and you should see the Syncfusion License dialog appear.

Click OK to proceed to the application where the SfDataGrid will appear.

In this post we’ve walked through adding a Syncfusion SfDataGrid to your application. This process is the same for any of the Syncfusion Maui controls – most have similar getting started guides that walk you through creating a simple example with data so that you can see it in action. For other component vendors that have .NET MAUI controls, the process is similiar: add package reference; initialise the library in the UseMauiControls method and add XAML/C# to create and populate the control in the EmbeddedControl XAML file.

The post Using Syncfusion Controls in Uno Platform Application using MAUI Embedding. appeared first on Nick's .NET Travels.

One of the pieces of feedback that we received regarding the wizard was that developers were presented with two options, “Blank” and “Recommended,” and it wasn’t clear that these were simply presets for the various options in the Uno Platform new application template. For anyone who’s looked at the unoapp template that’s included in the dotnet new template (Install from NuGet) you’ll know that there are a lot of options, so the aim was to provide starting points that make it easier for developers to get started. The new experience combines the two main pages of the application into a single page.

At the top of the left column you’ll see a new “Presets” selection which allows you to toggle between the Blank and Recommended options. As you switch between them, the selections in the main area, and the Summary, are updated, so you can see what’s included in each. Of course, you can still decide to customise the options, at which point you’ll see a third option appear, “Custom”.

This allows you to easily compare what you’ve selected with either the Blank or Recommended options by switching between them. If you want to reset your Custom selection, simply click on Blank or Recommended and then start changing the options; the wizard will treat this as your new Custom configuration.

Once you’re done with making your selection, hit the Create button and a new solution will be created for you. The following was created using the Recommended option, so there are a few folders illustrating how files can be arrange but the important thing is that it’s a single project.

To pick which target you want to debug, click the down arrow next to the run button to see the list of startup targets

There’s plenty more to explore in the 5.2 release, so grab the Visual Studio Wizard, or check out the live wizard. If you’re using VS Code, the extension for VS code has also been updated to work with the new single project structure.

The post Uno Platform 5.2 Released – One Project To Rule Them All appeared first on Nick's .NET Travels.

Let’s start by creating a new Uno Platform application – as a teaser, we’re going to be using the new Uno Platform wizard and project template that is just about to be published in the coming week. This means that some of the screenshots will be blurred in patches to avoid spoiling the surprises that will come with the release.

In the wizard, we’re going to select the Recommended preset configuration and then from Extensions we’re going to remove the Http and Localization options, mainly because we don’t need them in this application. The Microsoft Azure.AI.OpenAI library isn’t able to directly use the Http factory capabilities of Microsoft.Extensions, so for now, we’ll uncheck the Http option.

Configuration for API Key

Once the application has been created, the first thing we’re going to do is to add the API key (see my previous post where I talk about where to get the OpenAI API key) to the appsettings.json file. Since we might be using a different API key for development, we’re actually going to add the key to the appsettings.development.json file. This file is only loaded when the hosting environment is set to Development. There’s conditional logic in setup of the application that sets the hosting environment to Development when the build configuration is Debug.

{
  "AppConfig": {
    "Environment": "Development",
      "ApiKey": "<your api key>"
  }
}

In order for the ApiKey to be read, the AppConfig class needs to be extended with a property, ApiKey, that aligns with the key used in the json file.

public record AppConfig
{
    public string? Environment { get; init; }
    public string? ApiKey { get; init; }
}

Settings for AI Model

When using the Azure.AI.OpenAI library you can pick the AI service model that you want to use. A full list of these can be found in the documentation.

To allow the user to pick the AI model they want to use, we’re going to add a Settings page to our application. We’ll also rename the SecondPage of our application to ChatPage, and the corresponding model from SecondModel to ChatModel. Then we’ll tie these pages together with a NavigationView to navigate between them.

NavigationView

We’ll update the MainPage to include a NavigationView.

<Page x:Class="SimpleChat.Presentation.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:SimpleChat.Presentation"
      xmlns:uen="using:Uno.Extensions.Navigation.UI"
      xmlns:utu="using:Uno.Toolkit.UI"
      xmlns:um="using:Uno.Material"
      NavigationCacheMode="Required"
      Background="{ThemeResource BackgroundBrush}">

  <Grid utu:SafeArea.Insets="VisibleBounds">
    <NavigationView x:Name="NavView"
      uen:Region.Attached="True"
      Loaded="NavViewLoaded">
      <NavigationView.MenuItems>
        <NavigationViewItem Content="Chat" uen:Region.Name="Chat"/>
        <!-- Hack: This is to ensure a Settings item is picked up by the Navigator for NavigationView -->
        <NavigationViewItem Content="Settings" uen:Region.Name="Settings" Visibility="Collapsed"/>
      </NavigationView.MenuItems>

      <Grid uen:Region.Attached="True"
            uen:Region.Navigator="Visibility">
      </Grid>
    </NavigationView>
  </Grid>
</Page>

We also need to add the NavViewLoaded method in the codebehind file.

private void NavViewLoaded(object sender, RoutedEventArgs e)
{
    if (sender is NavigationView navView &&
        navView.SettingsItem is FrameworkElement settingsItem)
    {
        Region.SetName(settingsItem, "Settings");
    }
}

So there’s a couple of things to break down here. Firstly, we’re using the Uno.Extensions.Navigation which is a navigation abstraction provided by Uno.Extensions. One of the limitations of the current support for NavigationView is that it doesn’t handle the SettingsItem on the NavigationView. There’s a couple of hacks we need to do in order to get it to work:

• In the codebehind, we’re going to use the Region.SetName method to set the Region.Name attached property on the SettingsItem. Unfortunately, the SettingsItem in the NavigationView is readonly, so we can’t set it to be a new NavigationViewItem in XAML where we could set the Region.Name attached property.
• Currently, the support for NavigationView looks at the list of MenuItems to determine the selected item. Since the SettingsItem isn’t in this list, clicking the SettingsItem would navigate to the Settings page but would do it at the MainPage level, rather than placing the SettingsPage inside the NavigationView. The workaround here is to add an additional NavigationViewItem to the MenuItems with the same Region.Name attached property but set it to Collapsed.

SettingsPage

We’re going to use the SettingsPage to provide the user with a way to pick the AI service model they want to use in the chat. First, we’ll start with the layout that will include a ComboBox to pick the service model.

<Page
    x:Class="SimpleChat.Presentation.SettingsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:SimpleChat.Presentation"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:uen="using:Uno.Extensions.Navigation.UI"
    xmlns:um="using:Uno.Material"
    xmlns:utu="using:Uno.Toolkit.UI"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <utu:NavigationBar Content="Settings Page" />

        <StackPanel
            Grid.Row="1"
            Spacing="12">
            <TextBlock Text="AI Model" />
            <ComboBox
                ItemsSource="{Binding ServiceModels}"
                SelectedItem="{Binding SelectedServiceModel, Mode=TwoWay}" />
        </StackPanel>
    </Grid>
</Page>

There’s no code in the codebehind file. Instead all the logic is encapsulated in the ServiceModel.

public partial class SettingsModel
{
    private readonly IWritableOptions<SettingsInfo> _settings;

    public string[] ServiceModels { get; } =
        [
            "gpt-35-turbo",
            "gpt-4",
            .......
        ];

    public IState<string> SelectedServiceModel => State<string>.Value(this, () => _settings.Value.ServiceModel?? "gpt-4-1106-preview");

    public SettingsModel(IWritableOptions<SettingsInfo> settings)
    {
        _settings = settings;

        SelectedServiceModel.ForEachAsync(async (serviceModel, ct) =>
        {
            await _settings.UpdateAsync(settings => settings with { ServiceModel = serviceModel });
        });
    }
}

The list of available service models is exposed by the ServiceModels property, which is data boudn to the ItemsSource property on the ComboBox. The SelectedServiceModel property is an IState (making use of the MVUX state management pattern that’s part of Uno.Extensions) and is two-way data bound to the SelectedItem property on the ComboBox.

In the constructor for the SettingsModel, a SettingsInfo instance is received which is used to retrieve the current ServiceModel and subsequently to write back the new value when the user changes the selected service model.

For this to work, we need to register the SettingsInfo type in the setup of the application.

public record SettingsInfo
{
    public string? ServiceModel { get; init; }
}

// App configuration
.UseConfiguration(configure: configBuilder =>
    configBuilder
        .EmbeddedSource<App>()
        .Section<AppConfig>()
        .Section<SettingsInfo>()
)

Using the Service Model in Chat

Now that we have the API key being provided via appsettings.json and a SettingsPage to pick the AI model, let’s reuse the code from the previous post to provide a simple chat interface.

<Page x:Class="SimpleChat.Presentation.ChatPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:SimpleChat.Presentation"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:uen="using:Uno.Extensions.Navigation.UI"
      xmlns:utu="using:Uno.Toolkit.UI"
      xmlns:um="using:Uno.Material"
      Background="{ThemeResource BackgroundBrush}">

  <Grid utu:SafeArea.Insets="VisibleBounds">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>
    <utu:NavigationBar Content="Chat Page">
      <utu:NavigationBar.MainCommand>
        <AppBarButton>
          <AppBarButton.Icon>
            <BitmapIcon UriSource="ms-appx:///Assets/Images/back.png" />
          </AppBarButton.Icon>
        </AppBarButton>
      </utu:NavigationBar.MainCommand>
    </utu:NavigationBar>
    <StackPanel Grid.Row="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
      <TextBox Text="{Binding Query, Mode=TwoWay}" />
      <Button Content="Send"
              Command="{Binding Send}" />
    </StackPanel>
    <TextBlock Text="{Binding Response}"
               Grid.Row="2" />
  </Grid>
</Page>

And the ChatModel

public partial record ChatModel(
    Entity Entity,
    IOptions<AppConfig> Config,
    IOptions<SettingsInfo> Settings)
{
    public IState<string> Query => State<string>.Value(this, () => "Explain AI");

    public IState<string> Response => State<string>.Value(this, () => string.Empty);

    public async Task Send(string query)
    {
        var response = await GetChatGPTResponseAsync(query);
        await Response.SetAsync(response);
    }

    private async Task<string> GetChatGPTResponseAsync(string query)
    {
        var client = new OpenAIClient(Config.Value.ApiKey);

        var completionOptions = new ChatCompletionsOptions
        {
            DeploymentName = Settings.Value.ServiceModel,
        };

        completionOptions.Messages.Add(new ChatRequestUserMessage(query));

        var resp = await client.GetChatCompletionsAsync(completionOptions);

        if (resp?.Value?.Choices.FirstOrDefault() is { } response &&
            response.Message?.Content is { } responseMessage)
        {
            return responseMessage;
        }
        return "No response";
    }
}

Running this provides a basic interface for asking ChatGPT and getting a response using the AI service model picked via the SettingsPage.

Summary

In this post we’ve seen how navigation using a NavigationView can be used to switch between SettingsPage and ChatPage. We’ve also used Configuration to read information from appsettings.json and Settings to capture the AI service model selected by the user. This is the starting point for a chat style application with source code available on GitHub.

The post Switching AI Models with ChatGPT in a Windows and Uno Platform Application appeared first on Nick's .NET Travels.

Prerequisite – OpenAI API Key

If you want to follow along, you’ll need to head to https://platform.openai.com/api-keys and generate or retrieve your API key. If you don’t already have an OpenAI account, you’ll need to create one and sign in, in order to access your API key.

Step 1: Create your Windows and Uno Platform App

For this post we’re going to create a cross platform, or multi-platform, application using the Uno Platform template wizard (if you’re not using Visual Studio, you can grab the uno.templates dotnet new templates package and use the unoapp template). I’m going to pick the Recommended option (use “-preset recommended” if running dotnet new unoapp) and proceed without customizing it.

Step 2: Install the Azure.AI.OpenAI Library

In the main project of your application, install the Azure.AI.OpenAI library using NuGet Package Manager or the Package Manager Console. Use the following command:

Install-Package Microsoft.Azure.AI.OpenAI -IncludePrerelease

Step 3: Connect to ChatGPT

Now, let’s integrate ChatGPT into the app. Create a method to interact with ChatGPT. Here’s an example method that sends a user query to ChatGPT and retrieves a response:

private async Task<string> GetChatGPTResponseAsync(string query)
{
    var client = new OpenAIClient("OpenAI API Key");

    var completionOptions = new ChatCompletionsOptions
    {
        DeploymentName = "gpt-4-1106-preview",
    };

    completionOptions.Messages.Add(new ChatRequestUserMessage(query));

    var resp = await client.GetChatCompletionsAsync(completionOptions);

    if (resp?.Value?.Choices.FirstOrDefault() is { } response &&
        response.Message?.Content is { } responseMessage)
    {
        return responseMessage;
    }
    return "No response";
}

Replace "OpenAI API Key" with your OpenAI API Key.

Step 4: Integrate with Your App

In the UI for the app, add a text box for user input (data bound to the Query property) and a text block (data bound to the Response property) to display the ChatGPT response. Use the following code to handle user input and display the response:

public IState<string> Query => State<string>.Value(this, () => string.Empty);

public IState<string> Response => State<string>.Value(this, () => string.Empty);

public async Task Send(string query)
{
    var response = await GetChatGPTResponseAsync(query);
    await Response.SetAsync(response);
}

Step 6: Test Your App

Build and run your app. Enter a query into the text box and submit it. Your app should display a response from ChatGPT based on the user’s query.

Conclusion

By following these steps, you’ve successfully connected your Windows and Uno Platform app to ChatGPT using the Microsoft Azure.AI.OpenAI library. This integration opens up a world of possibilities for enhancing user interactions with intelligent responses. Experiment with different queries and see how ChatGPT can enrich your app’s functionality.

The post Connecting Your Windows and Uno Platform App to ChatGPT with Azure.AI.OpenAI appeared first on Nick's .NET Travels.

Application Dependencies

Let’s start by talking about dependencies in general. The minute you run File, New Project and select a template to create your application from, you’re immediately buying into a set of dependencies. For example, take a minimal example of a console application, which you’d assume, given it’s simplicity, that it has almost no dependencies. This is basically correct but you are still taking a dependency on .NET. This is evident when you go to package and distribute the application where you’re givens options on how you want to reference the framework (see Application Publishing for more information).

Once we start to look at a Windows application (and here I’m referring to an application built using Windows UI and the Windows App SDK), the list of dependencies increases. The Windows App SDK has it’s own documentation on deployment options.

Now if we go cross platform with the Uno Platform, this adds not only the dependencies for .NET for iOS, Android, MacCatalyst but also the runtime for WASM and then the abstraction layer of Uno itself.

All of this before we even get to writing our application and deciding which third party dependencies we need to add. For example, if you want to add maps to your application you might use MapsUI, and for charts you can add LiveCharts. For more advanced controls that may not be offered natively for Uno, you can add any of the controls written for .NET MAUI such as those from Syncfusion, Grial Kit, Telerik, DevExpress, Esri, Grape City, and of course, the .NET MAUI Community Toolkit.

Updating Dependencies

As a general rule of thumb, applications that you’re going to be releasing either via the web, or via one of the app stores, should only reference stable releases of dependencies. For the purposes of this post when I talk about a stable release, I’m just referring about a release that isn’t marked as preview, beta, dev or any other non-numeric suffix (eg 1.5.0-dev is not a stable release, whereas 1.6.3 is). Of course, there may be times when you’re waiting on a bug fix, that you might reference a preview/beta/dev version of a dependency but when you go to publish your application, you should do so only with references to stable release.

The question then becomes when should you update your dependencies:

• Should you only update when there are security updates?
• Or perhaps only when there are major versions?
• Or perhaps only when you require a feature that’s in a newer version?
• What’s the benefit to updating more or less frequently?

These are just some of the questions that you should consider when deciding on a policy for your team as to when to update dependencies.

Let’s start with a quick discussion as to why you wouldn’t update dependencies as soon as they’re available. This often falls into a couple of buckets:

• Not aware of new versions – If you’re in this bucket, then you probably haven’t started using dependabot (or equivalent). I would highly recommend using a service like dependabot so you know as soon as there is a dependency available, afterall, you can’t make a decision about something that you’re not aware of.
• Unscheduled work – There’s no scope in the backlog for the current release to update to the latest dependency and test it to make sure it hasn’t caused any regressions. Whilst a lot of updates will be relatively benign, there may be some that require significant rework.

The latter is probably one of the main reasons that so many teams don’t frequently update their dependencies. Each time you update a dependency, there’s a risk that it will impact your application. It might be as subtle as changing the time it takes for a method to execute, resulting in cascading effects within the application, or it maybe that a dependency changes signficiantly as part of a new major version, resulting in the application logic being reworked to accommodate the change in behaviour. In all of these scenarios, there’s extra work that subsequently needs to go into testing the application to ensure no existing functionality is broken.

Always Update Dependencies

Ok, so at this point I’m going to make a bold statement that you should always update all dependencies as soon as they become available.

Let’s revisit the above issues that tend to drive delays to updating dependencies, starting with not being aware that updates exist. In this space, having a tool such as dependabot gives you almost immediate notification that there’s a new dependency, along with a PR that increases the version to the latest dependency. Whilst I wouldn’t say these tools are amazing, they do a sufficient job to make you aware of new dependency versions. I say that they’re not amazing because I’ve often seen cases where there are multiple related dependencies that have a new version but they get raised as independent PRs, making it harder than it needs to be to increment them. It’s not hard to cherry-pick commits from various PRs into a single PR but it’s extra work that could potentially be avoided.

Of course, just creating PRs to increment the version is only part of the story. With a suitable CI pipeline, there should be strong confidence that changing a dependency won’t break the application. If an update to a dependency causes one or more tests to fail, or perhaps the build itself fails, this will drive developers to update the application for the updated dependency.

Now we’re into the territory of unscheduled work, where dependency updates are causing the team to have to focus on modifying the application for no other reason than because a dependency changed. In some cases, the updated dependency has some intrinsic benefit to the application, for example better performance, that can be used to justify the effort required to update the application. However, in a lot of cases, updating dependencies won’t affect the application in any significant way. This begs the question as to why it’s important to update dependencies?

Lazy Dependency Updating

To answer the question of why updating dependencies is important, let’s take the reverse position of only updating dependencies when necessary. There may be a variety of reasons that require a dependency to be updated, for example new features, bug fixes (for bugs that manifest themselves in the application) and security concerns in the version used by the application. The underlying rule is to only update dependencies when there is a justifable reason to.

So the issue is that, like code that you have inside your application where it will naturally evolve with your application, dependencies evolve over time too. If you don’t pick up dependencies as they become available, it’s a bit like having a long running, stale, branch; at some point you’re going to have to rebase and/or mege the branch back to main. With dependencies, at some point in the future you will inevitably need to update them, and then you’ll experience the full pain of having to update through not one or two minor updates but possibly multiple major version updates, depending on how long it was since you updated. This could result in massive rework of your application and in most cases more timeconsuming as you work out what the migration path should be between versions. Now, multiply this by the number of dependencies you have and you can quite easily see this is where this strategy fails.

Interdependencies

To make matters worse, often the dependencies for your application will have interdependencies between them. Further, those relationships will be based on certain version of the dependencies, and not all combinations of the dependency versions will work nicely together.

If you take the lazy updating approach, you’ll find that you will have to bulk update to the latest changes, with perhaps no simple migration path for your code. Alternatively, you can incrementally attempt to update dependencies and having to balance or match any interpdendencies – at this point you’ll be wanting to reconsider life choices, well at least choices pertaining to updating dependencies.

Looking Forward using Canaries

In addition to using tools like dependabot, which typically will be used to highlight stable version updates, another technique is to use canary builds. By this I mean having a dedicated branch to building a version of your application using the absolute latest (including dev, beta, preview etc versions) of each dependency. A separate build process would be configured to run the same build pipeline you do for your application but using the canary branch. The basic approach is:

• Check out the canary branch
• Update source code to latest main but merging in all changes
• Update package references to latest version of dependencies
• Run regular build pipeline including all tests

Having this periodically run, perhaps once a day, will give you an even earlier heads up for when new dependencies might cause issues for your application. There may be specific workarounds you need to apply in order to keep your application building/running. The workarounds can be pushed to the canary branch until the stable version of those dependencies are available. At that point, the workarounds can be applied to the main source code branch for the application without much additional effort.

Summary

In this post I’ve covered some of the pros and cons of eager and lazy dependency updating. Hopefully for your application you’ve thought about this and have a strategy that works for you and your team.

The post Managing Dependencies in Windows and Cross Platform Applications appeared first on Nick's .NET Travels.

A simple implementation of the ConditionalDataTemplateSelector would be as follows.

[ContentProperty(Name = nameof(Templates))]
public class ConditionalDataTemplateSelector : DataTemplateSelector
{
    public string? ConditionalProperty { get; set; }
    public IList<ConditionalTemplate> Templates { get; } = new List<ConditionalTemplate>();

    protected override DataTemplate? SelectTemplateCore(object item, DependencyObject container)
    {
        if (item is MainViewModel.Item viewModelItem)
        {
            var value = viewModelItem.GetType().GetProperty(ConditionalProperty!)?.GetValue(viewModelItem);
            var template = Templates.FirstOrDefault(t => t.Value is not null && ( t.Value.Equals(value) || t.Value.Equals(value+string.Empty)))?.ValueTemplate;
            return template as DataTemplate;
        }

        return base.SelectTemplateCore(item, container);
    }
}
[ContentProperty(Name = nameof(ValueTemplate))]
public partial class ConditionalTemplate
{
    public DataTemplate? ValueTemplate { get; set; }

    public object? Value { get; set; }
};

Here we can see that the ConditionalDataTemplateSelector has two properties: ConditionalProperty which is the name of the property on the source item to look up the current value, and Templates which is a list of ConditionalTemplate. As we can see from the class definition the ConditionalTemplate has a ValueTemplate property which represents the DataTemplate and a Value property which is the value for which this DataTemplate would be selected.

Ok, this probably sounds all very theoretical, so let’s see this in action in a simple example. Firstly, some C# that shows the MainViewModel, which exposes an array of Item, which is made up of a Name and Status, where Status is an Enum with values None, Loading and Loaded.

public class MainViewModel
{
    public enum Status
    {
        None,
        Loading,
        Loaded
    }

    public class Item
    {
        public string? Name { get; set; }
        public Status Status { get; set; }
    }

    public Item[] Items { get; } = [
        new Item { Name = "Item 1", Status = Status.None },
        new Item { Name = "Item 2", Status = Status.Loading },
        new Item { Name = "Item 3", Status = Status.Loaded }
    ];
}

Now the XAML. Here we are defining three different DataTemplate that are appropriately keyed as NoneTemplate, LoadingTemplate and LoadedTemplate.

<Page x:Class="DataTemplateSelectorApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:DataTemplateSelectorApp"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Page.Resources>
    <DataTemplate x:Key="NoneTemplate">
      <TextBlock Text="None"/>
    </DataTemplate>
    <DataTemplate x:Key="LoadingTemplate">
      <TextBlock Text="Loading...."/>
    </DataTemplate>
    <DataTemplate x:Key="LoadedTemplate">
      <TextBlock Text="{Binding Name}"/>
    </DataTemplate>
    <local:ConditionalDataTemplateSelector
      x:Key="ConditionalSelector"
      ConditionalProperty="Status">
      <local:ConditionalTemplate
        ValueTemplate="{StaticResource NoneTemplate}"
        Value="None" />
      <local:ConditionalTemplate
        ValueTemplate="{StaticResource LoadingTemplate}"
        Value="Loading" />
      <local:ConditionalTemplate
        ValueTemplate="{StaticResource LoadedTemplate}"
        Value="Loaded" />
    </local:ConditionalDataTemplateSelector>
  </Page.Resources>

  <ListView ItemsSource="{Binding Items}"
            ItemTemplateSelector="{StaticResource ConditionalSelector}"/>
</Page>

The ConditionalDataTemplateSelector resource specifies the Status property to be inspected on each element and then for each ConditionalTemplate a corresponding Value is specified. As the ListView renders each item in the Items array, the ConditionalSelector will be invoked. The Status property on the Item will be inspected and the value compared to the Value of each ConditionalTemplate. If there’s a match, the corresponding DataTemplate will be returned.

Here’s a rather uninspiring picture of this sample app running, showing each of the three DataTemplate being returned.

As we’ve seen in this post it is possible to build a generic template selector that is able to pick between any number of templates based on some conditional value. The only downside with this implementation is that it does leverage reflection at runtime to retrieve the value on the bound object. I’m sure that it would be possible using source code generation to generate strongly typed code that would replace the reflection based implementation.

The post Conditional Template Selector for XAML Applications for Windows and Uno Platform appeared first on Nick's .NET Travels.

ChatGPT

We’ll start by using ChatGPT (in this case ChatGPT v3.5) and use the following prompt:

You’re a XAML source code generator for building applications using the Windows App SDK and Windows UI. Generate XAML code the a page that shows a Login prompt made up of a username and password and remeber me fields

ChatGPT responds with XAML as shown in the following image.

This can either be added to an existing application as a new page, of in my case I copied everything except the outer Page element and inserted it into the Window of a blank application.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="App5.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App5"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock Text="Login" FontSize="24" Margin="0,0,0,20"/>

        <StackPanel Orientation="Horizontal" Margin="0,0,0,10">
            <TextBlock Text="Username:" VerticalAlignment="Center" Margin="0,0,10,0"/>
            <TextBox x:Name="UsernameTextBox" PlaceholderText="Enter your username"/>
        </StackPanel>

        <StackPanel Orientation="Horizontal" Margin="0,0,0,10">
            <TextBlock Text="Password:" VerticalAlignment="Center" Margin="0,0,10,0"/>
            <PasswordBox x:Name="PasswordBox" PlaceholderText="Enter your password"/>
        </StackPanel>

        <CheckBox x:Name="RememberMeCheckBox" Content="Remember me" Margin="0,0,0,10"/>

        <Button Content="Login" Click="LoginButton_Click" Width="100" HorizontalAlignment="Center"/>
    </StackPanel>
</Window>

I already had the application running, so when I hit save (I also needed to create the LoginButton_Click event handler in the code behind file) it refreshed the UI of the running application.

GitHub Copilot for Visual Studio

To use GitHub Copilot from within Visual Studio you’ll need to install the extension via the Extension Manager.

Once install, GitHub Copilot will volunteer suggestions as you type. It will also respond to prompts entered via comments. Let’s see this in action, starting with a blank application.

Let’s use a similar prompt to the one we used with ChatGPT entered as a XAML comment:

Press Enter to move to the next line and wait a second or two and GitHub Copilot will kick in and offer a suggestion for XAML

Press Tab to insert the suggested XAML. Repeat this again to have Copilot suggest the closing Grid tag and then save the file in order to trigger hot reload.

Summary

What was interesting about this experiment was that despite GitHub Copilot being optimised for developer tasks, the generated UI wasn’t as good as the UI generated using ChatGPT. I wasn’t able to try v4 of ChatGPT but I can only imagine that the generation has improved even more.

What’s interesting about this simple eperiment is that is that it shows the potential for generative AI to really accelerate application development.

The post Using ChatGPT and GitHub Copilot to Generate the XAML for your Windows application appeared first on Nick's .NET Travels.

Uno Platform Material Toolkit

Whilst a lot of the magic of Figma tooling offered by the Uno Platform comes via the plugin, for example the generation of XAML and C# Markup that can be exported, the value of the Material Toolkit shouldn’t be underestimated. The Uno Platform Material Toolkit isn’t alone in the Figma community when it comes to design files that provide a starting point for designing applications that use the Material design language. However, what differentiates it, is that the implementation of Material styles has been done in a way that XAML and C# Markup can be generated that is compatible with WinUI and the Uno Platform. The point is, if you’re looking to use Figma to design a Windows or Uno Platform application, you should start with the Uno Platform Material Toolkit.

Example App

The first page in the Uno Platform Material Toolkit in an Example App that shows a number of sample pages of a retail application. This is similiar to the Commerce sample application that you can find in the Uno.Samples repository.

On the left, you can follow the instructions to install the Uno Platform Figma Plugin, which we’ll cover in more detail a bit later. If you make changes to the theme/styles, you can return to the Example App and see how the changes are applied.

Getting Started

On the Getting Started page you can read through the guidance on how to get the most out of the Uno Platform Material Toolkit. Take the time to read each section and try out things like modifying colors or trying out different fonts.

Themes

To make changes to the theme used in the Uno Platform Material Toolkit open the Themes page which shows the colors, typography, elevations, icons, app icons and images. These can be accessed individually from the appropriate section, or you can see them in the context on the Preview section.

Components

The Components page include the standard controls, such as Button and TextBlock, that are used to make up most applications. From the index page, you can quickly jump to the appropriate section for the control your interested in.

As you can see from the Button section shown in the above image, each section not only shows the control, it also shows all the variants for the control.

Templates

The Templates page provides high level templates for Pages, Cards, Forms, Lists and more.

Other Pages

The remaining pages in the Uno Platform Material Toolkit include the Cover, a Changelog, Feedback and Credits.

Uno Platform Figma to C# or XAML Plugin

The Uno Platform Figma Plugin is a contextually aware plugin that’s used to preview and export either C# or XAML from a Figma file derived from the Uno Platform Material Toolkit. By this I mean that as you change the selected page and layer you can preview and export the current selection.

Preview

The first tab in the plugin is the Preview tab where you can see how the currently selected application page will appear when it’s running inside an Uno Platform application. Because the Figma Plugin is an Uno Platform application running in WASM, the Figma design is exported to XAML and which is then parsed and displayed within the application – this makes the preview as close as possible to what you would see if you exported the design into a separate Uno Platform application.

The Preview tab also supports switching between Dark and Light themes, as shown in the image above.

Export

The Export tab allows for generation of XAML or C# Markup that can be copied into an Uno Platform application (which includes any Windows application built with WinUI and the Windows App SDK).

Properties

From the Properies tab it’s possible to set data binding and other page specific properties. The Application properties can be used to set the namespace used when exporting code.

Data Context

In order for the Preview tab to show a meaning full representation of the design, it’s useful to specify design time data in JSON via the Data Context tab. You can see in this image an array of items with a Key of Products. In the earlier image of the properties, you can see a data binding expression of Products – this is how the preview shows a list of products.

Console

If the Preview or Export tab isn’t working, it may be necessary to check out the Console to see if there are any errors.

Settings

The Settings tab can be used to adjust aspects of the behavior of the plugin. For example, toggling the Binding setting will control whether binding expressions are exported in the XAML or C# Markup.

Summary

In this post we’ve covered the main screens/tabs of the Uno Platform Material Tookit and the Uno Platform Figma Plugin. Hopefully this will provide you the basis to take a look at these tools and see how you can use them to help you design and build applications for Windows and other platforms using the Uno Platform.

The post Designing and Building Windows Applications using Figma and the Uno Platform appeared first on Nick's .NET Travels.