WPF之工具栏菜单栏功能区。

lingxiao168882024-05-11 19:42

1，菜单栏，工具栏，状态栏。

1.1，Menu中可添加菜单分隔条<Separator></Separator>作为分割线，使用Separator可以通过改变其template来自定义，Separator是无焦点的，如果简单的在MenuItem中添加一个textBlock它是可以有焦点的

1.2，ToolBar没有ToolBarItem，ToolBar会将添加到其中的Button,CheckBox,Combobox样式进行修改.

1.3，通过附加属性ToolBar.OverFlowMode来设置该项的溢出方式

1.4，ToolBarTray.Band：确定工具栏放在哪一栏中（最顶部的一栏索引为0），BandIndex属性明确设置一栏中什么位置放置工具栏.

1.5，ToolBarTray.Orientation:设置工具栏方向

1.6，示例：

XML 复制代码 
<Window x:Class="目录样例.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:目录样例"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel LastChildFill="False">
        <Menu DockPanel.Dock="Top" >
            <MenuItem Header="File(_F)">
                <MenuItem Command="{x:Static ApplicationCommands.Open}"></MenuItem>
                <MenuItem Header="New(_N)" IsChecked="True" x:Name="menuitem01" ></MenuItem>
                <Separator ></Separator>
               
                <MenuItem Header="Save_S"></MenuItem>
            </MenuItem>
            <MenuItem Header="Eidt_E">
                <MenuItem Header="撤销"></MenuItem>
                <Separator>
                    <Separator.Template>
                        <ControlTemplate>
                            <Border Padding="10" BorderThickness="1" BorderBrush="Azure" CornerRadius="3">
                                <TextBlock HorizontalAlignment="Center">分割</TextBlock>
                            </Border>
                        </ControlTemplate>
                    </Separator.Template>
                </Separator>
                <Border Padding="10" BorderThickness="1" BorderBrush="Azure" CornerRadius="3">
                    <TextBlock HorizontalAlignment="Center">分割</TextBlock>
                </Border>
                <MenuItem Header="删除" InputGestureText="Ctr+D"></MenuItem>
            </MenuItem>
        </Menu>
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar Band="0" >
                <Button>Line</Button>
                <Button >Rectangle</Button>
            </ToolBar>
            <ToolBar Band="1">
                <Button>Color</Button>
                <Button >Font</Button>
            </ToolBar>
            <ToolBar Band="0" >
                <Button>One</Button>
                <Button >Two</Button>
            </ToolBar>
        </ToolBarTray>
        <StatusBar   DockPanel.Dock="Bottom">
            <!--<StatusBar.ItemTemplate>
                <ItemContainerTemplate>
                    <DockPanel></DockPanel>
                </ItemContainerTemplate>-->
            <!--</StatusBar.ItemTemplate>-->
            <StatusBarItem DockPanel.Dock="Right">账号：</StatusBarItem>
            <StatusBarItem DockPanel.Dock="Top" >状态1</StatusBarItem>
            <StatusBarItem  >状态2</StatusBarItem>
        </StatusBar>
        <ToolBarTray Orientation="Vertical" >
            <ToolBar   >
                <Button  >
                    <Button.Content>
                        <Image Source="/Img/download.png" Width="16" Height="16"></Image>
                    </Button.Content>
                </Button>
                <Button Content="Open"></Button>
                <Button Content="Save"></Button>
                <CheckBox FontWeight="Bold">Bold</CheckBox>
                <CheckBox FontStyle="Italic">Italic</CheckBox>
                <CheckBox >
                    <TextBlock TextDecorations="Underline">UnderLine</TextBlock>
                </CheckBox>
                <ComboBox ToolBar.OverflowMode="Never"  Width="80">

                    <ComboBoxItem>10%</ComboBoxItem>
                    <ComboBoxItem >20%</ComboBoxItem>
                    <ComboBoxItem>30%</ComboBoxItem>


                </ComboBox>
                <Separator></Separator>
            </ToolBar>
        </ToolBarTray>
        
    </DockPanel>
</Window>

1.7，效果：

2，功能区

2.1，使用功能区需要添加程序集System.Windows.Controls.Ribbon。

2.2，引用程序集：

XML 复制代码 
 xmlns:r="clr-namespace:System.Windows.Controls.Ribbon;assembly=System.Windows.Controls.Ribbon"

2.3，为了使快速访问工具栏出现在顶端，需要将默认继承自Window修改为继承自RibbonWindow

cs 复制代码 
 public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            InitializeComponent();
            
        }
    }
XML 复制代码 
<r:RibbonWindow x:Class="功能区.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:功能区"
        mc:Ignorable="d"
        xmlns:r="clr-namespace:System.Windows.Controls.Ribbon;assembly=System.Windows.Controls.Ribbon"
       
        Title="MainWindow" Height="350" Width="525">
    <Grid>
      
    </Grid>
</r:RibbonWindow>

2.4，示例：

XML 复制代码 
<r:RibbonWindow x:Class="功能区.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:功能区"
        mc:Ignorable="d"
        xmlns:r="clr-namespace:System.Windows.Controls.Ribbon;assembly=System.Windows.Controls.Ribbon"
       
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="279*"/>
        </Grid.RowDefinitions>
        <Ribbon>
