浅谈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"。