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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/807449.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

抖音招聘小程序可以通过抖音直播进行招聘

抖音招聘小程序可以通过抖音直播进行招聘

现在就是抖音报吧&#xff0c;又叫报白名单&#xff0c;它是可以通过抖音直播进行招聘&#xff0c;也可以在小视频中添加小程序&#xff0c;然后不会受到流量的限制。正常&#xff0c;如果您要是在抖音直播&#xff0c;或者是在视频里头说招聘两个字的话&#xff0c;都直播的话…
阅读更多...
openGauss 5.0 单点企业版部署_Centos7_x86（下）

openGauss 5.0 单点企业版部署_Centos7_x86（下）

上一篇分享了安装环境、配置、创建用户&#xff0c;本篇将继续分享执行、安装、访问数据库。 8、目录规划 --创建存放安装包的目录 mkdir -p /topsoft/soft/openGauss chmod 777 -R /topsoft/soft--创建目录 目录会自动创建&#xff0c;可选择不创建 mkdir -p /topsoft/huaw…
阅读更多...
为什么要部署IP SSL证书？怎么申请？

为什么要部署IP SSL证书？怎么申请？

我们需要知道什么是IP SSL证书。SSL&#xff0c;全称为Secure Sockets Layer&#xff0c;即安全套接层&#xff0c;是为网络通信提供安全及数据完整性的一种安全协议。而IP SSL证书就是基于SSL协议的一种证书&#xff0c;它能够为网站和用户的数据传输提供加密处理&#xff0c;…
阅读更多...
对称加密学习

对称加密学习

对称加密是一种加密技术&#xff0c;它使用相同的密钥进行数据的加密和解密操作。这种加密方法因其高效性和速度优势&#xff0c;在数据加密领域得到了广泛的应用。 下面是两篇文章&#xff1a; AES加密学习-CSDN博客 加密算法学习-CSDN博客 推荐关注加密专栏&#xff1a; …
阅读更多...
ThinkPHP审计(1) 不安全的SQL注入PHP反序列化链子phar利用简单的CMS审计实例

ThinkPHP审计(1) 不安全的SQL注入PHP反序列化链子phar利用简单的CMS审计实例

ThinkPHP代码审计(1) 不安全的SQL注入&PHP反序列化链子phar利用&简单的CMS审计实例 文章目录 ThinkPHP代码审计(1) 不安全的SQL注入&PHP反序列化链子phar利用&简单的CMS审计实例一.Thinkphp5不安全的SQL写法二.Thinkphp3 SQL注入三.Thinkphp链5.1.x结合phar实现…
阅读更多...
Git可视化工具 - 推荐

Git可视化工具 - 推荐

概述 Git版本管理工具是我们日常开发中常用的工具&#xff0c;熟练使用它可以提高我们的工作效率。 当然老司机基本使用命令行的方式进行操作&#xff0c;新手可借助可视化工具来进行过渡&#xff0c;命令行与可视化工具结合使用来加深对Git的熟悉程度。 下面推荐两个较受欢迎…
阅读更多...
[蓝桥杯 2023 国 B] 班级活动

[蓝桥杯 2023 国 B] 班级活动

[蓝桥杯 2023 国 B] 班级活动 题目描述 小明的老师准备组织一次班级活动。班上一共有 n n n 名&#xff08; n n n 为偶数&#xff09;同学&#xff0c;老师想把所有的同学进行分组&#xff0c;每两名同学一组。为了公平&#xff0c;老师给每名同学随机分配了一个 n n n 以…
阅读更多...
STM32电机控制SDK实战

STM32电机控制SDK实战

一、前言 本次测试基于ST开发板NUCLEO-F302R8&#xff0c;驱动板X-NUCLEO-IHM07M1&#xff0c;使用无刷直流电机BLDC实现FOC控制&#xff1b;采样三霍尔传感器检测电机转子位置&#xff1b;基于速度环闭环控制实现电机转动&#xff1b; 二、实战环境 软件环境&#xff1a; 1…
阅读更多...
性能测试 —— 性能测试流程！

性能测试 —— 性能测试流程！

简介&#xff1a; 性能测试&#xff1a;利用工具模拟大量用户操作&#xff0c;验证系统承受的负载情况。 性能测试&#xff1a;利用工具模拟大量用户操作&#xff0c;验证系统承受的负载情况。 性能测试的目的&#xff1a;找到潜在的性能问题或瓶颈&#xff0c;分析并解决&am…
阅读更多...
SpringCloudAlibaba-概述（一）

SpringCloudAlibaba-概述（一）

