UWP實現吸頂的Pivot

来源:https://www.cnblogs.com/blue-fire/archive/2019/08/19/11376450.html
-Advertisement-
Play Games

話不多說，先上效果 這裡使用了一個 "ScrollProgressProvider.cs" ，我們這篇文章先解析一下整體的動畫思路，以後再詳細解釋這個Provider的實現方式。 結構 整個頁面大致結構是 這個Header是修改的ListBox，當然也可以用ListView代替。 隱藏Pivot預設 ...


話不多說，先上效果

這裡使用了一個ScrollProgressProvider.cs，我們這篇文章先解析一下整體的動畫思路，以後再詳細解釋這個Provider的實現方式。

結構

整個頁面大致結構是

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid x:Name="Target">
        <TextBlock />
        <Header />
    </Grid>
    <Pivot.ItemTemplate Grid.RowSpan="2">
        <Pivot.ItemTemplate>
            <DataTemplate>
                <ScrollViewer x:Name="sv">
                    <StackPanel>
                        <Border Margin="0,250,0,0" />
                    </StackPanel>
                </ScrollViewer>
            </DataTemplate>
        </DataTemplate>
    </Pivot.ItemTemplate>
</Grid>

這個Header是修改的ListBox，當然也可以用ListView代替。
隱藏Pivot預設Header的方式是在Pivot的樣式中找到如下行。

<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
    <Grid x:Name="PivotLayoutElement">
        <Grid.RowDefinitions>
            <RowDefinition Height="0" /><!--修改這行為0-->
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
    ...

動畫過程大致就是在Pivot頁面切換時，查找到當頁的ScrollViewer，綁定動畫。

查找

大家在爬視圖樹時，應該經常遇到元素還未載入的情況，這裡為瞭解決這種狀況，封裝了一個WaitForLoaded方法。

private async Task<T> WaitForLoaded<T>(FrameworkElement element, Func<T> func, Predicate<T> pre, CancellationToken cancellationToken)
{
    TaskCompletionSource<T> tcs = null;
    try
    {
        tcs = new TaskCompletionSource<T>();
        cancellationToken.ThrowIfCancellationRequested();
        var result = func.Invoke();
        if (pre(result)) return result;


        element.Loaded += Element_Loaded;

        return await tcs.Task;

    }
    catch
    {
        element.Loaded -= Element_Loaded;
        var result = func.Invoke();
        if (pre(result)) return result;
    }

    return default;


    void Element_Loaded(object sender, RoutedEventArgs e)
    {
        if (tcs == null) return;
        try
        {
            cancellationToken.ThrowIfCancellationRequested();
            element.Loaded -= Element_Loaded;
            var _result = func.Invoke();
            if (pre(_result)) tcs.SetResult(_result);
            else tcs.SetCanceled();
        }
        catch
        {
            System.Diagnostics.Debug.WriteLine("canceled");
        }
    }

}

使用起來是這樣的

CancellationTokenSource cts;
private async void EventChanged(object sender, EventArgs e)
{
    if (cts != null) cts.Cancel();
    cts = new CancellationTokenSource(TimeSpan.FromSeconds(2));
    var child = await WaitForLoaded(element, () => find_element_method(), c => judge_find_success_method(), cts.Token);
}

我們在Pivot的SelectionChanged事件里，修改ScrollProgressProvider托管的ScrollViewer，provider就會自動將ScrollViewer設置到正確的位置。

接下來在Page的Loaded事件中綁定動畫，這裡有兩種選擇。provider提供了ProgressChanged事件和GetProgressPropertySet方法。可以在ProgressChanged事件中直接設置元素的值來實現動畫，不過由於ScrollViewer的限制，ProgressChanged事件觸發頻率不是很高，所以更推薦使用GetProgressPropertySet獲取到CompositionPropertySet，通過Composition Api實現動畫。

var providerProp = provider.GetProgressPropertySet();
var gv = ElementCompositionPreview.GetElementVisual(Target); // 容器Visual
var tv = ElementCompositionPreview.GetElementVisual(HeaderText); //文本Visual

ScrollProgressProvider生成的PropertySet內有progress和threshold兩個欄位可以用作動畫。
Composition Api提供了Lerp(start, end, progress)方法，用在此處剛好合適。
我們需要定義容器平移，文本平移和文本縮放三個動畫。

容器平移向上移動閾值的高度

var gvOffsetExp = Window.Current.Compositor.CreateExpressionAnimation("Vector3(0f, -provider.threshold * provider.progress, 0f)");
gvOffsetExp.SetReferenceParameter("provider", providerProp);
gv.StartAnimation("Offset", gvOffsetExp);

文本平移動畫從容器中心平移到左下角

var startOffset = "Vector3((host.Size.X - this.Target.Size.X) / 2, (host.Size.Y - 50 - this.Target.Size.Y) / 2, 1f)";
var endOffset = $"Vector3(0f, provider.threshold, 1f)";
var offsetExp = Window.Current.Compositor.CreateExpressionAnimation($"lerp({startOffset}, {endOffset}, provider.progress)");
offsetExp.SetReferenceParameter("host", gv);
offsetExp.SetReferenceParameter("provider", providerProp);
tv.StartAnimation("Offset", offsetExp);

文本縮放

