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

posted @ 2015-05-27 15:29  简单程序员  阅读(2862)  评论(2编辑  收藏  举报