浅谈Fluent Ribbon 中的SplitButton
Fluent Ribbon Control Suite 就不做介紹了,網(wǎng)上的例子比較多,類似Office2007及以后版本的圖形界面(菜單欄)。官網(wǎng)地址:https://github.com/fluentribbon/Fluent.Ribbon,這里主要分享一下其中一個控件的用法。
最終實現(xiàn)效果:
A、類似Office的粘貼,可點擊粘貼下面的小箭頭圖標,進行“選擇性粘貼”等等;
? ? ? ? ?
B、類似Office的邊框工具條,可進行不同工具條的切換。
? ? ??
由于網(wǎng)上大部分介紹Fluent Ribbon的主要為各種界面層次的關(guān)系,具體的控件介紹較少。后來,官網(wǎng)上下了相關(guān)例子,學習了下。實現(xiàn)A的效果直接用自帶的控件SplitButton即可;而實現(xiàn)B的效果,一直沒找到合適的。其實在SplitButton基礎(chǔ)上稍微進行擴展即可。
SplitButton顧名思義就是分割按鈕,我理解為“按鈕+其子按鈕”。本身是個父控件,可以包含子(MenuItem)。下面分兩塊介紹A和B的實現(xiàn),重點是B。
一、A效果的實現(xiàn)
直接貼官方的例子代碼:SplitButton和MenuItem都有Click事件,這里不再一一說明。
WPF界面代碼:
<Fluent:SplitButton Name="buttonRed" Header="Red" Icon="Images\Red.png" LargeIcon="Images\RedLarge.png" SizeDefinition="Large" Click="buttonRed_Click_1"><Fluent:MenuItem Header="Pink" Icon="Images\Pink.png"> </Fluent:MenuItem><Fluent:MenuItem Header="Orange" Icon="Images\Orange.png" ToolTip="Regular Tooltip" /></Fluent:SplitButton>二、B效果的實現(xiàn)
由于在實際運用中,我參與的項目直接采用配置文件配置功能菜單,所以相關(guān)代碼寫在框架中了。這里又單獨抽離出來,進行了控件的擴展,相關(guān)代碼入下:
C# 擴展控件代碼:
using System; using System.Collections.Generic; using System.Linq; using System.Text; using Fluent;namespace Fluent.Sample.Control {/// <summary>/// 分割按鈕--擴展/// 效果:實現(xiàn)不同工具條的切換/// </summary>public class SplitButtonEx : SplitButton{private object m_SelectedObject = null;//選擇的對象/// <summary>/// 構(gòu)造/// </summary>public SplitButtonEx(){SelectedIndex = 0;//默認為第一個m_SelectedObject = null;this.Click -= new System.Windows.RoutedEventHandler(SplitButtonEx_Click);this.Click += new System.Windows.RoutedEventHandler(SplitButtonEx_Click);}/// <summary>/// 初始化時選擇的子索引/// </summary>public int SelectedIndex{set;get;}/// <summary>/// 重載初始化完成/// </summary>public override void EndInit(){base.EndInit();if (0 == this.Items.Count) return;//設(shè)置當前未選中的子if (SelectedIndex > -1 && this.Items.Count > SelectedIndex){MenuItemEx item = this.Items[SelectedIndex] as MenuItemEx;SetObject(item);}}/// <summary>/// 設(shè)置對象/// </summary>/// <param name="item"></param>public void SetObject(MenuItemEx item){if (null != item.ToolTip)this.ToolTip = item.ToolTip.ToString();if (null != item.Header)this.Header = item.Header.ToString();if (null != item.Icon){this.LargeIcon = item.Icon.ToString();this.Icon = item.Icon.ToString();}m_SelectedObject = item;}/// <summary>/// 單擊事件/// </summary>/// <param name="sender"></param>/// <param name="e"></param>void SplitButtonEx_Click(object sender, System.Windows.RoutedEventArgs e){if (0 == this.Items.Count) return;if (null == m_SelectedObject) return;(m_SelectedObject as MenuItemEx).TriggerClickEvent();}}/// <summary>/// MenuItem--擴展/// 用途:用于支持分割按鈕的擴展/// </summary>public class MenuItemEx : MenuItem{/// <summary>/// 構(gòu)造/// </summary>public MenuItemEx(){}/// <summary>/// 觸發(fā)Click事件/// </summary>public void TriggerClickEvent(){base.OnClick();}/// <summary>/// 單擊事件/// </summary>protected override void OnClick(){base.OnClick();if (null != Parent && Parent is SplitButtonEx)//修改父 {(Parent as SplitButtonEx).SetObject(this);}}} }?WPF界面代碼:
<My:SplitButtonEx x:Name="buttonRed" SelectedIndex="1" Header="Red" Icon="Images\Red.png" LargeIcon="Images\RedLarge.png" SizeDefinition="Large"><My:MenuItemEx Header="Pink" Icon="Images\Pink.png" Click="MenuItemEx_Click"></My:MenuItemEx><My:MenuItemEx Header="Orange" Icon="Images\Orange.png" ToolTip="Regular Tooltip" Click="MenuItemEx_Click_1"/> </My:SplitButtonEx>?備注:最后再提一點,SplitButton有個屬性"SizeDefinition",這個比較有用,不過該屬性值不是枚舉類型,而是字符串類型。可以為”Large、Middle、Small"三個中的任一個,為Small時和上面的效果B差不多,即不帶任何文字,只有圖標。Word中的“粘貼”,設(shè)置的是“Large"。
轉(zhuǎn)載于:https://www.cnblogs.com/xiaojian1987/p/4533317.html
總結(jié)
以上是生活随笔為你收集整理的浅谈Fluent Ribbon 中的SplitButton的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 10款经典的web前端特效的预览及源码
- 下一篇: C#中一些常用的方法使用