[UWP]UIElement.Clip雖然殘廢,但它還可以這樣玩

来源:https://www.cnblogs.com/dino623/archive/2019/12/02/UWP_UIElement_Clip.html

1. 複習一下WPF的UIElement.Clip 用了很久很久的WPF,但幾乎沒有主動用過它的Clip屬性,我只記得它很靈活,可以裁剪出多種形狀。在 "官方文檔" 複習了一下,大致用法和效果如下: WPF的Clip是一個 "Geometry" 屬性,它有多種派生類: 有這麼多種Geometry,W ...


1. 複習一下WPF的UIElement.Clip

用了很久很久的WPF,但幾乎沒有主動用過它的Clip屬性,我只記得它很靈活,可以裁剪出多種形狀。在官方文檔複習了一下,大致用法和效果如下:

<Image 
  Source="sampleImages\Waterlilies.jpg" 
  Width="200" Height="150" HorizontalAlignment="Left">
  <Image.Clip>
    <EllipseGeometry
      RadiusX="100"
      RadiusY="75"
      Center="100,75"/>
  </Image.Clip>
</Image>

WPF的Clip是一個Geometry屬性,它有多種派生類:

有這麼多種Geometry,WPF的UIElement就可以裁剪成各種奇形怪狀的形狀,過去也有很多示例和文章講解過如何利用WPF的Clip,這裡就割愛了。

2. UWP中的UIElement.Clip

WPF的Clip真的為所欲為,然而到了UWP就變得綁手綁腳了,因為UWP的UIElement.Clip居然是個RectangleGeometry屬性,也就是說UIElement只能接受矩形的裁剪區域,這已經不是簡單,近乎殘廢了。具體用法差不多:

<Canvas>
    <Image Source="Images/Water_lilies.jpg" Width="200" Height="150">
        <Image.Clip>
            <RectangleGeometry Rect="100 75 50 50"/>
        </Image.Clip>
    </Image>
</Canvas>

其實Win2D和CompositionAPI可以做到複雜的裁剪,但用起來也比較複雜啊。也許UWP的理念是將XAML做成一個簡單好用的工具,更複雜的內容全部交給Win2D和CompositionAPI實現?

3. 也許用不著Clip?

如果只能簡單地剪切出矩形區域的話,很多時候都用不著Clip,在XAML中有其它方法可以實現需要的功能。

例如上面這個長陰影的失敗例子,我應該裁剪超過邊框的元素,如果要用Clip,XAML要這樣寫:

<StackPanel Background="#FFE87A69"
            x:Name="ShadowBorder">
    <StackPanel.Clip>
        <RectangleGeometry Rect="0 0 600 160" />
    </StackPanel.Clip>
…
…
</StackPanel>

雖然最終實現了我要的想過,但一點都不開心,因為寫死的尺寸都不優雅。或者可以綁定到ActualHeight和ActualWidth?反正我沒有試過。

在用WPF時我也常常遇到這種問題,但我總是用ScrollViewer解決,ScrollViewer本身就有提供Clip的功能,代碼如下:

<ScrollViewer Padding="0"
              BorderThickness="0"
              HorizontalScrollBarVisibility="Disabled"
              VerticalScrollBarVisibility="Disabled">
    <StackPanel Background="#FFE87A69"
                x:Name="ShadowBorder">
        ...
        ...
    </StackPanel>
</ScrollViewer>

XAML胖點就胖點吧,又不會怎樣。

不過UWP有個神奇的功能,CornerRadius設置為大於0的值就會裁剪範圍外的內容,畢竟有了圓角不裁剪的話會很難看?所以UWP貼心地幫忙做了這個操作?算了不管原理了,反正一個像素的圓角,你不說我不說沒人會看得出來,安心地這樣用比自己設置Clip方便多了。

<StackPanel Background="#FFE87A69"  CornerRadius="1">

看吧,1像素的圓角真的很難發現。最近WinUI改版,它的圓角做成2像素了,就是因為1像素真的看不出來。

4. Clip還可以這樣玩

上面介紹到如何使用、或者不使用Clip裁剪範圍內的劇情區域。除此之外,因為可以指定裁剪的起始和結束為止,還是有不少可玩的地方。

上面這個懂的人都懂的中二病紅和智障藍組成的番茄鐘就用了Clip,簡單地將同一個文字複製出來兩份,以中間為屆分別裁剪出上半部分和下半部分,再分別向兩邊做位移的Spring動畫,這樣就能做出切開的效果:

