Introducing UISpy.Uno Version 1.0.0-alpha03 – A Powerful Tool for Debugging UNO UI on Skia Platform

[lindexi]

We are thrilled to announce the release of UISpy.Uno version 1.0.0-alpha03, a robust tool designed to debug UNO UI interfaces with precision and ease. This release coincides with the exciting launch of UNO version 5.2, which now supports multi-window functionality.

UISpy.Uno harnesses the power of UNO's multi-window feature, allowing developers to open a UI debugging interface in a separate window within the same process.

With UISpy.Uno, you gain insightful access to layout information and every attribute of UI elements. You can even modify properties on-the-fly, providing an unparalleled level of interaction with your UI.

Getting started with UISpy.Uno is a breeze! Simply install the dotnetCampus.UISpy.Uno library and add the following snippet of code to your project:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
#if HAS_UNO
        this.AttachDevTools();
#endif
    }
}

Once your application is up and running, you can invoke the debugging window by focusing on any element within your app and pressing the F12 key. The debugging interface will appear as shown below:

UISpy.Uno is proudly open-sourced under the MIT license on GitHub, inviting you to use and contribute to its development. For more details, please visit: https://github.com/dotnet-campus/dotnetCampus.UISpy.Uno

For a recap of our previous introduction, click here: #15824

[HowardPWeiss]

I am trying to run this on Linux, .Net 8.0, Latest VisualStudioCode, Uno 5.2.37, dotnet 8.0.301, UnoSpySnoopDebugger.Skia.WPF.csproj
Build fails as follows:

/usr/share/dotnet/sdk/8.0.301/Sdks/Microsoft.NET.Sdk/targets/Microsoft.NET.Sdk.ImportWorkloads.targets(38,5): error NETSDK1147: To build this project, the following workloads must be installed: wasi-experimental [/home/howard/UISpy.Uno/dotnetCampus.UISpy.Uno-main/UnoSpySnoop/Lib/UnoSpySnoopProvider/UnoSpySnoopProvider.csproj::TargetFramework=net8.0-android]
/usr/share/dotnet/sdk/8.0.301/Sdks/Microsoft.NET.Sdk/targets/Microsoft.NET.Sdk.ImportWorkloads.targets(38,5): error NETSDK1147: To install these workloads, run the following command: dotnet workload restore [/home/howard/UISpy.Uno/dotnetCampus.UISpy.Uno-main/UnoSpySnoop/Lib/UnoSpySnoopProvider/UnoSpySnoopProvider.csproj::TargetFramework=net8.0-android]```

Where would I find an appropriate wasi-experimental workload

[lindexi]

@HowardPWeiss Thank you. Please use uno.check tool to install, see https://platform.uno/docs/articles/get-started-vs-2022.html?tabs=ubuntu1804

[HowardPWeiss]

I am running Ubuntu 20.04

I obtained latest uno-check and ran that. Upgraded Uno Templates. No reported problems

Per readme, I went to https://www.nuget.org/packages/dotnetCampus.UISpy.Uno and installed latest version of UISpy.Uno with the following command

dotnet add package dotnetCampus.UISpy.Uno --version 1.0.0-alpha03

howard@howard-Precision-M4800:~/Desktop/Hello_Blocks_UISpy/Hello$ dotnet add package dotnetCampus.UISpy.Uno --version 1.0.0-alpha03
Determining projects to restore...
Writing /tmp/tmp3M6yh3.tmp
info : X.509 certificate chain validation will use the fallback certificate bundle at '/usr/share/dotnet/sdk/8.0.301/trustedroots/codesignctl.pem'.
info : X.509 certificate chain validation will use the fallback certificate bundle at '/usr/share/dotnet/sdk/8.0.301/trustedroots/timestampctl.pem'.
info : Adding PackageReference for package 'dotnetCampus.UISpy.Uno' into project '/home/howard/Desktop/Hello_Blocks_UISpy/Hello/Hello.csproj'.
info : Restoring packages for /home/howard/Desktop/Hello_Blocks_UISpy/Hello/Hello.csproj...
info : GET https://api.nuget.org/v3/vulnerabilities/index.json
info : OK https://api.nuget.org/v3/vulnerabilities/index.json 202ms
info : GET https://api.nuget.org/v3-vulnerabilities/2024.06.28.05.31.02/vulnerability.base.json
info : GET https://api.nuget.org/v3-vulnerabilities/2024.06.28.05.31.02/2024.07.01.05.31.08/vulnerability.update.json
info : OK https://api.nuget.org/v3-vulnerabilities/2024.06.28.05.31.02/vulnerability.base.json 26ms
info : OK https://api.nuget.org/v3-vulnerabilities/2024.06.28.05.31.02/2024.07.01.05.31.08/vulnerability.update.json 57ms
error: NU1605: Warning As Error: Detected package downgrade: Uno.Toolkit.WinUI from 6.0.24 to 6.0.18. Reference the package directly from the project to select a different version.
error: Hello -> dotnetCampus.UISpy.Uno 1.0.0-alpha03 -> Uno.Toolkit.WinUI (>= 6.0.24)
error: Hello -> Uno.Toolkit.WinUI (>= 6.0.18)
error: NU1605: Warning As Error: Detected package downgrade: Uno.WinUI from 5.2.161 to 5.2.108. Reference the package directly from the project to select a different version.
error: Hello -> dotnetCampus.UISpy.Uno 1.0.0-alpha03 -> Uno.WinUI (>= 5.2.161)
error: Hello -> Uno.WinUI (>= 5.2.108)
error: NU1605: Warning As Error: Detected package downgrade: Uno.WinUI.DevServer from 5.2.161 to 5.2.108. Reference the package directly from the project to select a different version.
error: Hello -> dotnetCampus.UISpy.Uno 1.0.0-alpha03 -> Uno.WinUI.DevServer (>= 5.2.161)
error: Hello -> Uno.WinUI.DevServer (>= 5.2.108)
info : Package 'dotnetCampus.UISpy.Uno' is compatible with all the specified frameworks in project '/home/howard/Desktop/Hello_Blocks_UISpy/Hello/Hello.csproj'.
info : Assets file has not changed. Skipping assets file writing. Path: /home/howard/Desktop/Hello_Blocks_UISpy/Hello/obj/project.assets.json
log : Failed to restore /home/howard/Desktop/Hello_Blocks_UISpy/Hello/Hello.```

