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;
}
}
}
可做简单的教学演示工具,可以做演算的小白板。