syncfusion-diagram:demo1如何实现

2024-04-11 12:52

本文主要是介绍syncfusion-diagram:demo1如何实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
 xmlns:stencil="clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assembly=Syncfusion.SfDiagram.WPF"当我们进入syncfusion的diagram中,可以看到,一个非常炫酷的例子

不仅实现了上方的工具栏同时还有下方的模板栏和画布。

如何实现相同的效果呢

1.注册密钥

syncfusion在使用时需要密钥,首先在visual studio里下生成一个新的wpf工程,加入下面这六个nuget包,看名字就知道第一个是许可证相关的,没有这个你就没法声明许可证密钥。

 ,然后现在,在mainwindow.xaml.cs文件中修改代码。

1.加入

using Syncfusion.UI.Xaml.Diagram;//引用
using Syncfusion.UI.Xaml.Diagram.Layout;//布局管理功能引用
using Syncfusion.UI.Xaml.Diagram.Stencil;//符号库引用

2.在初始化之前加入Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("你申请的许可证密钥");一定要在初始化之前加入。

关于密钥的申请,这篇文章很清楚:

安装和使用_syncfusion的密钥-CSDN博客

using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Syncfusion.UI.Xaml.Diagram;//引用
using Syncfusion.UI.Xaml.Diagram.Layout;//布局管理功能引用
using Syncfusion.UI.Xaml.Diagram.Stencil;//符号库引用namespace syncfusion_24_4_9_demo1
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("你申请的许可证密钥");InitializeComponent();}}
}
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

接下来就能愉快的进行syncfusion的使用了

2.在mainwindow.xaml 的窗口定义部分添加两行代码

 xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
 xmlns:stencil="clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assembly=Syncfusion.SfDiagram.WPF"

  1. xmlns:syncfusion:引入了 syncfusion 命名空间,允许在XAML中使用Syncfusion控件库。
  2. xmlns:stencil:引入了 stencil 命名空间,用于在XAML中使用Stencil相关的功能。

效果如下面所示

<Window x:Class="syncfusion_24_4_9_demo1.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:syncfusion_24_4_9_demo1"xmlns:syncfusion="http://schemas.syncfusion.com/wpf"xmlns:stencil="clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assembly=Syncfusion.SfDiagram.WPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800">

3.定义窗口的资源

在窗口的资源中定义一个资源字典,先把basicshapes.xaml这个资源字典加入当前资源字典,然后定义node的样式,connector的样式,symbol的样式,然后定义了一个数据模板,用来统一标题。

注:style-样式,只是统一控件的某些属性,templete-模板,则是相当于在原有控件基础上改变内部结构和行为。

<Window.Resources><!--定义资源字典和样式--><ResourceDictionary><ResourceDictionary.MergedDictionaries><!--初始化形状--><ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml" /></ResourceDictionary.MergedDictionaries><Style TargetType="syncfusion:Node"><!--定义目标类型为node的风格--><Setter Property="ShapeStyle"><!--内容模板--><Setter.Value><Style TargetType="Path"><Setter Property="Fill" Value="Blue"></Setter><Setter Property="Stretch" Value="Fill"></Setter></Style></Setter.Value></Setter></Style><!--Style for Connector--><Style TargetType="syncfusion:Connector"><!--定义connector的风格--><Setter Property="ConnectorGeometryStyle"><!--形状定义--><Setter.Value><Style TargetType="Path"><Setter Property="Stroke" Value="Black"  /><!--stroke是轮廓--><Setter Property="StrokeThickness" Value="1" /></Style></Setter.Value></Setter><Setter Property="TargetDecoratorStyle"><!--目标描述定义--><Setter.Value><Style TargetType="Path"><!--路径--><Setter Property="Stroke" Value="#4f4f4f"  /><Setter Property="Stretch" Value="Fill" /><Setter Property="Fill" Value="#4f4f4f"  /><Setter Property="StrokeThickness" Value="1" /></Style></Setter.Value></Setter></Style><!--Symbol类型定义--><Style TargetType="stencil:Symbol"><Setter Property="Width" Value="50"/><Setter Property="Height" Value="50"/><Setter Property="Padding" Value="3" /><Setter Property="BorderThickness" Value="1" /><Setter Property="Background" Value="Transparent" /><Setter Property="BorderBrush" Value="Transparent" /><Setter Property="Margin" Value="4"></Setter></Style><DataTemplate x:Key="TitleTemplate"><TextBlock x:Name="HeaderText" Text="{Binding}" FontSize="15" FontWeight="SemiBold"  Foreground="#2b579a" /></DataTemplate></ResourceDictionary>
</Window.Resources>

 4.定义页面