<!--定义快速访问工具栏-->
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton Label="Cut" SmallImageSource="/Img/cut.png"></RibbonButton>
                    <RibbonButton Label="Open" SmallImageSource="/Img/open1.png"></RibbonButton>
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar>
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu SmallImageSource="Img/desktop.png">
                    <RibbonApplicationMenuItem Header="新建" ImageSource="Img/new window.png"></RibbonApplicationMenuItem>
                    <RibbonApplicationMenuItem Header="保存" ImageSource="Img/save.png">
                        <RibbonApplicationMenuItem Header="另存" ImageSource="Img/save-as.png"></RibbonApplicationMenuItem>
                    </RibbonApplicationMenuItem>
                    <RibbonSeparator></RibbonSeparator>
                    <RibbonApplicationMenuItem Header="另存" ImageSource="Img/save-as.png"></RibbonApplicationMenuItem>
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>
            <RibbonTab Header="Home" GroupSizeReductionOrder="ClipBoard,Files">
                <RibbonGroup Header="ClipBoard">
                    <RibbonButton Label="Copy" SmallImageSource="Img/copy.png" LargeImageSource="Img/copy.png"></RibbonButton>
                    <RibbonButton Label="Cut" SmallImageSource="Img/cut.png" LargeImageSource="Img/cut.png"></RibbonButton>
                    <RibbonButton Label="Paste" SmallImageSource="Img/paste.png" LargeImageSource="Img/paste.png" ToolTipTitle="粘贴" ToolTipDescription="对文档进行粘贴等操作" ToolTipImageSource="Img/cut.png" ToolTipFooterTitle="更多信息" ToolTipFooterDescription="按F1获取更多帮助" ToolTipFooterImageSource="Img/help.png"></RibbonButton>
                </RibbonGroup>
                <RibbonGroup Header="ClipBoard">
                    <RibbonButton Label="Copy" SmallImageSource="Img/copy.png" LargeImageSource="Img/copy.png"></RibbonButton>
                    <RibbonButton Label="Cut" SmallImageSource="Img/cut.png" LargeImageSource="Img/cut.png"></RibbonButton>
                    <RibbonButton Label="Paste" SmallImageSource="Img/paste.png" LargeImageSource="Img/paste.png" ToolTipTitle="粘贴" ToolTipDescription="对文档进行粘贴等操作" ToolTipImageSource="Img/cut.png" ToolTipFooterTitle="更多信息" ToolTipFooterDescription="按F1获取更多帮助" ToolTipFooterImageSource="Img/help.png"></RibbonButton>
                </RibbonGroup>
                <RibbonGroup Header="Task">
                    <RibbonButton Label="Copy" SmallImageSource="Img/copy.png" LargeImageSource="Img/copy.png"></RibbonButton>
                    <RibbonButton Label="Cut" SmallImageSource="Img/cut.png" LargeImageSource="Img/cut.png"></RibbonButton>
                    <RibbonButton Label="Paste" SmallImageSource="Img/paste.png" LargeImageSource="Img/paste.png" ToolTipTitle="粘贴" ToolTipDescription="对文档进行粘贴等操作" ToolTipImageSource="Img/cut.png" ToolTipFooterTitle="更多信息" ToolTipFooterDescription="按F1获取更多帮助" ToolTipFooterImageSource="Img/help.png"></RibbonButton>
                </RibbonGroup>
                <RibbonGroup Header="Files">
                    <RibbonButton Label="Copy" SmallImageSource="Img/copy.png" LargeImageSource="Img/copy.png"></RibbonButton>
                    <RibbonButton Label="Cut" SmallImageSource="Img/cut.png" LargeImageSource="Img/cut.png"></RibbonButton>
                    <RibbonButton Label="Paste" SmallImageSource="Img/paste.png" LargeImageSource="Img/paste.png" ToolTipTitle="粘贴" ToolTipDescription="对文档进行粘贴等操作" ToolTipImageSource="Img/cut.png" ToolTipFooterTitle="更多信息" ToolTipFooterDescription="按F1获取更多帮助" ToolTipFooterImageSource="Img/help.png"></RibbonButton>
                </RibbonGroup>
            </RibbonTab>
           
        </Ribbon>
           
      
    </Grid>
</r:RibbonWindow>

注明：

GroupSizeReductionOrder="ClipBoard,Files" ribbonTab中首先被缩小的Group。

快速访问工具栏。Ribbon.QuickAccessToolBar

2.5，效果：

相关推荐
布伦鸽5 小时前
C# WPF 左右布局实现学习笔记(1)
笔记·学习·c#·wpf
code bean1 天前
【WPF】WPF 项目实战：构建一个可增删、排序的光源类型管理界面（含源码）
wpf
沉到海底去吧Go1 天前
【图片识别改名】如何批量将图片按图片上文字重命名？自动批量识别图片文字并命名，基于图片文字内容改名，WPF和京东ocr识别的解决方案
ocr·wpf·图片识别改名·图片识别重命名·图片内容改名
lph19721 天前
自定义事件wpf
wpf
code bean2 天前
【WPF】从普通 ItemsControl 到支持筛选的 ItemsControl：深入掌握 CollectionViewSource 用法
wpf
碎碎念的安静2 天前
WPF可拖拽ListView
c#·wpf
界面开发小八哥2 天前
界面组件DevExpress WPF中文教程：Grid - 如何识别行和卡片？
.net·wpf·界面控件·devexpress·ui开发
TwilightLemon4 天前
WPF 使用CompositionTarget.Rendering实现平滑流畅滚动的ScrollViewer，支持滚轮、触控板、触摸屏和笔
wpf
Vae_Mars5 天前
WPF中自定义消息弹窗
wpf
Magnum Lehar5 天前
GameEngine游戏引擎前端界面wpf页面实现
前端·游戏引擎·wpf
热门推荐
01基于STM32的智能电池管理系统02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04VMware虚拟机安装Win7专业版保姆级教程（附镜像包）05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！07【无人机】无人机通信模块，无人机图数传模块的介绍，数传，图传，图传数传一体电台，08DeepSeek各版本说明与优缺点分析09组基轨迹建模 GBTM的介绍与实现（Stata 或 R）10海康Visionmaster-常见问题排查方法-启动阶段