This appears to have failed.  I noticed that on https://www.nuget.org/packages/dotnetCampus.UISpy.Uno it lists the following pre-requsitie packages

net8.0
SkiaSharp.Views.Uno.WinUI (>= 2.88.8)
Uno.Extensions.Markup.Generators (>= 5.2.14)
Uno.Extensions.Reactive.Messaging (>= 4.1.24)
Uno.Extensions.Reactive.WinUI (>= 4.1.24)
Uno.Extensions.Reactive.WinUI.Markup (>= 4.1.24)
Uno.Toolkit.Skia.WinUI (>= 6.0.24)
Uno.Toolkit.WinUI (>= 6.0.24)
Uno.Toolkit.WinUI.Markup (>= 6.0.24)
Uno.WinUI (>= 5.2.161)
Uno.WinUI.DevServer (>= 5.2.161)
Uno.WinUI.Markup (>= 5.2.14)
net8.0-windows10.0.19041
Microsoft.Windows.SDK.BuildTools (>= 10.0.22621.3233)
Microsoft.WindowsAppSDK (>= 1.5.240404000)
SkiaSharp.Views.WinUI (>= 2.88.8)
Uno.Extensions.Markup.Generators (>= 5.2.14)
Uno.Extensions.Reactive.Messaging (>= 4.1.24)
Uno.Extensions.Reactive.WinUI (>= 4.1.24)
Uno.Extensions.Reactive.WinUI.Markup (>= 4.1.24)
Uno.Toolkit.Skia.WinUI (>= 6.0.24)
Uno.Toolkit.WinUI (>= 6.0.24)
Uno.Toolkit.WinUI.Markup (>= 6.0.24)
Uno.WinUI (>= 5.2.161)
Uno.WinUI.DevServer (>= 5.2.161)
Uno.WinUI.Markup (>= 5.2.14)

