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,一经查实,立即删除!

相关文章

为什么要部署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审计实例一.Thinkphp5不安全的SQL写法二.Thinkphp3 SQL注入三.Thinkphp链5.1.x结合phar实现…

Git可视化工具 - 推荐

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

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-概述(一)

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

1、Qt UI控件 -- qucsdk

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

OV证书为什么更可信

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

SOCKS代理概述

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

ai智能问答免费API接口

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

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

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

CentOS7安装MySQL8.0教程

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

NzN的数据结构--栈的实现

在前面我们已经学习了哪些线性数据结构呢&#xff1f;大家一起来回顾一下&#xff1a;C语言学过的数组&#xff0c;数据结构中的线性表和顺序表和链表。那我们今天再来介绍数据结构里的两个线性结构--栈和队列。 目录 一、栈的概念及结构 二、用数组实现栈 1. 栈的初始化和…

Windows系统Docker部署IT工具箱It- Tools结合内网穿透实现公网访问

文章目录 1. 使用Docker本地部署it-tools2. 本地访问it-tools3. 安装cpolar内网穿透4. 固定it-tools公网地址 本篇文章将介绍如何在Windows上使用Docker本地部署IT- Tools&#xff0c;并且同样可以结合cpolar实现公网访问。 在前一篇文章中我们讲解了如何在Linux中使用Docker搭…

node.js-入门

定义 Node.js是一个跨平台Javascript运行环境&#xff0c;使开发者可以搭建服务器端的Javascript应用程序 作用&#xff1a;使用Node.js编写服务器端程序 1&#xff09;编写数据接口&#xff0c;提供网页资源浏览功能等 2&#xff09;前端工程化&#xff1a;集成各种开发中…

[C++]map set

一、set 1、概念 set是按照一定次序存储元素的容器在set中&#xff0c;元素的value也标识它(value就是key&#xff0c;类型为T)&#xff0c;并且每个value必须是唯一的。set中的元素不能在容器中修改(元素总是const)&#xff0c;但是可以从容器中插入或删除它们。在内部&…

4.9号驱动

1. ARM裸机开发和Linux系统开发的异同 相同点&#xff1a;都是对硬件进行操作 不同点&#xff1a; 有无操作系统 是否具备多进程多线程开发 是否可以调用库函数 操作地址是否相同&#xff0c;arm操作物理地址&#xff0c;驱动操作虚拟地址 2. Linux操作系统的层次 应用层…

在vite中限制node版本

1.修改package.json文件 {"name": "wine-store-frontend","version": "0.0.0","private": true,"type": "module","scripts": {"dev": "vite --open","build"…