目录地址&#xff1a; SpringCloudAlibaba整合-CSDN博客 记录SpringCloudAlibaba的整合过程 一、简单概述一下项目情况 项目主要有4个模块和4个微服务&#xff1b; 项目结构如下&#xff1a; mall&#xff1a;父工程 -- common&#xff1a;公共组件&#xff0c;存放公用的实…
阅读更多...
01 Hello Python

01 Hello Python

本节课重点知识点 1、函数&#xff1a; 在python中&#xff0c;函数是已经写好的&#xff0c;可以重复使用的&#xff0c;用来实现单一&#xff0c;或相关联功能的代码段。函数可以使代码模块化&#xff0c;提高重复利用率。 2、内置函数&#xff1a; 程序员已经写好的一些函…
阅读更多...
1、Qt UI控件 -- qucsdk

1、Qt UI控件 -- qucsdk

前言&#xff1a;Qt编写的自定义控件插件的sdk集合&#xff0c;包括了各个操作系统的动态库文件以及控件的头文件和sdk使用demo。类似于Wpf中的LivChart2控件库&#xff0c;都是一些编译好的控件&#xff0c;可以直接集成到项目中。该控件是飞扬青云大神多年前开发的&#xff0…
阅读更多...
【LeetCode热题100】【二叉树】验证二叉搜索树

【LeetCode热题100】【二叉树】验证二叉搜索树

题目链接&#xff1a;98. 验证二叉搜索树 - 力扣&#xff08;LeetCode&#xff09; 即左边的小于根小于右边的&#xff0c;不仅仅是这样&#xff0c;根必须得比左子树的都要大&#xff0c;比右子树的都要小&#xff0c;因此对于每个节点都需要小于某个值大于某个值 class Sol…
阅读更多...
OV证书为什么更可信

OV证书为什么更可信

在网络安全领域&#xff0c;SSL/TLS证书扮演着至关重要的角色&#xff0c;其中组织验证&#xff08;Organization Validation&#xff0c;简称OV&#xff09;证书以其深度验证机制和高度可信性脱颖而出。 OV证书为何更值得信赖&#xff0c;关键在于其严格的验证流程。 首先&am…
阅读更多...
SOCKS代理概述

SOCKS代理概述

在网络技术的广阔领域中&#x1f310;&#xff0c;SOCKS代理是一个核心组件&#xff0c;它在提升在线隐私保护&#x1f6e1;️、实现匿名通信&#x1f3ad;以及突破网络访问限制&#x1f6ab;方面发挥着至关重要的作用。本文旨在深入探讨SOCKS代理的基础&#xff0c;包括其定义…
阅读更多...
ai智能问答免费API接口

ai智能问答免费API接口

智能对话API接口&#xff0c;可以为网站或其他产品提供强大的智能交互功能&#xff0c;无需自行开发复杂的语义分析和自然语言处理算法。这使得开发者能够更专注于产品的核心功能和用户体验&#xff0c;加速产品上线速度并降低开发成本。 智能对话API接口的功能还包括对话内容…
阅读更多...
2024QS计算机科学 学科排名

2024QS计算机科学 学科排名

计算机科学
阅读更多...
DC40V降压恒压芯片H4120 40V转5V 3A 40V降压12V 车充降压恒压控制器

DC40V降压恒压芯片H4120 40V转5V 3A 40V降压12V 车充降压恒压控制器

同步整流恒压芯片在现代电子设备中发挥着重要作用&#xff0c;为各种设备提供了稳定、高效的电源管理解决方案。 同步整流恒压芯片是一种电源管理芯片&#xff0c;它能够在不同电压输入条件下保持输出电压恒定。这种芯片广泛应用于各种电子设备中&#xff0c;如通讯设备、液晶…
阅读更多...
CentOS7安装MySQL8.0教程

CentOS7安装MySQL8.0教程

环境介绍 操作系统&#xff1a;Centos7.6 MySQL版本&#xff1a; 8.0.27 只要是8.0.*版本&#xff0c;那就可以按照本文说明安装 一、安装前准备 1、卸载MariaDB 安装MySQL的话会和MariaDB的文件冲突&#xff0c;所以需要先卸载掉MariaDB。 1.1、查看是否安装mariadb rpm -…
阅读更多...
Igh related:Small Bug And Notes Record.

Igh related:Small Bug And Notes Record.

Write at the top My computer got some silly problem with the typing software that my Chinese IM does’t work again. So I’ll try to record the things happened in English. If any error,DM me plz. BUGs BUG1 Undefined symbol Identifier “CLOCK_MONOTONIC”…
阅读更多...
最新文章

Copyright @ 2022~2023