當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Win10 UWP开发中的重复性静态UI绘制小技巧 1

發布時間：2024/8/26 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Win10 UWP开发中的重复性静态UI绘制小技巧 1 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Win10 UWP開發中的重復性靜態UI繪制小技巧 1 原文:Win10 UWP開發中的重復性靜態UI繪制小技巧 1

介紹

在Windows 10 UWP界面實現的過程中，有時會遇到一些重復性的、靜態的界面設計。比如：畫許多等距的線條，畫一圈時鐘型的刻度線，同特別的策略排布元素，等等。

讀者可能覺得這些需求十分簡單，馬上就想到了通過for循環之類來實現。只需要在Loaded事件里添上這些元素就好了。

但這樣可能存在一些問題——如果這些UI元素只是靜態的，是裝飾性的——雖然code-behind不用白不用，但為了這些純靜態元素將代碼邏輯變得臃腫似乎略有不妥。

我們將就這些問題為讀者們介紹一些重復性的靜態界面繪制小技巧。

Shape.StrokeDashArray屬性

Windows.UI.Xaml.Shapes.Shape基類，以及繼承自它的Ellipse、Line、Path、Rectangle等類，都具有一些Stroke****之名的屬性，可以實現描邊效果。其中有一個比較特別的StrokeDashArray屬性，它能實現虛線型的描邊效果，加以擴展的話是我們實現重復性UI繪制的好幫手。

在XAML中，這一屬性表現為形如”1,2,3,4”的字符串格式，而本質上它是一個DoubleCollection。其中的數值兩兩配對，依次表示虛線的短劃線和空白間隔的長度，并且能周期性地出現。如果數值個數只有奇數個，那么匹配不滿的那一組中，空白間隔的長度將和短劃線的長度一致。

PS：關于這一屬性的具體語法，UWP MSDN^[1]沒有很詳細的描述。不過舊版本的API MSDN^[2]中有對其語法的接受，這部分內容可以參考舊版本的頁面。

直觀地看一下這個屬性的使用：

可以看到構成了短劃線和空白間隔長度依次為1,2,3,4的虛線。這里是指的單位長度，和StrokeThickness屬性有關，該屬性的值會被作為單位長度。而Line長度為400，故可以看到虛線按設定形成了8段。

我們現在修改一下參數：

現在短劃線和間隔的長度都是0.1單位長度，而當前的單位長度是50（也導致線段寬度更大，現在看起來像是并列的豎線了）。

我們還可以算出虛線段的數量為： 400 ÷((0.1+0.1) × 50) =40 段。

發散一下：

靈活運用這種方式，可以在XAML里直接畫出一些重復的UI元素了，比如這樣：

<Grid> <Grid Width="400" Height="200"><Canvas><Line X2="400"Y2="400"Stroke="Red"StrokeThickness="570"StrokeDashArray="0.02 0.06"><Line.Clip><RectangleGeometry Rect="0 0 400 200" /></Line.Clip></Line><Line X2="400"Y2="400"Stroke="Blue"StrokeThickness="570"StrokeDashArray="0.02 0.06"StrokeDashOffset="0.04"><Line.Clip><RectangleGeometry Rect="0 0 400 200"/></Line.Clip></Line></Canvas><Rectangle Margin="10" Fill="White" /><TextBlock FontSize="60" Margin="200,100,0,0">Hello!</TextBlock></Grid> </Grid>

這里Line是呈45°的，并將它的描邊寬度設的很大（超過400*400矩形的對角線長度），并用Clip限定400*200矩形范圍。

其中還用到了StrokeDashOffset屬性來設定StrokeDashArray的初始偏移量，這里也是指單位長度。

還可以用于Ellipse：

這段XAML中設置的StrokeDashArray="61.89,1000"可能很讓人摸不著頭腦。

我們可以看出這個圓形長寬都是200，周長最多不過600多，我們將代表空白部分的值設置為1000（遠大于200π），用于將進度條未滿的部分全部作為空白部分，隱藏掉。

至于前面一個數值是如何計算的，過程比較復雜：

首先要考慮的是圓的周長，但這是否是上面說的200π呢？實際上不是。200是來自于我們在XAML里設定的Width和Height，但Stroke在計算時采用的是ActualWidth和ActualHeight，這里可以理解為Shape控件的中心線段，即是我們在XAML設計器里選中一個Shape控件后可以看見的這條線（箭頭所指）：

因此這里的ActualWidth = Width – StrokeThickness = 200 - 3 = 197。

再以此計算30%進度條的長度為：197π × 30% ÷ 3 = 61.889（不要忘了除以單位長度~）。

我們在項目里遇到的情況是：

需要畫出精準的時鐘刻度，一圈分針一圈時針：

大家注意到了這段XAML中應用了一個自定義的IValueConverter——CircleStrokeDashArrayConverter。此類源碼如下：

public class CircleStrokeDashArrayConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language){Debug.Assert(value is Shape);Shape shape = (Shape)value;double segNum = double.Parse(parameter.ToString());double offset = shape.StrokeDashOffset;double width = shape.Width;double thickness = shape.StrokeThickness;double visibleLen = offset * 2;
double length = (width - thickness) * Math.PI / segNum / thickness;return new DoubleCollection(new [] { visibleLen, (length - visibleLen) });}public object ConvertBack(object value, Type targetType, object parameter, string language) {throw new NotImplementedException();} }

使用時我們需要在Binding中將Ellipse本身傳入converter。Converter從Ellipse的屬性設置中獲取信息完成StrokeDashArray的構造（注意StrokeDashArray屬性的Binding要寫在最后，這樣才能獲取到正確的值），StrokeDashOffset導致的偏移是和Shape線條的方向相反的，我們用它來設定每段短劃線的長度。并配合ConverterParameter（設定分段數）達到復用性。

PS:只能用于正圓。橢圓的周長無法簡單計算。其他的Shape就更不適用了。

對于這些無法計算path長度的Shape，需要自己調整和估計其長度。

不過StrokeDashArray的使用還有一個小問題

StrokeDashArray畫出的線段，在分段處的切口是和中心線段的切線垂直的（平行法線方向）。直觀印象如下：

（此為“坐和放寬”進度條終點處放大圖）

可以想象，包括我們畫出的鐘盤也是這種情況，每一個刻度并不是一道“線段”，而是一個小小的“扇形”，雖然在視覺上并不明顯。

其實這并不是什么嚴重的問題啦，當然有時會的確不能符合需求。就此我們將在另一篇博文中介紹更完善、更適用的解決方案。

參考

Shape.StrokeDashArray屬性：https://msdn.microsoft.com/en-us/library/windows.ui.xaml.shapes.shape.strokedasharray.aspx

Shape.StrokeDashArray屬性（for Sliverlight。語法詳細說明）：https://msdn.microsoft.com/en-us/library/bb980148(v=vs.95).aspx

posted on 2017-09-20 13:50 NET未來之路閱讀(...) 評論(...) 編輯收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/7561100.html

總結

以上是生活随笔為你收集整理的Win10 UWP开发中的重复性静态UI绘制小技巧 1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Solr 查询时候关键期编码问题
下一篇： ef AddDays报错