How to setup NoesisGUI XAML Tools (VSCode Extension) and preview XAML correctly on macOS
I'm writing UI for a game based on Unity and NoesisGUI on my MPB 2019 (Intel).
I use Visual Studio Code to develop Unity C# code, it works well.
However, developing and debugging XAML on macOS has always been a pain for me.
I have to install Windows with VMWare and install Visual Studio Blend to get a better development experience.
A tool that can help me preview the XAML file would be pretty helpful.
Recently, I found that the "NoesisGUI XAML Tools (VSCode Extension)" v0.0.33 has been released and added support for macOS.
But it still can't preview the XAML file properly on my mac.
The ways I tried:
1. Download the Samples and open folder Tutorials/Samples/HelloWorld/Unity by VSCode
=> Open Tutorials/Samples/HelloWorld/Unity/Assets/NoesisGUI/Samples/HelloWorld/MainWindow.xaml and click the "Open XAML Preview" button on the top-right corner of VSCode
=> The previewer shows a blank blue background
2. Download the NoesisGUI-NativeSDK-macOS-3.2.0b2.zip and open folder Src/Packages/Samples/Buttons/Data by VSCode
=> Open Src/Packages/Samples/Buttons/Data/MainWindow.xaml and click the "Open XAML Preview" button on the top-right corner of VSCode
=> The previewer shows a blank blue background
Here is my environment info:
dotnet --info
mono --version
I use Visual Studio Code to develop Unity C# code, it works well.
However, developing and debugging XAML on macOS has always been a pain for me.
I have to install Windows with VMWare and install Visual Studio Blend to get a better development experience.
A tool that can help me preview the XAML file would be pretty helpful.
Recently, I found that the "NoesisGUI XAML Tools (VSCode Extension)" v0.0.33 has been released and added support for macOS.
But it still can't preview the XAML file properly on my mac.
The ways I tried:
1. Download the Samples and open folder Tutorials/Samples/HelloWorld/Unity by VSCode
=> Open Tutorials/Samples/HelloWorld/Unity/Assets/NoesisGUI/Samples/HelloWorld/MainWindow.xaml and click the "Open XAML Preview" button on the top-right corner of VSCode
=> The previewer shows a blank blue background
2. Download the NoesisGUI-NativeSDK-macOS-3.2.0b2.zip and open folder Src/Packages/Samples/Buttons/Data by VSCode
=> Open Src/Packages/Samples/Buttons/Data/MainWindow.xaml and click the "Open XAML Preview" button on the top-right corner of VSCode
=> The previewer shows a blank blue background
Here is my environment info:
dotnet --info
Code: Select all
.NET SDK:
Version: 7.0.102
Commit: 4bbdd14480
Runtime Environment:
OS Name: Mac OS X
OS Version: 13.1
OS Platform: Darwin
RID: osx.13-x64
Base Path: /usr/local/share/dotnet/sdk/7.0.102/
Host:
Version: 7.0.2
Architecture: x64
Commit: d037e070eb
.NET SDKs installed:
6.0.405 [/usr/local/share/dotnet/sdk]
7.0.100 [/usr/local/share/dotnet/sdk]
7.0.102 [/usr/local/share/dotnet/sdk]
.NET runtimes installed:
Microsoft.AspNetCore.App 6.0.13 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 7.0.0 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 7.0.2 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
Microsoft.NETCore.App 6.0.13 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
Microsoft.NETCore.App 7.0.0 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
Microsoft.NETCore.App 7.0.2 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]Code: Select all
Mono JIT compiler version 6.12.0.188 (2020-02/ca8abcb6bc4 Thu Oct 13 14:26:22 EDT 2022)
Copyright (C) 2002-2014 Novell, Inc, Xamarin Inc and Contributors. www.mono-project.com
TLS:
SIGSEGV: altstack
Notification: kqueue
Architecture: amd64
Disabled: none
Misc: softdebug
Interpreter: yes
LLVM: yes(610)
Suspend: hybrid
GC: sgen (concurrent by default)
Re: How to setup NoesisGUI XAML Tools (VSCode Extension) and preview XAML correctly on macOS
Thanks for taking the time to report your issue in detail.
Your results are expected in 0.0.33, as it currently renders at time 0.0. Our samples start with a blue screen, before the elements animate into place. You can remove the BeginStoryboard action from our samples to disable the animations and view the UI.
In the next coming release we have a Xaml Preview Render Time setting which controls the render time of the preview (default 10 seconds, to skip any loading animations). This will be released with the new 3.2 Beta, but I have created a build that you can use to test this feature now: https://we.tl/t-0XqDZmGYGE
To show how this new feature works, I've created a short video:
Your results are expected in 0.0.33, as it currently renders at time 0.0. Our samples start with a blue screen, before the elements animate into place. You can remove the BeginStoryboard action from our samples to disable the animations and view the UI.
In the next coming release we have a Xaml Preview Render Time setting which controls the render time of the preview (default 10 seconds, to skip any loading animations). This will be released with the new 3.2 Beta, but I have created a build that you can use to test this feature now: https://we.tl/t-0XqDZmGYGE
To show how this new feature works, I've created a short video:
Re: How to setup NoesisGUI XAML Tools (VSCode Extension) and preview XAML correctly on macOS
Thanks for your reply!
I have downloaded and successfully installed the test version of the extension.
In order to verify whether it is an animation problem.
I tried opening the HelloWorld example and deleting everything except the Grid and TextBlock.
However, I still cannot successfully preview the XAML.
I found that in the UserControl part, it will display an error: Unknown x:Class type 'HelloWorld.MainWindow.
I'm not sure if this error is causing the preview to fail.
I have downloaded and successfully installed the test version of the extension.
In order to verify whether it is an animation problem.
I tried opening the HelloWorld example and deleting everything except the Grid and TextBlock.
However, I still cannot successfully preview the XAML.
I found that in the UserControl part, it will display an error: Unknown x:Class type 'HelloWorld.MainWindow.
I'm not sure if this error is causing the preview to fail.
Last edited by miZyind on 13 Feb 2023, 03:25, edited 1 time in total.
Re: How to setup NoesisGUI XAML Tools (VSCode Extension) and preview XAML correctly on macOS
The x:Class error shouldn't affect rendering.
Here are some simple samples, all of which should render: https://we.tl/t-NrlirB0g0Q
I think this may be a permissions issue on your computer, as we currently store the rendered preview images in /tmp/noesis. Could try to preview one or more of the samples attached, then see if you have a /tmp/noesis folder, and if it contains any images? You could also view any images to see if they look valid.
I would like to track this on our bugtracker, would you mind posting this issue there? https://www.noesisengine.com/bugs/
Here are some simple samples, all of which should render: https://we.tl/t-NrlirB0g0Q
I think this may be a permissions issue on your computer, as we currently store the rendered preview images in /tmp/noesis. Could try to preview one or more of the samples attached, then see if you have a /tmp/noesis folder, and if it contains any images? You could also view any images to see if they look valid.
I would like to track this on our bugtracker, would you mind posting this issue there? https://www.noesisengine.com/bugs/
Re: How to setup NoesisGUI XAML Tools (VSCode Extension) and preview XAML correctly on macOS
I just downloaded and picked up the "Noesis" sample.
However, the previewer is still showing a blank blue background.
I found that there is a generated png file in the folder you mentioned /tmp/noesis.
But I can only see a blank image like this:
I've opened an issue on the tracker, thanks!
However, the previewer is still showing a blank blue background.
I found that there is a generated png file in the folder you mentioned /tmp/noesis.
But I can only see a blank image like this:
I've opened an issue on the tracker, thanks!
Re: How to setup NoesisGUI XAML Tools (VSCode Extension) and preview XAML correctly on macOS
Thanks for working through this with me.
I will send on a build tomorrow with logging enabled, it would be great if you could load a xaml in that build and send me the log. I'll post the details once the build is ready.
I will send on a build tomorrow with logging enabled, it would be great if you could load a xaml in that build and send me the log. I'll post the details once the build is ready.
Re: How to setup NoesisGUI XAML Tools (VSCode Extension) and preview XAML correctly on macOS
Hi, I was just wondering if the XAML Tools are confirmed working for VSCode on Mac now? I develop with a Mac and Unreal Engine and am currently considering Noesis, however the lack of a Blend version for Mac is concerning so I am wondering if at least the VSCode plugin with the XAML preview would work.
Re: How to setup NoesisGUI XAML Tools (VSCode Extension) and preview XAML correctly on macOS
Well I think the biggest concern right now is that the Unreal 5.3 Plugin is completely broken on macOS.
You can follow along here: https://www.noesisengine.com/bugs/view.php?id=3017
I hope they fix it soon (thank you jsantos for moving it back to 3.2.3 lol).
I never got as far as trying out XAML Tools in VSCode because of that, so I am not able to answer your question.
Yeah Blend will never come to macOS that's for sure, the good news is they are building their own multi-platform version of Blend called Noesis Studio.
The Windows version is supposed to be coming out this spring (aka GDC 2024) but they haven't said much about the macOS version. I really hope it comes out at the same time.
You can follow along here: https://www.noesisengine.com/bugs/view.php?id=3017
I hope they fix it soon (thank you jsantos for moving it back to 3.2.3 lol).
I never got as far as trying out XAML Tools in VSCode because of that, so I am not able to answer your question.
Yeah Blend will never come to macOS that's for sure, the good news is they are building their own multi-platform version of Blend called Noesis Studio.
The Windows version is supposed to be coming out this spring (aka GDC 2024) but they haven't said much about the macOS version. I really hope it comes out at the same time.
Re: How to setup NoesisGUI XAML Tools (VSCode Extension) and preview XAML correctly on macOS
Yes, the current version of the VSCode extension is compatible with macOS.Hi, I was just wondering if the XAML Tools are confirmed working for VSCode on Mac now? I develop with a Mac and Unreal Engine and am currently considering Noesis, however the lack of a Blend version for Mac is concerning so I am wondering if at least the VSCode plugin with the XAML preview would work.
Re: How to setup NoesisGUI XAML Tools (VSCode Extension) and preview XAML correctly on macOS
We are working on this. : )Well I think the biggest concern right now is that the Unreal 5.3 Plugin is completely broken on macOS.
You can follow along here: https://www.noesisengine.com/bugs/view.php?id=3017
Although we already have a version working on macOS, the beta version we plan for GDC will be only Windows.The Windows version is supposed to be coming out this spring (aka GDC 2024) but they haven't said much about the macOS version. I really hope it comes out at the same time.
Who is online
Users browsing this forum: No registered users and 7 guests