<Grid Height="1050" Width="1920" x:Name="ContentArea" RenderTransformOrigin="0.5,0.5" >
    <Grid.RenderTransform>
        <CompositeTransform Rotation="-8"/>
    </Grid.RenderTransform>
    <Grid >
        <Grid x:Name="FocusElementTop">
            <Grid.Clip>
                <RectangleGeometry Rect="-1000,-1000,3920,1525"/>
            </Grid.Clip>
            <TextBlock Style="{StaticResource FocusText}" />
        </Grid>
        <Grid x:Name="FocusElementBottom">
            <Grid.Clip>
                <RectangleGeometry Rect="-1000,525,3920,1525"/>
            </Grid.Clip>
            <TextBlock Style="{StaticResource FocusText}" />
        </Grid>
        <Grid x:Name="RelaxElementTop">
            <Grid.Clip>
                <RectangleGeometry Rect="-1000,-1000,3920,1525"/>
            </Grid.Clip>
            <TextBlock Style="{StaticResource RelaxText}"/>
        </Grid>
        <Grid x:Name="RelaxElementBottom">
            <Grid.Clip>
                <RectangleGeometry Rect="-1000,525,3920,1525"/>
            </Grid.Clip>
            <TextBlock Style="{StaticResource RelaxText}"/>
        </Grid>
    </Grid>
</Grid>

做UWP應用不需要太介意性能,UWP的的性能比WPF好太多,而且都2019年了,那些少記憶體就不要客氣了。上面這個懂的人都懂的五等分配色的番茄鐘就毫不客氣地疊加再疊加,每個部分用了不同的Clip,背景和文字用了不同時間的Spring動畫,出來的效果很有趣。XAML大致上是這樣:

<Grid Width="1600"
      HorizontalAlignment="Left">
    <Grid Background="#f8a9a2">
        <UIElement.Clip>
            <RectangleGeometry Rect="000,-1000,320,5050" />
        </UIElement.Clip>
        <controls:HeaderedContentControl Foreground="White"
                                         Header="FOCUS ON JOB"/>
    </Grid>
    <Grid Background="White">
        <UIElement.Clip>
            <RectangleGeometry Rect="320,-1000,320,5050" />
        </UIElement.Clip>
        <controls:HeaderedContentControl Foreground="#ed4e5d"
                                         Header="FOCUS ON JOB"/>
    </Grid>
    <Grid Background="#974945">
        <UIElement.Clip>
            <RectangleGeometry Rect="640,-1000,320,5050" />
        </UIElement.Clip>
        <controls:HeaderedContentControl Foreground="White"
                                         Header="FOCUS ON JOB"/>
    </Grid>
    <Grid Background="White">
        <UIElement.Clip>
            <RectangleGeometry Rect="960,-1000,320,5050" />
        </UIElement.Clip>
        <controls:HeaderedContentControl Foreground="#ef804b"
                                         Header="FOCUS ON JOB"/>
    </Grid>
    <Grid Background="#e74b36">
        <UIElement.Clip>
            <RectangleGeometry Rect="1280,-1000,320,5050" />
        </UIElement.Clip>
        <controls:HeaderedContentControl Foreground="White"
                                         Header="FOCUS ON JOB"/>
    </Grid>
</Grid>

5. 也許真用不著Clip?

不要因為學會用Clip了就什麼地方都用Clip,有時候並不需要用到。例如上面這個,看上去文字是從Clip外面的區域進入的,但其實並沒有用到Clip,只是調整了Canvas.ZIndex遮住不需要的部分而已。

6. 結語

UWP中其實有幾種裁剪方案,最殘廢的是UIElement.Clip,也就是這篇文章提到的這個。上一篇文章還講解了Win2D中裁剪。其實CompositionAPI也有它的裁剪方案,下一篇文章將介紹CompositionAPI的Clip用法。

順便一提,火火提到WPF可以用UIElement.ClipToBounds。因為Silverlight沒有這個屬性,而我很多控制項SL和WPF都用同一套代碼,所以以前很少用到這個屬性,很偶爾偶爾才會想起有這個屬性,例如這麼用:

[WPF 自定義控制項]自定義Expander

7. 參考

UIElement.Clip 屬性 (System.Windows) _ Microsoft Docs

UIElement.Clip Property (Windows.UI.Xaml) - Windows UWP applications _ Microsoft Docs

RectangleGeometry Class (Windows.UI.Xaml.Media) - Windows UWP applications _ Microsoft Docs

8. 源碼

OnePomodoro_DoNotDisturbView.xaml at master

OnePomodoro_SplitTo5View.xaml at master

OnePomodoro_KonosubaView.xaml at master


您的分享是我們最大的動力!

