關於Unity 如何與Blazor Server結合 一、介紹 最近工作中有Unity與Blazor Server結合的需求,在網上找了一圈,發現這方面的資料比較少,特此寫下這篇記錄一下自己的實現過程,希望可以幫到有需要的朋友。(下方多圖預警) OS Version : windows 11 Uni ...
本文告訴大家在 UWP 或 WinUI 3 裡面如何簡單製作一個由 Path 幾何路徑圖形繪製的圖標按鈕
先在資源裡面定義按鈕的樣式,重寫 Template 屬性,通過在 Template 裡面放入 Path 綁定 Data 到內容從而實現讓 Path 顯示集合路徑圖形,代碼如下
<Style x:Key="Style.TitlebarButton" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="#808080" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Width" Value="24"/>
<Setter Property="Height" Value="24"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid Background="{TemplateBinding Background}">
<Path Fill="{TemplateBinding Foreground}" Data="{TemplateBinding Content}"></Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
接下來有路徑資源可以先在資源字典裡面定義,定義的是字元串即可,如以下代碼
<x:String x:Key="Geometry.Close">M18.363961,5.63603897 C18.7544853,6.02656326 18.7544853,6.65972824 18.363961,7.05025253 L13.4142136,12 L18.363961,16.9497475 C18.7544853,17.3402718 18.7544853,17.9734367 18.363961,18.363961 C17.9734367,18.7544853 17.3402718,18.7544853 16.9497475,18.363961 L12,13.4142136 L7.05025253,18.363961 C6.65972824,18.7544853 6.02656326,18.7544853 5.63603897,18.363961 C5.24551468,17.9734367 5.24551468,17.3402718 5.63603897,16.9497475 L10.5857864,12 L5.63603897,7.05025253 C5.24551468,6.65972824 5.24551468,6.02656326 5.63603897,5.63603897 C6.02656326,5.24551468 6.65972824,5.24551468 7.05025253,5.63603897 L12,10.5857864 L16.9497475,5.63603897 C17.3402718,5.24551468 17.9734367,5.24551468 18.363961,5.63603897 Z</x:String>
這裡有一個細節點是在 UWP 或 WinUI 3 里,字元串類型應該使用 x:String
而不是使用 system:String
的方式,如以下錯誤的代碼例子
<Page
x:Class="LefernochihairWhemfawqarkemche.MainPage"
...
xmlns:system="using:System">
<Page.Resources>
<system:String x:Key="Geometry.Close">M18.363961,5.63603897 C18.7544853,6.02656326 18.7544853,6.65972824 18.363961,7.05025253 L13.4142136,12 L18.363961,16.9497475 C18.7544853,17.3402718 18.7544853,17.9734367 18.363961,18.363961 C17.9734367,18.7544853 17.3402718,18.7544853 16.9497475,18.363961 L12,13.4142136 L7.05025253,18.363961 C6.65972824,18.7544853 6.02656326,18.7544853 5.63603897,18.363961 C5.24551468,17.9734367 5.24551468,17.3402718 5.63603897,16.9497475 L10.5857864,12 L5.63603897,7.05025253 C5.24551468,6.65972824 5.24551468,6.02656326 5.63603897,5.63603897 C6.02656326,5.24551468 6.65972824,5.24551468 7.05025253,5.63603897 L12,10.5857864 L16.9497475,5.63603897 C17.3402718,5.24551468 17.9734367,5.24551468 18.363961,5.63603897 Z</system:String>
</Page.Resources>
<Grid>
</Grid>
</Page>
以上的代碼可能拋出的是 Microsoft.UI.Xaml.Markup.ReflectionHelperException Error in reflection helper. Please add '<PropertyGroup><EnableTypeInfoReflection>false</EnableTypeInfoReflection></PropertyGroup>' to your project file.. Created Xaml type 'String' has a different name than requested type 'System.String'
錯誤,也可能拋出的是 Windows.UI.Xaml.Markup.XamlParseException: XAML parsing failed.
異常。這幾個異常這麼奇怪,其實是微軟從 2015 開始就毫無長進的 WinUI 異常提示機制,由於經過了 COM 的 WinUI 底層,導致了上層拋出的不是本質的異常,也不知道是哪一行,只能依靠逐步靜態閱讀代碼和不斷運行嘗試才能知道是哪裡寫錯了
回到使用代碼裡面,圖標按鈕的使用方法特別簡單,只需要將以上的 x:String
的幾何路徑設置到按鈕的內容,然後設置按鈕的樣式就完成
<Button Style="{StaticResource Style.TitlebarButton}" Content="{StaticResource Geometry.Close}"></Button>
如此簡單即可完成圖標按鈕
為了防止大家不知道上文給的代碼是寫到哪裡,下麵給出頁面的代碼,可以拷貝在自己的項目里瞭解效果
<Page
x:Class="LefernochihairWhemfawqarkemche.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:LefernochihairWhemfawqarkemche"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:system="using:System"
xmlns:helpers="using:LefernochihairWhemfawqarkemche.Helpers"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<x:String x:Key="Geometry.Close">M18.363961,5.63603897 C18.7544853,6.02656326 18.7544853,6.65972824 18.363961,7.05025253 L13.4142136,12 L18.363961,16.9497475 C18.7544853,17.3402718 18.7544853,17.9734367 18.363961,18.363961 C17.9734367,18.7544853 17.3402718,18.7544853 16.9497475,18.363961 L12,13.4142136 L7.05025253,18.363961 C6.65972824,18.7544853 6.02656326,18.7544853 5.63603897,18.363961 C5.24551468,17.9734367 5.24551468,17.3402718 5.63603897,16.9497475 L10.5857864,12 L5.63603897,7.05025253 C5.24551468,6.65972824 5.24551468,6.02656326 5.63603897,5.63603897 C6.02656326,5.24551468 6.65972824,5.24551468 7.05025253,5.63603897 L12,10.5857864 L16.9497475,5.63603897 C17.3402718,5.24551468 17.9734367,5.24551468 18.363961,5.63603897 Z</x:String>
<Style x:Key="Style.TitlebarButton" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="#808080" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Width" Value="24"/>
<Setter Property="Height" Value="24"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid Background="{TemplateBinding Background}">
<Path Fill="{TemplateBinding Foreground}" Data="{TemplateBinding Content}"></Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<Button Style="{StaticResource Style.TitlebarButton}" Content="{StaticResource Geometry.Close}" Click="Button_OnClick"></Button>
</Grid>
</Page>
博客園博客只做備份,博客發佈就不再更新,如果想看最新博客,請到 https://blog.lindexi.com/
本作品採用知識共用署名-非商業性使用-相同方式共用 4.0 國際許可協議進行許可。歡迎轉載、使用、重新發佈,但務必保留文章署名[林德熙](https://www.cnblogs.com/lindexi)(包含鏈接:https://www.cnblogs.com/lindexi ),不得用於商業目的,基於本文修改後的作品務必以相同的許可發佈。如有任何疑問,請與我[聯繫](mailto:[email protected])。