[WPF自定義控制項庫]瞭解WPF的佈局過程,並利用Measure為Expander添加動畫

来源:https://www.cnblogs.com/dino623/archive/2019/07/17/Resizer.html
-Advertisement-
Play Games

1. 前言 這篇文章介紹WPF UI元素的兩步佈局過程,並且通過Resizer控制項介紹只使用Measure可以實現些什麼內容。 我不建議初學者做太多動畫的工作,但合適的動畫可以引導用戶視線,提升用戶體驗。例如上圖的這種動畫,這種動畫挺常見的,在內容的高度改變時動態地改變自身的高度,除了好看以外,對用 ...


1. 前言

這篇文章介紹WPF UI元素的兩步佈局過程,並且通過Resizer控制項介紹只使用Measure可以實現些什麼內容。

我不建議初學者做太多動畫的工作,但合適的動畫可以引導用戶視線,提升用戶體驗。例如上圖的這種動畫,這種動畫挺常見的,在內容的高度改變時動態地改變自身的高度,除了好看以外,對用戶體驗也很有改善。可惜的是WPF本身沒有預設這種這方面的支持,連Expander的展開/摺疊都沒有動畫。為此我實現了一個可以在內容大小改變時以動畫的方式改變自身大小的Resizer控制項(想不到有什麼好的命名,請求建議)。其實老老實實從Silverlight Toolkit移植AccordionItem就好,但我想通過這個控制項介紹一些佈局(及動畫)的概念。Resizer使用方式如下XAML所示:

<StackPanel>
    <kino:KinoResizer HorizontalContentAlignment="Stretch">
        <Expander Header="Expander1">
            <Rectangle Height="100"
                       Fill="Red" />
        </Expander>
    </kino:KinoResizer>
    <kino:KinoResizer HorizontalContentAlignment="Stretch">
        <Expander Header="Expander2">
            <Rectangle Height="100"
                       Fill="Blue" />
        </Expander>
    </kino:KinoResizer>
</StackPanel>

2. 需要瞭解的概念

為了實現這個控制項首先要瞭解WPF UI元素的佈局過程。

2.1 兩步佈局過程

WPF的佈局大致上分為Measure和Arrange兩步,佈局元素首先遞歸地用Measure計算所有子元素所需的大小,然後使用Arrange實現佈局。

以StackPanel為例,當StackPanel需要佈局的時候,它首先會得知有多少空間可用,然後用這個可用空間詢問Children的所有子元素它們需要多大空間,這是Measure;得知所有子元素需要的空間後,結合自身的佈局邏輯將子元素確定實際尺寸及安放的位置,這是Arrange。

當StackPanel需要重新佈局(如StackPanel的大小改變),這時候StackPanel就重覆兩步佈局過程。如果StackPanel的某個子元素需要重新佈局,它也會通知StackPanel需要重新佈局。

2.2 MeasureOverride

MeasureOverride在派生類中重寫,用於測量子元素在佈局中所需的大小。簡單來說就是父元素告訴自己有多少空間可用,自己再和自己的子元素商量後,把自己需要的尺寸告訴父元素。

2.3 DesiredSize

DesiredSize指經過Measure後確定的期待尺寸。下麵這段代碼演示瞭如何使用MeasureOverride和DesiredSize:

protected override Size MeasureOverride(Size availableSize)
{
    Size panelDesiredSize = new Size();

    // In our example, we just have one child. 
    // Report that our panel requires just the size of its only child.
    foreach (UIElement child in InternalChildren)
    {
        child.Measure(availableSize);
        panelDesiredSize = child.DesiredSize;
    }

    return panelDesiredSize ;
}

2.4 InvalidateMeasure

InvalidateMeasure使元素當前的佈局測量無效,並且非同步地觸發重新測量。

2.5 IsMeasureValid

IsMeasureValid指示佈局測量返回的當前大小是否有效,可以使用InvalidateMeasure使這個值變為False。

3. 實現

Resizer不需要用到Arrange,所以瞭解上面這些概念就夠了。Resizer的原理很簡單,Reszier的ControlTemplate中包含一個ContentControl(InnerContentControl),當這個InnerContentControl的大小改變時請求Resizer重新佈局,Resizer啟動一個Storyboard,以InnerContentControl.DesiredSize為最終值逐漸改變Resizer的ContentHeight和ContentWidth屬性:

DoubleAnimation heightAnimation;
DoubleAnimation widthAnimation;
if (Animation != null)
{
    heightAnimation = Animation.Clone();
    Storyboard.SetTarget(heightAnimation, this);
    Storyboard.SetTargetProperty(heightAnimation, new PropertyPath(ContentHeightProperty));

    widthAnimation = Animation.Clone();
    Storyboard.SetTarget(widthAnimation, this);
    Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(ContentWidthProperty));
}
else
{
    heightAnimation = _defaultHeightAnimation;
    widthAnimation = _defaultWidthAnimation;
}

heightAnimation.From = ActualHeight;
heightAnimation.To = InnerContentControl.DesiredSize.Height;
widthAnimation.From = ActualWidth;
widthAnimation.To = InnerContentControl.DesiredSize.Width;

_resizingStoryboard.Children.Clear();
_resizingStoryboard.Children.Add(heightAnimation);
_resizingStoryboard.Children.Add(widthAnimation);

