WPF中使用Windows.Controls.Ribbon创建一个简单画板

Windows系统自带的画图工具很完善的，如下代码只是演示创建一个简易的画板，可以做教学使用。

整体效果如下：

1. 添加组件System.Windows.Controls.Ribbon

2. 界面设计

<Window x:Class="PEN.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:PEN"

        mc:Ignorable="d"

        Background="#FF73DC73"

  

        Title="演示画板" Height="450" Width="800">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="\*"/>

        </Grid.RowDefinitions>

        <Ribbon x:Name="ribbon" Grid.Row="0">

            <Ribbon.Resources>

                <Style TargetType="RibbonRadioButton">

                    <Setter Property="CornerRadius" Value="13"/>

                    <Setter Property="Margin" Value="5 0 0 0"/>

                    <EventSetter Event="Checked" Handler="RibbonRadioButton\_Checked"/>

                </Style>

            </Ribbon.Resources>

            <Ribbon.ApplicationMenu>

                <RibbonApplicationMenu Visibility="Collapsed"/>

            </Ribbon.ApplicationMenu>

            <RibbonTab x:Name="rt1" Header="画板 ">

                <RibbonGroup Header="笔画类型">

                    <RibbonRadioButton x:Name="rrbPen" Label="钢笔" IsChecked="True" LargeImageSource="Images/P1.png"/>

                    <RibbonRadioButton x:Name="rrbHighlighter" LargeImageSource="Images/P2.png" Label="荧光笔"/>

                </RibbonGroup>

                <RibbonGroup Header="钢笔颜色">

                    <RibbonRadioButton Label="红色" IsChecked="True"  LargeImageSource="Images/red.png"/>

                    <RibbonRadioButton Label="绿色"  LargeImageSource="Images/green.png"/>

                    <RibbonRadioButton Label="蓝色"  LargeImageSource="Images/blue.png"/>

                </RibbonGroup>

                <RibbonGroup Header="编辑选项">

                    <RibbonRadioButton x:Name="rrbInk" Label="墨迹" IsChecked="True" LargeImageSource="Images/b1.png"  GroupName="edit" />

                    <RibbonRadioButton Label="手势" GroupName="edit" LargeImageSource="Images/hand.png"  />

                    <RibbonRadioButton Label="套索选择" LargeImageSource="Images/config.png"  GroupName="edit" />

                    <RibbonRadioButton Label="点擦除" LargeImageSource="Images/erase2.png"  GroupName="edit" />

                    <RibbonRadioButton Label="笔画擦除" LargeImageSource="Images/erase1.png" GroupName="edit" />

                </RibbonGroup>

            </RibbonTab>

        </Ribbon>

        <InkCanvas Name="ink1" Grid.Row="1" Background="#FFFFF9F5"/>

    </Grid>

</Window>

设计效果：

3. 后台代码设计

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

using System.Windows.Controls.Ribbon;

namespace PEN

{

    /// <summary>

    /// MainWindow.xaml 的交互逻辑

    /// </summary>

    public partial class MainWindow : Window

    {

        private DrawingAttributes inkDA;

        private DrawingAttributes highlighterDA;

        private Color currentColor;

        public MainWindow()

        {

            InitializeComponent();

            currentColor = Colors.Red;

            inkDA = new DrawingAttributes()

            {

                Color = currentColor,

                Height = 6,

                Width = 6,

                FitToCurve = false

            };

            highlighterDA = new DrawingAttributes()

            {

                Color = Colors.Orchid,

                IsHighlighter = true,

                IgnorePressure = false,

                StylusTip = StylusTip.Rectangle,

                Height = 30,

                Width = 10

            };

            ink1.DefaultDrawingAttributes = inkDA;

            ink1.EditingMode = InkCanvasEditingMode.Ink;

        }

        private void RibbonRadioButton\_Checked(object sender, RoutedEventArgs e)

        {

            string name = (e.Source as RibbonRadioButton).Label;

            switch (name)

            {

                case "钢笔":

                    InitColor();

                    ink1.EditingMode = InkCanvasEditingMode.Ink;

                    break;

                case "荧光笔":

                    highlighterDA = new DrawingAttributes()

                    {

                        Color = currentColor ,

                        IsHighlighter = true,

                        IgnorePressure = false,

                        StylusTip = StylusTip.Rectangle,

                        Height = 30,

                        Width = 10

                    };

                    ink1.DefaultDrawingAttributes = highlighterDA;

                    break;

                case "红色":

                    currentColor = Colors.Red;

                    InitColor();

                    break;

                case "绿色":

                    currentColor = Colors.Green;

                    InitColor();

                    break;

                case "蓝色":

                    currentColor = Colors.Blue;

                    InitColor();

                    break;

                case "墨迹": ink1.EditingMode = InkCanvasEditingMode.Ink; break;

                case "手势": ink1.EditingMode = InkCanvasEditingMode.GestureOnly; break;

                case "套索选择": ink1.EditingMode = InkCanvasEditingMode.Select; break;

                case "点擦除": ink1.EditingMode = InkCanvasEditingMode.EraseByPoint; break;

                case "笔画擦除": ink1.EditingMode = InkCanvasEditingMode.EraseByStroke; break;

            }

        }

        private void InitColor()

        {

            inkDA.Color = currentColor;

            rrbPen.IsChecked = true;

            ink1.DefaultDrawingAttributes = inkDA;

        }

    }

}

可做简单的教学演示工具，可以做演算的小白板。