最近又在繼續倒騰WPF的項目，繼續使用Caliburn.Micro和Xceed來堆代碼。每次調試xaml上的binding，都有種要瘋的趕腳。

今天路過 channel9.msdn.com/ 瀏覽 WPF相關的學習視頻時，遇到微軟推薦的相關視頻 - XAML sutdio簡介，好奇心使然，目測是和Visual Studio Code類似而強大的牛牛工具，就好好看完了視頻。

XAML sutdio是微軟Garage項目組的作品，其特色是為XAML提供了如下一些功能。

XAML Studio包含以下功能：

  • 實時且可交互的預覽窗口
  • 實時綁定和調試
  • 數據上下文編輯器
  • 自動保存和恢復文檔
  • 智能感知
  • 文檔工具箱
  • 對齊指南
  • 命名空間助手

下面結合XAML studio的界面對其進行詳細介紹~

XAML Studio 是微軟Garage項目組的一個不依賴 Visual Studio而能快速創建XAMLUI原型、實時預覽、調試數據綁定及其他更多功能的一個輕項目，其最新版本可從 Microsoft Store 進行安裝，溫馨提醒一下這個軟體只能在windows10及其以上版本的PC和Surface上使用。

編輯器功能

XAML Studio的編輯器很像一個"輕量級"的Visual Studio，或者用VS Code來類比更合適。除了編輯器， 在左側還有文件，數據源，調試和工具箱這幾個選項。

編輯器的行為與您期望的一樣。 您可以在底部向XAML添加控制項，頂部預覽面板會對更新做出響應。

工具箱提供了一個可以搜索的控制項列表，然後單擊以插入到XAML中。

與Visual Studio中的XAML編輯器不同，VS中的實時預覽不提供任何類型的拖放體驗。

數據(源)功能

你可以通過靜態JSON或JSON REST API將數據綁定到XAML組件。

要綁定到靜態JSON，可以單擊數據源窗格，然後直接在編輯器中輸入JSON即可。

要綁定到REST API，可以單擊數據源面板頂部的兩個箭頭以打開一個文本框，您可以在其中輸入REST API。 輸入REST API URI然後單擊刷新按鈕後，JSON將更新，XAML預覽也將更新。

調試數據綁定

調試功能允許你查看哪些數據綁定實際上成功了。 打開調試模式後，您將能夠看到當前綁定以及可用綁定的歷史記錄。

偉大的開始

我對這個工具的誕生感到很興奮。 這看似是建立在VS Code和Monaco編輯器的基礎上開發而來的，但它的特色是提供了一些便捷的功能。我很樂意看到這裡的綁定調試功能，不僅僅是因為這裡使用了簡潔的JSON數據，而是它現在就可以提供非常棒的綁定調試功能，而我知道目前的Visual Studio中還沒提供這種功能。

我們來一起實踐吧

我在編輯器中創建了一段這樣的代碼:

<Page
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Padding="40">
<TextBlock>
<Run FontSize="24" Foreground="#FFFC5185">First demo using XAML Studio</Run><LineBreak/>
<Run> Hello, Bravo.</Run>
</TextBlock>
</Grid>
</Page>

上方立馬就出現了代碼預覽~

了解HTML的人都應該知道這裡 <Run>標籤的作用，其實和HTML中的<p>標籤有點像，除此之外，其他的XAML部分和其他地方一樣~

好吧，請各位慢慢享用了~

查看本人最近其他原創作品請移步：

  • 從0到1：使用Caliburn.Micro(WPF和MVVM)開發簡單的計算器
  • JS實現頁面複製文字時自動加版權
  • 開發小白也毫無壓力的hexo靜態博客建站全攻略 - 躺坑後親訴心路歷程
  • 改進博客園Markdown顯示功能(加代碼行號、顯示代碼所用編程語言)
  • 當今最全面可用的微博分享組件嵌入方法(親測2019年2月仍有效)
  • 前端小白也能快速學會的博客園博客美化全攻略 - 附源碼
  • 史上最最靠譜，又雙叒叒簡單的基於MSXML的XML解析指南-C++

參考鏈接： Microsoft Garages XAML Studio Does Real-Time UWP UI Changes -- Visual Studio Magazine

By devs, for devs: meet new Garage projects XAML Studio and Team Retrospectives - Microsoft Garage

本文首發於本人的 博客園博客 cnblogs.com/enjoy233/p/，轉載請註明出處，謝謝配合~

推薦閱讀：

相关文章