dotnet list package returns the following

howard@howard-Precision-M4800:~/Desktop/Hello_Blocks_UISpy/Hello$ dotnet list package
Project 'Hello' has the following package references
[net8.0-desktop8.0]:
Top-level Package Requested Resolved

CommunityToolkit.Mvvm (A) [8.2.2, ) 8.2.2
dotnetCampus.UISpy.Uno 1.0.0-alpha03 1.0.0-alpha03
Microsoft.Extensions.Logging.Console (A) [8.0.0, ) 8.0.0
SkiaSharp.Skottie (A) [2.88.8, ) 2.88.8
SkiaSharp.Views.Uno.WinUI (A) [2.88.8, ) 2.88.8
Uno.Extensions.Configuration (A) [4.1.14, ) 4.1.14
Uno.Extensions.Core.WinUI (A) [4.1.14, ) 4.1.14
Uno.Extensions.Hosting.WinUI (A) [4.1.14, ) 4.1.14
Uno.Extensions.Localization.WinUI (A) [4.1.14, ) 4.1.14
Uno.Extensions.Logging.WinUI (A) [4.1.14, ) 4.1.14
Uno.Extensions.Navigation.Toolkit.WinUI (A) [4.1.14, ) 4.1.14
Uno.Extensions.Navigation.WinUI (A) [4.1.14, ) 4.1.14
Uno.Material.WinUI (A) [5.0.13, ) 5.0.13
Uno.Resizetizer (A) [1.4.8, ) 1.4.8
Uno.Toolkit.WinUI (A) [6.0.18, ) 6.0.18
Uno.Toolkit.WinUI.Material (A) [6.0.18, ) 6.0.18
Uno.UI.Adapter.Microsoft.Extensions.Logging (A) [5.2.108, ) 5.2.108
Uno.WinUI (A) [5.2.108, ) 5.2.108
Uno.WinUI.DevServer (A) [5.2.108, ) 5.2.108
Uno.WinUI.Lottie (A) [5.2.108, ) 5.2.108
Uno.WinUI.Skia.Linux.FrameBuffer (A) [5.2.108, ) 5.2.108
Uno.WinUI.Skia.MacOS (A) [5.2.108, ) 5.2.108
Uno.WinUI.Skia.Wpf (A) [5.2.108, ) 5.2.108
Uno.WinUI.Skia.X11 (A) [5.2.108, ) 5.2.108

(A) : Auto-referenced package.

Are you using a pre-release of Uno? If so, how do I obtain pre-release

[HowardPWeiss]

I tried referencing the version of Uni.Toolkit.WinUI from the Directory.Packages.props fileas you suggested

It was unclear from your email whether you wanted me to reference version 6.0.18 (the one on my system) or 6.0.24 (the one which dotnetCampus.UISpy.Uno) refernced so I tried both

Project ToolsVersion="15.0">
  <!--
    To update the version of Uno, you should instead update the Sdk version in the global.json file.

    See https://aka.platform.uno/using-uno-sdk for more information.
  -->
  <ItemGroup>
  </ItemGroup>
  <ItemGroup>
    <PackageVersion Include="dotnetCampus.UISpy.Uno" Version="1.0.0-alpha03" />
    <PackageVersion Include="Uno.UI" Version="5.2.175" />
    <PackageVersion Include="Uno.WinUI" Version="5.2.175" />
    <PackageVersion Include="Uno.Toolkit.WinUI" Version="6.0.18" />
  </ItemGroup>