var scale = "(50f / this.Target.Size.Y)";
var startScale = "Vector3(1f, 1f, 1f)";
var endScale = $"Vector3({scale}, {scale}, 1f)";
var scaleExp = Window.Current.Compositor.CreateExpressionAnimation($"lerp({startScale}, {endScale}, provider.progress)");
scaleExp.SetReferenceParameter("host", gv);
scaleExp.SetReferenceParameter("provider", providerProp);
tv.StartAnimation("Scale", scaleExp);

觸摸

觸摸比起滑鼠點擊要更複雜一些。
Pivot應該是UWP內置控制項里比較玄學的一個了。
對於滑鼠操作，Pivot會先觸發SelectionChanged事件，再觸發PivotItemLoaded事件，並且播放動畫。
而對於觸摸事件，整個順序是相反的。手指開始滑動界面時，可以被看到的Item會開始載入，並且觸發PivotItemLoaded事件，鬆手之後才開始計算是否應該導航到其他頁，並且決定是否觸發SelectionChanged事件。這樣就會有一個問題，我們在SelectionChanged中修改ScrollViewer偏移之前，我們已經能看到他了，這時的高度是不正確的。我們需要抽象出一個可以在滑鼠和觸摸觸發事件時將下一個Item的ScrollViewer設置為正確偏移的方法。
我的想法很簡單，將所有已載入的頁內的ScrollViewer緩存下來，隨著Progress的改變而改變，做法也很簡單。


private HashSet<ScrollViewer> scrolls = new HashSet<ScrollViewer>();
private async void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ...
    scrolls.Remove(provider.ScrollViewer);
}

private void Pivot_PivotItemLoaded(Pivot sender, PivotItemEventArgs args)
{
    var sv = (args.Item.ContentTemplateRoot as FrameworkElement).FindName("sv") as ScrollViewer;
    if (sv != provider.ScrollViewer)
    {
        sv.ChangeView(null, provider.Progress * provider.Threshold, null, true);
        scrolls.Add(sv);
    }
}


private void Pivot_PivotItemUnloading(Pivot sender, PivotItemEventArgs args)
{
    var sv = (args.Item.ContentTemplateRoot as FrameworkElement).FindName("sv") as ScrollViewer;
    if (sv != null)
    {
        scrolls.Remove(sv);
    }
}

private void Provider_ProgressChanged(object sender, double args)
{
    foreach (var sv in scrolls)
    {
        sv.ChangeView(null, provider.Progress * provider.Threshold, null, true);
    }
}

需要註意的是，我們要在載入完成事件中獲取ScrollViewer，而在卸載開始事件中移除ScrollViewer。

GitHub: https://github.com/cnbluefire/ShyHeaderPivot
ExpressionAnimation:
https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Composition.ExpressionAnimation
CompositionAnimation: https://docs.microsoft.com/zh-cn/windows/uwp/composition/composition-animation
我的博客: 超威藍火


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

-Advertisement-
Play Games
更多相關文章
  • abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十四)
    上接(abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十三) )，在這一篇文章中我們實現新增供應商的相關功能。 我們先來看一下 “ABP.TPLMS.Web.Mvc”項目中的wwwroot目錄下的view-resources\Use... ...
  • mvc偽靜態
    方法一：IIS配置偽靜態 方法二:項目配置偽靜態 網站配置文件Web.config <system.webServer> <handlers> <add name="html_PageHandlerFactory" path="*.html" verb="*" type="System.Web.UI ...
  • （四十）c#Winform自定義控制項-開關
    前提 入行已經7,8年了，一直想做一套漂亮點的自定義控制項，於是就有了本系列文章。 開源地址：https://gitee.com/kwwwvagaa/net_winform_custom_control 如果覺得寫的還行，請點個 star 支持一下吧 歡迎前來交流探討： 企鵝群568015492 目錄 ...
  • WPF之動態載入曲線
    首先說一下思路: 先創建一個控制項(其實就是一個canvas),在canvas裡面生成一條線,給這條線綁定一個PointCollection,在主界面中用一個定時器改變這個PointCollection的值就行了. 1.創建的控制項 public partial class BrokenLine : U ...
  • C# 微信消息模板 發送
    項目要用到微信提醒 ，加上調轉到小程式頁面，或者 指定url 用到 RestSharp、Senparc.Weixin 類庫 一開始直接照著微信示例直接post進去 發現一直提示 47001 ，估計是我姿勢水平不太夠，還是用個類庫操作吧 ...
  • C#面試基礎知識點:值類型和引用類型(1)(填坑文)
    [TOC] 時間:2019年08月19日 前言 今天去面試，技術主管問我值類型和引用類型有什麼區別，面對如此基礎的知識只能怪自己沒有好好準備以及只顧寫代碼對一些基礎知識其然不知所以然，於是我含含糊糊回答了一番： 值類型 數據類型 int float double datetime等數據類型為值類型。 ...
  • （17）ASP.NET Core EF基於數據模型創建資料庫
    1.簡介 使用Entity Framework Core構建執行基本數據訪問的ASP.NET Core MVC應用程式。使用遷移（Migrations）基於數據模型創建資料庫，你可以在Windows上使用Visual Studio 2017 PowerShell或在Windows、macOS或Lin ...
  • C# 複製Excel單元格格式
    本文將介紹通過C# 複製Excel單元格格式的方法，包括複製單元格中的字體、字型大小、字體加粗、傾斜、單元格背景色、字體顏色、單元格數字格式、單元格文字方向、文字旋轉、下劃線、單元格對齊方式、單元格邊框等。C# 複製Excel工作表可參考這篇文章。 使用工具：Free Spire.XLS for .NE ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類