UWP 模仿嗶哩嗶哩的一鍵三連

什麼是一鍵三連？

去年在雲之幻大佬的嗶哩專案裡看到一鍵三連的 uwp 實現，覺得挺有趣的，這次參考它的**重新實現一次，最終成果如下：

下面這些是一鍵三連的核心功能：

這篇文章將介紹如何使用自定義控制項實現上面的功能。寫簡單的自定義控制項的時候，我推薦先寫完**，然後再寫控制項模板，但這個控制項也適合一步步增加功能，所以這篇文章用逐步增加功能的方式介紹如何寫這個控制項。

萬事起頭難，做控制項最難的是決定控制項名稱。不過反正也是玩玩的 demo，就隨便些用 progressbutton 吧，因為有進度又可以點選。

第二件事就是決定這個按鈕繼承自哪個控制項，可以選擇繼承 button 或 rangebase 以減少需要自己實現的功能。因為長按這個需求破壞了點選這個行為，所以還是放棄 button 選擇 rangebase 比較好。然後再加上 content 屬性，控制項的基礎**如下：

[contentproperty(name = nameof(content))]
public partial class progressbutton : rangebase
public object content
}

在控制項模板中用乙個 cornerradius 很大的 border 模仿圓形邊框，contentcontrol 顯示 content，radialprogressbar 顯示進度，控制項模板的大致結構如下：

這時候的呼叫方式及效果如下所示：

有了上面的**，後面的功能只需要按部就班地乙個個新增上去。我從以前的**裡抄來狀態相關的**。雖然定義了這麼多狀態備用，其實我也只用到 idle 和 completed，其它要用到的話可以修改 controltemplate。

public enum progressstate

在控制項模板中新增乙個粉紅色的帶乙個同色陰影的圓形背景，其它狀態下隱藏，在切換到 completed 狀態時顯示。為了好看，還新增了 implictanimation 控制淡入淡出。

在 visualstatemanager 中加入 progressstates 這組狀態，只需要控制 completed 狀態的 setters，顯示粉紅色的背景，隱藏邊框，文字變白色。

作為乙個 button，按鈕的 pointover 和 pressed 狀態當然必不可少，這些邏輯我參考了真篇文章最後一部分**（不過我沒有加入 click 事件）。在控制項模板中也製作了最簡單的處理：

氣泡動畫**於火火的 bubblebutton，它封裝得很優秀，progressbutton 只需要在 completed 狀態下設定bubbleview.isbubbing = true即可觸發氣泡動畫，這大大減輕了 xaml 的工作：

由於一鍵三連屬於業務方面的功能（要聯網、檢查狀態、還可能回退），不屬於控制項應該提供的功能，所以 progressbutton 只需要實現到這一步就完成了。

終於要實現一鍵三連啦。首先建立三個 progressbutton，然後互相雙向繫結 value 的值並訂閱事件：

holding 的**就複雜一些，設定乙個動畫的 taget 然後啟動動畫，動畫完成後把所有 progressbutton 的狀態改為 completed，最後效果可以參考文章開頭的 gif：

private void ongesturerecognizerholding(object sender, windows.ui.input.holdingeventargs e)
}else
}private void onprogressstoryboardcompleted(object sender, object e)

很久沒有認真寫 uwp 的部落格了，我突然有了個大膽的想法，在這個時間點，會不會就算我胡說八道都不會有人認真去驗證我寫的內容？畢竟現在寫 uwp 的人又不多。不過放心，我對 uwp 是認真的，我保證我是個誠實的男人。

不過這個一鍵三連功能做出來後，又好像，完全沒機會用到嘛。難得都做出來了，就用來皮一下。

UWP 模仿嗶哩嗶哩的一鍵三連

嗶哩嗶哩嗶哩嗶哩，危！！！

20190910嗶哩嗶哩

嗶哩嗶哩資源庫

UWP 模仿嗶哩嗶哩的一鍵三連

嗶哩嗶哩 嗶哩嗶哩，危！！！

20190910嗶哩嗶哩

嗶哩嗶哩資源庫

相關推薦

嗶哩嗶哩嗶哩嗶哩，危！！！