devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

syncfusion-diagram:demo1如何实现

作者：繁依Fanyi0 | 2024-04-11 18:04:28

赞

踩

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博客

  1. using System.Text;
  2. using System.Windows;
  3. using System.Windows.Controls;
  4. using System.Windows.Data;
  5. using System.Windows.Documents;
  6. using System.Windows.Input;
  7. using System.Windows.Media;
  8. using System.Windows.Media.Imaging;
  9. using System.Windows.Navigation;
  10. using System.Windows.Shapes;
  11. using Syncfusion.UI.Xaml.Diagram;//引用
  12. using Syncfusion.UI.Xaml.Diagram.Layout;//布局管理功能引用
  13. using Syncfusion.UI.Xaml.Diagram.Stencil;//符号库引用
  14.  
  15. namespace syncfusion_24_4_9_demo1
  16. {
  17.     /// <summary>
  18.     /// Interaction logic for MainWindow.xaml
  19.     /// </summary>
  20.     public partial class MainWindow : Window
  21.     {
  22.         public MainWindow()
  23.         {
  24.             Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("你申请的许可证密钥");
  25.             InitializeComponent();
  26.         }
  27.     }
  28. }
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相关的功能。

效果如下面所示

  1. <Window x:Class="syncfusion_24_4_9_demo1.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:syncfusion_24_4_9_demo1"
  7.         xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
  8.         xmlns:stencil="clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assembly=Syncfusion.SfDiagram.WPF"
  9.         mc:Ignorable="d"
  10.         Title="MainWindow" Height="450" Width="800">