ContentWidth和ContentHeight改變時調用InvalidateMeasure()請求重新佈局,MeasureOverride返回ContentHeight和ContentWidth的值。這樣Resizer的大小就根據Storyboard的進度逐漸改變,實現了動畫效果。

protected override Size MeasureOverride(Size constraint)
{
    if (_isResizing)
        return new Size(ContentWidth, ContentHeight);

    if (_isInnerContentMeasuring)
    {
        _isInnerContentMeasuring = false;
        ChangeSize(true);
    }

    return base.MeasureOverride(constraint);
}

private void ChangeSize(bool useAnimation)
{
    if (InnerContentControl == null)
    {
        return;
    }

    if (useAnimation == false)
    {
        ContentHeight = InnerContentControl.ActualHeight;
        ContentWidth = InnerContentControl.ActualWidth;
    }
    else
    {
        if (_isResizing)
        {
            ResizingStoryboard.Stop();
        }

        _isResizing = true;
        ResizingStoryboard.Begin();
    }
}

用Resizer控制項可以簡單地為Expander添加動畫,效果如下:

最後,Resizer還提供DoubleAnimation Animation屬性用於修改動畫,用法如下:

<kino:KinoResizer HorizontalContentAlignment="Stretch">
    <kino:KinoResizer.Animation>
        <DoubleAnimation BeginTime="0:0:0"
                         Duration="0:0:3">
            <DoubleAnimation.EasingFunction>
                <QuinticEase EasingMode="EaseOut" />
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </kino:KinoResizer.Animation>
    <TextBox AcceptsReturn="True"
             VerticalScrollBarVisibility="Disabled" />
</kino:KinoResizer>

4. 結語

Resizer控制項我平時也不會單獨使用,而是放在其它控制項裡面,例如Button:

由於這個控制項性能也不高,以後還可能改進API,於是被放到了Primitives命名空間。

很久很久以前常常遇到“佈局迴圈”這個錯誤,這常常出現在處理佈局的代碼中。最近很久沒遇到這個錯誤,也許是WPF變健壯了,又也許是我的代碼變得優秀了。但是一朝被蛇咬十年怕草繩,所以我很少去碰Measure和Arrange的代碼,我也建議使用Measure和Arrange要慎重。

5. 參考

FrameworkElement.MeasureOverride(Size) Method (System.Windows) Microsoft Docs.html

UIElement.DesiredSize Property (System.Windows) Microsoft Docs.html

UIElement.InvalidateMeasure Method (System.Windows) Microsoft Docs

UIElement.IsMeasureValid Property (System.Windows) Microsoft Docs

6. 源碼

Kino.Toolkit.Wpf_Resizer at master


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

-Advertisement-
Play Games
更多相關文章
  • 11-3 雇員:編寫一個名為Employee的類,其方法__init__() 接受名、姓和年薪,並將它們都存儲在屬性中。編寫一個名為give_raise()的方法,它預設將年薪增加5000美元,但也能夠接受其他的年薪增加量。 為Employee編寫一個測試用例,其包含兩個測試方法:test_give ...
  • a=1 聲明變數 a 變數的名字 = 賦值 1 值 變數定義的規則: 1. 變數由數字,字母,下劃線組成(不能加空格): a a_1 a1 2. 不能以數字開頭 3. 不能使用python中的關鍵字(寫的時候變藍了) 4. 不能使用中文和拼音 5. 區分大小寫 6. 變數名要具有描述性 7. 推薦寫 ...
  • SpringBoot快速入門--環境搭建 1、創建web工程 1.1 創建新的工程。 1.2 選擇maven工程,點擊下一步。 1.3 填寫groupid(maven的項目名稱)和artifactid(項目模塊)。點擊下一步 1.4 確認自己的項目路徑後,點擊finish。 2、添加springbo ...
  • github: 主頁: 使用手冊: LMDIF使用說明 官方英文介紹: 包括函數名 ,` lmdif1_` 最小化非線性函數平方和 函數概要 詳細描述 的目的是最小化m個n元非線性方程的平方和,使用的方法是LM演算法的改進。用戶需要提供計算方程的子程式。Jacobian矩陣會通過一個前向差分(forw ...
  • 這是一張簡單的service的繼承圖。可以看到我們的執行類,即XxxServiceImpl的繼承關係。 從上到下,ServiceImpl和BaseMapper是一個依賴關係,ServiceImpl和Iservice是一個實現關係。即ServiceImpl實現了IService中定義的方法,這裡為什麼 ...
  • 分享學習Python數據結構的一些理解,主要包含序列(如列表和元組),映射(如字典)以及集合3中基本的數據結構,以及可變和不可變數據類型。 ...
  • 1.函數的動態參數 1.1 動態接收位置參數 在參數位置用 表示接受任意參數 動態接收參數的時候要註意: 動態參數必須在位置參數後面 args 是 萬能(接受任意多個)的位置參數, 在函數定義的時候叫做 聚合 動態接收參數的時候要註意:動態參數必須在位置參數後面 優先順序:位置參數 動態位置參數 1. ...
  • 前兩天實現某個功能需要做一個提示框 並且能夠自動關閉的,就從網上搜了一個能夠自動關閉的提示框 ,但由於我需要的場景是不確定計時時間的,所以並沒有使用到該窗體,但是我覺得可以留存備用 ,後邊也把我 這種倒計時的提示框用處還是很多的,用於自動彈窗 自動關閉 ,雖然在我的項目中沒有 其核心方法在 time ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...