淺談Fluent Ribbon 中的SplitButton

　　Fluent Ribbon Control Suite 就不做介紹了，網上的例子比較多，類似Office2007及以后版本的圖形界面（菜單欄）。官網地址：https://github.com/fluentribbon/Fluent.Ribbon，這里主要分享一下其中一個控件的用法。

　　最終實現效果：

　　A、類似Office的粘貼，可點擊粘貼下面的小箭頭圖標，進行“選擇性粘貼”等等；

         

　　B、類似Office的邊框工具條，可進行不同工具條的切換。　

    　  

　　由於網上大部分介紹Fluent Ribbon的主要為各種界面層次的關系，具體的控件介紹較少。后來，官網上下了相關例子，學習了下。實現A的效果直接用自帶的控件SplitButton即可；而實現B的效果，一直沒找到合適的。其實在SplitButton基礎上稍微進行擴展即可。

　　SplitButton顧名思義就是分割按鈕，我理解為“按鈕+其子按鈕”。本身是個父控件，可以包含子（MenuItem）。下面分兩塊介紹A和B的實現，重點是B。

一、A效果的實現

　　直接貼官方的例子代碼：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效果的實現

　　由於在實際運用中，我參與的項目直接采用配置文件配置功能菜單，所以相關代碼寫在框架中了。這里又單獨抽離出來，進行了控件的擴展，相關代碼入下：

C# 擴展控件代碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Fluent;

namespace Fluent.Sample.Control
{
    /// <summary>
    /// 分割按鈕--擴展
    /// 效果：實現不同工具條的切換
    /// </summary>
    public class SplitButtonEx : SplitButton
    {
        private object m_SelectedObject = null;//選擇的對象

        /// <summary>
        /// 構造
        /// </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;

            //設置當前未選中的子
            if (SelectedIndex > -1 && this.Items.Count > SelectedIndex)
            {
                MenuItemEx item = this.Items[SelectedIndex] as MenuItemEx;
                SetObject(item);
            }
        }

        /// <summary>
        /// 設置對象
        /// </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>
        /// 構造
        /// </summary>
        public MenuItemEx()
        {

        }

        /// <summary>
        /// 觸發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中的“粘貼”，設置的是“Large"。