更多相關文章
  • Serverless 技術為開發人員提供了一種快速而獨立的方式將實現投入生產。這種技術在企業的技術棧中日益流行,自 2017 年以來,它一直是 ThoughtWorks 技術雷達的實驗級別的技術[譯註:技術雷達是 ThoughtWorks 每半年發佈的前沿技術解析]。 本篇文章的第一部分介紹了... ...
  • view: <form method="post" enctype="multipart/form-data" action="@Url.Action("Upload")"> <input type="file" id="file" name="file"/> <button>提交</button> ...
  • 場景 生產者和消費者隊列, 生產者有多個, 消費者也有多個, 生產到消費需要非同步. 下麵用一個Asp.NetCore Web-API項目來模擬 創建兩個API, 一個Get(), 一個Set(), Get返回一個字元串, Set放入一個字元串, Get返回的就是Set進去的字元串. 實現如下: 接著 ...
  • asp.net mvc項目使用到驗證碼,為了讓以前的WebForm代碼能利用上代碼經過稍微的改動即可使用代碼如下: 最後別忘了session的獲取設置,需要在Global.asax.cs文件中新增如下代碼: html頁面代碼: function reloadImage(url) { document ...
  • 小聲嗶嗶 一直以來對於值類型與引用類型之間的區別都不是特別清晰,直到踩了坑.... 正好最新閑暇,便想著梳理梳理這一兩年來遇到的奇葩問題和解決方案,順便就把它給拎出來記一下,免得以後再摔跤 值類型與引用類型的區別 今天為了說明值類型與引用類型的典型區別,準備把結構體(值類型)和類(引用類型)拉出來溜 ...
  • using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Diag... ...
  • 假設我們現有一個WPF程式,需要支持1903以前的Windows 10版本。同時在1903以後的版本上,額外多出一個Ink的功能。那麼我們就可以通過ApiInformation.IsApiContractPresent方法來判斷1903的API是否可用,決定要不要開放Ink功能給當前用戶。新來的同學 ...
  • 前言:在web項目的.net framework時文件上傳時,自己常用一般處理程式接受上傳文件,上傳文件的大小限制是可以項目的webconfig里配置。 到core項目使用一般處理程式變成了中間件,但是使用中間件接受的時候,就遇到了上傳大文件時,拋出的異常: httpRequest.Form thr ...
一周排行
  • 一、引言 按照專用隊列解釋: MachineName\Private$\QueueName,只針對於本機的程式才可以調用的隊列,有些情況下為了安全起見定義為私有隊列。所以剛開始的時候認為,要想訪問遠程消息隊列,只能使用公共隊列。但是後來發現,公共隊列依賴Domain Controller(域控),在 ...
  • 本文只對api介面,header請求參數進行簡單驗證,起到拋磚引玉使用,需要深入驗證,請自行擴展 項目目錄結構如圖 中間件類 using ApiMiddleware.Common.DataEnityModel; using ApiMiddleware.Common.DbContext; using ...
  • 前言:由於公司占時沒有運維,出於微服務的需要,Apollo只能先裝在windows 阿裡雲上跑起來,由於環境及網路等問題,在安裝過程中遇到很多坑,算是一個個坑填完後,最終實現。 一. java jdk環境 java jdk 1.8下載地址: https://www.oracle.com/java/t ...
  • 前言 nuget 是 .net 的常用包管理器,目前已經內置到 Visual Studio 2012 以後的版本。大多數 .net 包都托管在 nuget.org,包括 .net core 框架基礎包,得益於 .net core 的模塊化設計,很多非核心包都可以進行一定程度的獨立升級。 製作並上傳 ...
  • 簡單的介紹一下集合,通俗來講就是用來保管多個數據的方案。比如說我們是一個公司的倉庫管理,公司有一堆貨物需要管理,有同類的,有不同類的,總而言之就是很多、很亂。我們對照集合的概念對倉庫進行管理的話,那麼 數組就是將一堆貨整整齊齊的碼在倉庫的某個地方,普通列表也是如此;Set就是在倉庫里有這麼一個貨架, ...
  • 中間件分類 ASP.NET Core 中間件的配置方法可以分為以上三種,對應的Helper方法分別是:Run(), Use(), Map()。 Run(),使用Run調用中間件的時候,會直接返回一個響應,所以後續的中間件將不會被執行了。 Use(),它會對請求做一些工作或處理,例如添加一些請求的上下 ...
  • 字元串的常用操作 很好理解 字元串可以用 ' + ' 連接,或者乘一個常數重覆輸出字元串 字元串的索引操作 通過一對中括弧可以找到字元串中的某個字元 可以通過正負數雙向操作噢 用一個中括弧來實現 為什麼沒有-0??去清醒腦子想想 -0 和 0 有差嗎? 還有一個切片操作 就像切菜那樣簡單,同樣是中括 ...
  • title: Java基礎語法(3) 運算符 blog: "CSDN" data: "Java學習路線及視頻" 1.算術運算符 算術運算符的註意問題 如果對負數取模,可以把模數負號忽略不記,如:5% 2=1。 但被模數是負數則不可忽略。此外,取模運算的結果不一定總是整數。 對於除號“/”,它的整數除 ...
  • 下麵是互相轉換的代碼: 有想要瞭解更多關於python知識的請在下方評論或私信小編 ...
  • 引言 構建分散式系統並不容易。然而,人們日常所使用的應用大多基於分散式系統,在短時間內依賴於分散式系統的現狀並不會改變。ApacheZooKeeper旨在減輕構建健壯的分散式系統的任務。ZooKeeper基於 分散式計算的核心概念而設計,主要目的是給開發人員提供一套容易理解和開發的介面,從而簡化分佈 ...
x