</Project>```

and

<Project ToolsVersion="15.0">
  <!--
    To update the version of Uno, you should instead update the Sdk version in the global.json file.

    See https://aka.platform.uno/using-uno-sdk for more information.
  -->
  <ItemGroup>
  </ItemGroup>
  <ItemGroup>
    <PackageVersion Include="dotnetCampus.UISpy.Uno" Version="1.0.0-alpha03" />
    <PackageVersion Include="Uno.UI" Version="5.2.175" />
    <PackageVersion Include="Uno.WinUI" Version="5.2.175" />
    <PackageVersion Include="Uno.Toolkit.WinUI" Version="6.0.24" />
  </ItemGroup>
</Project>

Same result either way

/home/howard/Desktop/Hello_Blocks_UISpy/Hello/Hello.csproj : error NU1605: Warning As Error: Detected package downgrade: Uno.Toolkit.WinUI from 6.0.24 to 6.0.18. Reference the package directly from the project to select a different version.
/home/howard/Desktop/Hello_Blocks_UISpy/Hello/Hello.csproj : error NU1605: Hello -> dotnetCampus.UISpy.Uno 1.0.0-alpha03 -> Uno.Toolkit.WinUI (>= 6.0.24)
/home/howard/Desktop/Hello_Blocks_UISpy/Hello/Hello.csproj : error NU1605: Hello -> Uno.Toolkit.WinUI (>= 6.0.18)
Failed to restore /home/howard/Desktop/Hello_Blocks_UISpy/Hello/Hello.csproj (in 642 ms).

I think I need to upgrade the version of Uno.Toolkit.WinUI on my system.  I am unable to find an appropriate NuGet package to download

Howard

[HowardPWeiss]

Doing better

I find both Uno.Toolit.WinUI 6.0.24 and Uno.Toolkit.Winui.Material 6.0.24 on the net and used dotnet install to install both packages/.

I edited Directory.Packages.props as follows

<Project ToolsVersion="15.0">
  <!--
    To update the version of Uno, you should instead update the Sdk version in the global.json file.

    See https://aka.platform.uno/using-uno-sdk for more information.
  -->
  <ItemGroup>
  </ItemGroup>
  <ItemGroup>
    <PackageVersion Include="dotnetCampus.UISpy.Uno" Version="1.0.0-alpha03" />
    <PackageVersion Include="Uno.Toolkit.WinUI" Version="6.0.24" />
    <PackageVersion Include="Uno.Toolkit.WinUI.Material" Version="6.0.24" />
    <PackageVersion Include="Uno.WinUI.DevServer" Version="5.2.161" />
  </ItemGroup>
</Project>

and my .csproj file

net8.0-desktop;

<OutputType>Exe</OutputType>
<UnoSingleProject>true</UnoSingleProject>

<!-- Display name -->
<ApplicationTitle>Hello</ApplicationTitle>
<!-- App Identifier -->
<ApplicationId>com.companyname.Hello</ApplicationId>
<!-- Versions -->
<ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
<ApplicationVersion>1</ApplicationVersion>

<!--
  UnoFeatures let's you quickly add and manage implicit package references based on the features you want to use.
  https://aka.platform.uno/singleproject-features
-->
<UnoFeatures>
  Material;
  Hosting;
  Toolkit;
  Logging;
  Mvvm;
  Configuration;
  Localization;
  Navigation;
  ExtensionsCore;
</UnoFeatures>

``` ```

I made the edits specified in read.me

The unable to restore problem is gone, but I now see a compilation error

``
/home/howard/Desktop/Hello_Blocks_UISpy/Hello/obj/Debug/net8.0-desktop/Uno.Extensions.Reactive.Generator/Uno.Extensions.Reactive.Generator.FeedsGenerator/Hello.Presentation.MainViewModel.Bindable.g.cs(744,8): error CS4008: Cannot await 'void' [/home/howard/Desktop/Hello_Blocks_UISpy/Hello/Hello.csproj::TargetFramework=net8.0-desktop]`

Please advise

[lindexi]

@HowardPWeiss I re-create an empty UNO project and install the dotnetCampus.UISpy.Uno package.

You can find my demo code in: https://github.com/lindexi/lindexi_gd/tree/748a96f4e80452075eeeed8c12e29e536e198511/UnoDemo/UnoSpyDemo

[HowardPWeiss]

To be clear, I created a new UNO Project, made the changes from the read.me, and I was able to build and run the project and view the Visual Tree using F12.

The compiler error was specific to this project.

I added true to my .csproj. As a result, the g.cs files are now saved at the end of the compilation

To reiterate, the problem was that dotnet reports the following error