首先把页面划分成两行,第一行放工具栏,这个直接把sfdiagramribbon拖进来就好了,放在第一行,第二行再分成两列,第一列设置成自动宽度,第二列设置成*,因为左边的模板栏可以收缩到页面最左边,所以要设置成auto,这样缩进的时候占据的空间也会相应的收缩,右边画布设置成*,就是要在左边模板栏收缩的时候,右边也能自动占据空间。

 <Grid><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="*"/></Grid.RowDefinitions><syncfusion:SfDiagramRibbon x:Name="DiagramRibbon" Grid.Row="0" DataContext="{Binding ElementName=Diagram}"/><Grid Grid.Row="1"><Grid.ColumnDefinitions><ColumnDefinition Width="auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Grid Grid.Column="0"><Grid Background="White"><stencil:Stencil x:Name="stencil"Grid.Column="0"Grid.Row="1"ExpandMode="ZeroOrMore"BorderBrush="#dfdfdf"BorderThickness="1" Title="Shapes" TitleTemplate="{StaticResource TitleTemplate}"><stencil:Stencil.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><!--初始化形状--><ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml" /></ResourceDictionary.MergedDictionaries></ResourceDictionary></stencil:Stencil.Resources><stencil:Stencil.SymbolSource><syncfusion:SymbolCollection><!--Define the DiagramElement- Node--><syncfusion:NodeViewModel x:Name="node"Key="Nodes"UnitHeight="70"UnitWidth="100"OffsetX="100"OffsetY="100"Shape="{StaticResource Rectangle}"></syncfusion:NodeViewModel><!--Define the DiagramElement- Connector--><syncfusion:ConnectorViewModel SourcePoint="100,100"Key="Connectors"TargetPoint="200,200" /><!--Define the DiagramElement- Group--><syncfusion:GroupViewModel Key="Groups"><!--Creates the Groupable Nodes--><syncfusion:GroupViewModel.Nodes><syncfusion:NodeCollection><syncfusion:NodeViewModel UnitHeight="70"ID="srcnode"OffsetX="0"OffsetY="300"UnitWidth="100"Shape="{StaticResource Rectangle}"></syncfusion:NodeViewModel><syncfusion:NodeViewModel UnitHeight="70"ID="tarnode"OffsetX="100"OffsetY="500"UnitWidth="100"Shape="{StaticResource Rectangle}"></syncfusion:NodeViewModel></syncfusion:NodeCollection></syncfusion:GroupViewModel.Nodes><!--Creates the Groupable Connectors--><syncfusion:GroupViewModel.Connectors><syncfusion:ConnectorCollection><syncfusion:ConnectorViewModel SourceNodeID="srcnode"TargetNodeID="tarnode" /></syncfusion:ConnectorCollection></syncfusion:GroupViewModel.Connectors></syncfusion:GroupViewModel></syncfusion:SymbolCollection></stencil:Stencil.SymbolSource><stencil:Stencil.Categories><stencil:StencilCategoryCollection><!--Specify the basic shapes category with title and resource key--><stencil:StencilCategory Title="Basic Shapes" Keys="{StaticResource BasicShapes}"/></stencil:StencilCategoryCollection></stencil:Stencil.Categories><stencil:Stencil.SymbolGroups><stencil:SymbolGroups><!--Separate groups based on the key--><stencil:SymbolGroupProvider MappingName="Key" /></stencil:SymbolGroups></stencil:Stencil.SymbolGroups></stencil:Stencil></Grid></Grid><syncfusion:SfDiagram x:Name="Diagram" Constraints="Undoable,Default" Grid.Column="1"><syncfusion:SfDiagram.Theme><syncfusion:OfficeTheme/></syncfusion:SfDiagram.Theme><syncfusion:SfDiagram.Nodes><syncfusion:NodeCollection/></syncfusion:SfDiagram.Nodes><syncfusion:SfDiagram.Connectors><syncfusion:ConnectorCollection/></syncfusion:SfDiagram.Connectors><syncfusion:SfDiagram.Groups><syncfusion:GroupCollection/></syncfusion:SfDiagram.Groups><syncfusion:SfDiagram.SnapSettings><syncfusion:SnapSettings SnapConstraints="All"/></syncfusion:SfDiagram.SnapSettings><syncfusion:SfDiagram.HorizontalRuler><syncfusion:Ruler Orientation="Horizontal"/></syncfusion:SfDiagram.HorizontalRuler><syncfusion:SfDiagram.VerticalRuler><syncfusion:Ruler Orientation="Vertical"/></syncfusion:SfDiagram.VerticalRuler></syncfusion:SfDiagram></Grid></Grid>

这篇关于syncfusion-diagram:demo1如何实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/894136

相关文章

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分