3.定义窗口的资源

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

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

  1. <Window.Resources>
  2.     <!--定义资源字典和样式-->
  3.     <ResourceDictionary>
  4.         <ResourceDictionary.MergedDictionaries>
  5.             <!--初始化形状-->
  6.             <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml" />
  7.         </ResourceDictionary.MergedDictionaries>
  8.         <Style TargetType="syncfusion:Node">
  9.             <!--定义目标类型为node的风格-->
  10.             <Setter Property="ShapeStyle">
  11.                 <!--内容模板-->
  12.                 <Setter.Value>
  13.                     <Style TargetType="Path">
  14.                         <Setter Property="Fill" Value="Blue"></Setter>
  15.                         <Setter Property="Stretch" Value="Fill"></Setter>
  16.                     </Style>
  17.                 </Setter.Value>
  18.             </Setter>
  19.         </Style>
  20.  
  21.         <!--Style for Connector-->
  22.         <Style TargetType="syncfusion:Connector">
  23.             <!--定义connector的风格-->
  24.             <Setter Property="ConnectorGeometryStyle">
  25.                 <!--形状定义-->
  26.                 <Setter.Value>
  27.                     <Style TargetType="Path">
  28.                         <Setter Property="Stroke" Value="Black"  />
  29.                         <!--stroke是轮廓-->
  30.                         <Setter Property="StrokeThickness" Value="1" />
  31.                     </Style>
  32.                 </Setter.Value>
  33.             </Setter>
  34.             <Setter Property="TargetDecoratorStyle">
  35.                 <!--目标描述定义-->
  36.                 <Setter.Value>
  37.                     <Style TargetType="Path">
  38.                         <!--路径-->
  39.                         <Setter Property="Stroke" Value="#4f4f4f"  />
  40.                         <Setter Property="Stretch" Value="Fill" />
  41.                         <Setter Property="Fill" Value="#4f4f4f"  />
  42.                         <Setter Property="StrokeThickness" Value="1" />
  43.                     </Style>
  44.                 </Setter.Value>
  45.             </Setter>
  46.         </Style>
  47.  
  48.         <!--Symbol类型定义-->
  49.         <Style TargetType="stencil:Symbol">
  50.             <Setter Property="Width" Value="50"/>
  51.             <Setter Property="Height" Value="50"/>
  52.             <Setter Property="Padding" Value="3" />
  53.             <Setter Property="BorderThickness" Value="1" />
  54.             <Setter Property="Background" Value="Transparent" />
  55.             <Setter Property="BorderBrush" Value="Transparent" />
  56.             <Setter Property="Margin" Value="4"></Setter>
  57.         </Style>
  58.         <DataTemplate x:Key="TitleTemplate">
  59.             <TextBlock x:Name="HeaderText" Text="{Binding}" FontSize="15" FontWeight="SemiBold"  Foreground="#2b579a" />
  60.         </DataTemplate>
  61.     </ResourceDictionary>
  62. </Window.Resources>

 4.定义页面

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

  1.  <Grid>
  2.      <Grid.RowDefinitions>
  3.          <RowDefinition Height="Auto"/>
  4.          <RowDefinition Height="*"/>
  5.      </Grid.RowDefinitions>
  6.      <syncfusion:SfDiagramRibbon x:Name="DiagramRibbon" Grid.Row="0" DataContext="{Binding ElementName=Diagram}"/>
  7.  
  8.  
  9.      <Grid Grid.Row="1">
  10.          <Grid.ColumnDefinitions>
  11.              <ColumnDefinition Width="auto"/>
  12.              <ColumnDefinition Width="*"/>
  13.          </Grid.ColumnDefinitions>
  14.          <Grid Grid.Column="0">
  15.              <Grid Background="White">
  16.                  <stencil:Stencil x:Name="stencil"
  17.                           Grid.Column="0"
  18.                           Grid.Row="1"
  19.                           ExpandMode="ZeroOrMore"
  20.                           BorderBrush="#dfdfdf"
  21.                           BorderThickness="1" Title="Shapes" TitleTemplate="{StaticResource TitleTemplate}">
  22.                      <stencil:Stencil.Resources>
  23.                          <ResourceDictionary>
  24.                              <ResourceDictionary.MergedDictionaries>
  25.                                  <!--初始化形状-->
  26.                                  <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml" />
  27.                              </ResourceDictionary.MergedDictionaries>
  28.                          </ResourceDictionary>
  29.                      </stencil:Stencil.Resources>
  30.                      <stencil:Stencil.SymbolSource>
  31.                          <syncfusion:SymbolCollection>
  32.                              <!--Define the DiagramElement- Node-->
  33.                              <syncfusion:NodeViewModel x:Name="node"
  34.                                                Key="Nodes"
  35.                                                UnitHeight="70"
  36.                                                UnitWidth="100"
  37.                                                OffsetX="100"
  38.                                                OffsetY="100"
  39.                                                Shape="{StaticResource Rectangle}">
  40.                              </syncfusion:NodeViewModel>
  41.                              <!--Define the DiagramElement- Connector-->
  42.                              <syncfusion:ConnectorViewModel SourcePoint="100,100"
  43.                                                     Key="Connectors"
  44.                                                     TargetPoint="200,200" />
  45.                              <!--Define the DiagramElement- Group-->
  46.                              <syncfusion:GroupViewModel Key="Groups">
  47.                                  <!--Creates the Groupable Nodes-->
  48.                                  <syncfusion:GroupViewModel.Nodes>
  49.                                      <syncfusion:NodeCollection>
  50.                                          <syncfusion:NodeViewModel UnitHeight="70"
  51.                                                            ID="srcnode"
  52.                                                            OffsetX="0"
  53.                                                            OffsetY="300"
  54.                                                            UnitWidth="100"
  55.                                                            Shape="{StaticResource Rectangle}">
  56.                                          </syncfusion:NodeViewModel>
  57.                                          <syncfusion:NodeViewModel UnitHeight="70"
  58.                                                            ID="tarnode"
  59.                                                            OffsetX="100"
  60.                                                            OffsetY="500"
  61.                                                            UnitWidth="100"
  62.                                                            Shape="{StaticResource Rectangle}">
  63.                                          </syncfusion:NodeViewModel>
  64.                                      </syncfusion:NodeCollection>
  65.                                  </syncfusion:GroupViewModel.Nodes>
  66.                                  <!--Creates the Groupable Connectors-->
  67.                                  <syncfusion:GroupViewModel.Connectors>
  68.                                      <syncfusion:ConnectorCollection>
  69.                                          <syncfusion:ConnectorViewModel SourceNodeID="srcnode"
  70.                                                                 TargetNodeID="tarnode" />
  71.                                      </syncfusion:ConnectorCollection>
  72.                                  </syncfusion:GroupViewModel.Connectors>
  73.                              </syncfusion:GroupViewModel>
  74.                          </syncfusion:SymbolCollection>
  75.                      </stencil:Stencil.SymbolSource>
  76.  
  77.                      <stencil:Stencil.Categories>
  78.                          <stencil:StencilCategoryCollection>
  79.                              <!--Specify the basic shapes category with title and resource key-->
  80.                              <stencil:StencilCategory Title="Basic Shapes" Keys="{StaticResource BasicShapes}"/>
  81.                          </stencil:StencilCategoryCollection>
  82.                      </stencil:Stencil.Categories>
  83.                      
  84.                      <stencil:Stencil.SymbolGroups>
  85.                          <stencil:SymbolGroups>
  86.                              <!--Separate groups based on the key-->
  87.                              <stencil:SymbolGroupProvider MappingName="Key" />
  88.                          </stencil:SymbolGroups>
  89.                      </stencil:Stencil.SymbolGroups>
  90.                      
  91.                  </stencil:Stencil>
  92.              </Grid>
  93.          </Grid>
  94.          <syncfusion:SfDiagram x:Name="Diagram" Constraints="Undoable,Default" Grid.Column="1">
  95.              <syncfusion:SfDiagram.Theme>
  96.                  <syncfusion:OfficeTheme/>
  97.              </syncfusion:SfDiagram.Theme>
  98.              <syncfusion:SfDiagram.Nodes>
  99.                  <syncfusion:NodeCollection/>
  100.              </syncfusion:SfDiagram.Nodes>
  101.              <syncfusion:SfDiagram.Connectors>
  102.                  <syncfusion:ConnectorCollection/>
  103.              </syncfusion:SfDiagram.Connectors>
  104.              <syncfusion:SfDiagram.Groups>
  105.                  <syncfusion:GroupCollection/>
  106.              </syncfusion:SfDiagram.Groups>
  107.              <syncfusion:SfDiagram.SnapSettings>
  108.                  <syncfusion:SnapSettings SnapConstraints="All"/>
  109.              </syncfusion:SfDiagram.SnapSettings>
  110.              <syncfusion:SfDiagram.HorizontalRuler>
  111.                  <syncfusion:Ruler Orientation="Horizontal"/>
  112.              </syncfusion:SfDiagram.HorizontalRuler>
  113.              <syncfusion:SfDiagram.VerticalRuler>
  114.                  <syncfusion:Ruler Orientation="Vertical"/>
  115.              </syncfusion:SfDiagram.VerticalRuler>
  116.          </syncfusion:SfDiagram>
  117.      </Grid>
  118.  </Grid>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/406551
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号