/home/howard/Desktop/Hello_Blocks_UISpy/Hello/obj/Debug/net8.0-desktop/generated/Uno.Extensions.Reactive.Generator/Uno.Extensions.Reactive.Generator.FeedsGenerator/Hello.Presentation.MainViewModel.Bindable.g.cs(744,8): error CS4008: Cannot await 'void' [/home/howard/Desktop/Hello_Blocks_UISpy/Hello/Hello.csproj::TargetFramework=net8.0-desktop]

If I look in the Hello.Presentation.MainViewModel.Bindable.g.cs file, I find the following code

ReadClick ??= new global::Uno.Extensions.Reactive.Commands.AsyncCommand(
				nameof(ReadClick),
				new global::Uno.Extensions.Reactive.Commands.CommandConfig[]
				{
					new global::Uno.Extensions.Reactive.Commands.CommandConfig
					{
						Execute = async (reactive_commandParameter, reactive_ct) =>
						{
							await model.ReadClick();
						}       private bool _bReadEnabled = true;

        public bool bReadEnabled
        {
            get { return _bReadEnabled; }
            set { _bReadEnabled = value; }
        }

        public bool GetReadEnabled()
        {
            return bReadEnabled;
        }

        public ICommand btnRead_Click
        {
            get
            {
                return new DelegateCommand(ReadClick, GetReadEnabled);
            }
        }
					}

				},
				global::Uno.Extensions.Reactive.Command.DefaultErrorHandler,
				ctx
			);

ReadClick is the routine which is invoked when the user clicks the Read button in the UI

in mainpage.xaml

       <Button Name="btnRead" Command="{Binding btnRead_Click}" IsEnabled="{Binding Path=bReadEnabled}" 
            Height="27" Width="95" TabIndex="12" Margin="107,20,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" 
            Content ="Read" >
                <VisualStateManager.VisualStateGroups> 
                    <VisualStateGroup x:Name="CommonStates">
                    
                        <VisualState x:Name="Normal" />
works until I incorporate
                        <VisualState x:Name="PointerOver">
                            <VisualState.Setters>
                                <Setter Target="ContentPresenter.Foreground" Value="Yellow" />  
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Pressed" /> have numerous buttons, all of which are coded using the same pattern.  However, none of the 

                        <VisualState x:Name="Disabled"/>
                        
                        <VisualState x:Name="Focused"/>

                        <VisualState x:Name="PointerFocused"/>

                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
        </Button>

Here is the code which implements the button from the ViewModel

       private bool _bReadEnabled = true;

        public bool bReadEnabled
        {
            get { return _bReadEnabled; }
            set { _bReadEnabled = value; }
        }

        public bool GetReadEnabled()
        {
            return bReadEnabled;
        }

        public ICommand btnRead_Click
        {
            getworks until I incorporate
            {
                return new DelegateCommand(ReadClick, GetReadEnabled);
            }
        }
       public async void ReadClick()
        {
            Debug.WriteLine(String.Format("ReadClick"));
       .....
      StorageFolder localParentFolder = await localFolder.GetParentAsync();
       .....

ReadClick is declared async because it awaits the calls to the StorageFolder. If it is not async, then it cannot use await

As coded, this worked until I modified the project to include dotnetCampus.UISpy.Uno

I have numerous other buttons coded using the same pattern but do not declare button routine async since they do not need to await anything. In the Hello.Presentation.MainViewModel.Bindable.g.cs file, the code simply calls the appropriate routine in the model rather than await the routine

I did the following

1. renamed the existing public async void ReadClick to private async void ReadClickWorker
2. added a new public void routine ReadClick which calls the ReadClickWorker

The error went away and II can now use dotnetCampus.UISpy.Uno to walk the visual tree.

BTW: If I only modified the routines per the above but did not make ReadClickWorker private, then the compiler generated a new block which tried to await ReadClickWorker whch also threw an error since ReadClickWorker was async void. This suggests that I could also have fixed the compile error by making ReadClick a private method

My original purpose in doing all this was to be able to see the VisualStateGroups for each button. I find that dotnetCampus.UISpy.Uno does not report the VisualStaeGroups for each button. So it does provide a solution to my original problem.

[lindexi]

@HowardPWeiss It looks like a bug with UNO's source generator.