Skip to content

Commit

Permalink
Merge pull request #68 from SyncfusionExamples/WPF-888586StencilUGRev…
Browse files Browse the repository at this point in the history 
…ampSampleCorrection

WPF-888586 Stencil ug revamp sample creation and correction
  • Loading branch information
@KarkuvelRajan
KarkuvelRajan authored Jun 11, 2024
2 parents 51e5af4 + bd53484 commit 733f3b2
Show file tree
Hide file tree
Showing 80 changed files with 3,218 additions and 232 deletions.
13 changes: 13 additions & 0 deletions Samples/Node/NodeStyleBasedOnKey/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Different style for Nodes based on Key value

This repository contains sample which shows how to apply different style nodes based on its key value in [WPF Diagram](https://www.syncfusion.com/wpf-controls/diagram) (SfDiagram).


## Project pre-requisites
To run this application, you need to have the below two in your system

* [Visual Studio 2019](https://www.visualstudio.com/wpf-vs)
* [Syncfusion.SfDiagram.WPF](https://www.nuget.org/packages/Syncfusion.SfDiagram.WPF/) nuget package. To install the package using NuGet Package Manager, refer this [link](https://docs.microsoft.com/en-us/nuget/quickstart/install-and-use-a-package-in-visual-studio#nuget-package-manager).

## Deploying and running the sample
* To debug the sample and then run it, press F5 or select Debug > Start Debugging. To run the sample without debugging, press Ctrl+F5 or selectDebug > Start Without Debugging.
6 changes: 6 additions & 0 deletions Samples/Node/NodeStyleBasedOnKey/StencilDiagramElements/App.config
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<startup>
<supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.6.2"/>
</startup>
</configuration>
9 changes: 9 additions & 0 deletions Samples/Node/NodeStyleBasedOnKey/StencilDiagramElements/App.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<Application x:Class="StencilDiagramElements.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:StencilDiagramElements"
StartupUri="MainWindow.xaml">
<Application.Resources>

</Application.Resources>
</Application>
17 changes: 17 additions & 0 deletions Samples/Node/NodeStyleBasedOnKey/StencilDiagramElements/App.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;

namespace StencilDiagramElements
{
/// <summary>
/// Interaction logic for App.xaml
/// </summary>
public partial class App : Application
{
}
}
224 changes: 224 additions & 0 deletions Samples/Node/NodeStyleBasedOnKey/StencilDiagramElements/MainWindow.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
<Window x:Class="StencilDiagramElements.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:StencilDiagramElements"
mc:Ignorable="d"
xmlns:Syncfusion="http://schemas.syncfusion.com/wpf"
xmlns:Stencil="clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assembly=Syncfusion.SfDiagram.Wpf"
xmlns:RulerControl="clr-namespace:Syncfusion.UI.Xaml.Diagram.Controls;assembly=Syncfusion.SfDiagram.Wpf"
xmlns:diagramcontrol="clr-namespace:Syncfusion.UI.Xaml.Diagram;assembly=Syncfusion.SfDiagram.WPF"
Title="MainWindow"
Height="450"
Width="800">
<Window.DataContext>
<Syncfusion:DiagramViewModel>
<!--To Represent HorizontalRuler,VerticalRuler-->
<Syncfusion:DiagramViewModel.HorizontalRuler>
<RulerControl:Ruler Orientation="Horizontal" />
</Syncfusion:DiagramViewModel.HorizontalRuler>

<Syncfusion:DiagramViewModel.VerticalRuler>
<RulerControl:Ruler Orientation="Vertical" />
</Syncfusion:DiagramViewModel.VerticalRuler>

<!--SnapConstraints used to Control the Visibility of Gridlines and enable/disable Snapping.-->
<Syncfusion:DiagramViewModel.SnapSettings>
<Syncfusion:SnapSettings SnapConstraints="All"
SnapToObject="All" />
</Syncfusion:DiagramViewModel.SnapSettings>

<!--Initializes PageSettings-->
<Syncfusion:DiagramViewModel.PageSettings>
<diagramcontrol:PageSettings PageBorderBrush="Transparent" />
</Syncfusion:DiagramViewModel.PageSettings>

<!--Initializes Node-->
<Syncfusion:DiagramViewModel.Nodes>
<Syncfusion:NodeCollection />
</Syncfusion:DiagramViewModel.Nodes>

<!--Initializes Connector-->
<Syncfusion:DiagramViewModel.Connectors>
<Syncfusion:ConnectorCollection />
</Syncfusion:DiagramViewModel.Connectors>

<!--Initializes Group-->
<Syncfusion:DiagramViewModel.Groups>
<Syncfusion:GroupCollection />
</Syncfusion:DiagramViewModel.Groups>
</Syncfusion:DiagramViewModel>
</Window.DataContext>
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!--Dictionary which contains the inbuilt shapes-->
<ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml" />
</ResourceDictionary.MergedDictionaries>

<Style TargetType="Path" x:Key="RectShapeStyle">
<Setter Property="Fill" Value="Red"/>
<Setter Property="Stretch" Value="Fill"/>
</Style>

<Style TargetType="Path" x:Key="EllipseShapeStyle">
<Setter Property="Fill" Value="Yellow"/>
<Setter Property="Stretch" Value="Fill"/>
</Style>

<Style TargetType="Path" x:Key="TriangleShapeStyle">
<Setter Property="Fill" Value="CadetBlue"/>
<Setter Property="Stretch" Value="Fill"/>
</Style>

<!--Style for Node-->
<Style TargetType="Syncfusion:Node">
<Style.Triggers>
<DataTrigger Binding="{Binding Key}" Value="Rectangle Node">
<Setter Property="ShapeStyle" Value="{StaticResource RectShapeStyle}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Key}" Value="Ellipse Node">
<Setter Property="ShapeStyle" Value="{StaticResource EllipseShapeStyle}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Key}" Value="Triangle Node">
<Setter Property="ShapeStyle" Value="{StaticResource TriangleShapeStyle}"/>
</DataTrigger>
</Style.Triggers>
</Style>

<!--Style for 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>

<!--Style for Symbol Group-->
<Style TargetType="Stencil:SymbolGroup">
<Setter Property="FontFamily"
Value="Regular" />
<Setter Property="Background"
Value="#ffffff" />
<Setter Property="Foreground"
Value="#222222" />
<Setter Property="FontSize"
Value="14" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Stencil:Header>
<Stencil:Header.Template>
<ControlTemplate TargetType="Stencil:Header">
<Grid>
<Border x:Name="header"
Background="#f5f5f5"
BorderBrush="#dfdfdf"
BorderThickness="1">
<ContentPresenter Margin="10"
Content="{Binding}" />
</Border>
</Grid>
</ControlTemplate>
</Stencil:Header.Template>
</Stencil:Header>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>

</ResourceDictionary>
</Window.Resources>

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>

<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Shapes"
FontSize="17"
FontWeight="SemiBold"
Foreground="#2b579a"
HorizontalAlignment="Left"
Margin="10,5,0,5"
Grid.Row="0" />
<Stencil:Stencil x:Name="stencil"
Grid.Column="0"
Grid.Row="1"
ExpandMode="ZeroOrMore"
BorderBrush="#dfdfdf"
BorderThickness="1">
<Stencil:Stencil.SymbolSource>
<Syncfusion:SymbolCollection>
<!--Define the DiagramElement- Node-->
<Syncfusion:NodeViewModel Key="Rectangle Node"
ID="Rect"
UnitHeight="70"
UnitWidth="100"
OffsetX="100"
OffsetY="100"
Shape="{StaticResource Rectangle}">
</Syncfusion:NodeViewModel>

<Syncfusion:NodeViewModel Key="Ellipse Node"
ID="Ellipse"
UnitHeight="70"
UnitWidth="100"
OffsetX="100"
OffsetY="100"
Shape="{StaticResource Ellipse}">
</Syncfusion:NodeViewModel>

<Syncfusion:NodeViewModel Key="Triangle Node"
ID="Triangle"
UnitHeight="70"
UnitWidth="100"
OffsetX="100"
OffsetY="100"
Shape="{StaticResource Triangle}">
</Syncfusion:NodeViewModel>

<!--Define the DiagramElement- Connector-->

</Syncfusion:SymbolCollection>
</Stencil:Stencil.SymbolSource>
<Stencil:Stencil.SymbolGroups>
<Stencil:SymbolGroups>
<!--Separate groups based on the key-->
<Stencil:SymbolGroupProvider MappingName="Key" />
</Stencil:SymbolGroups>
</Stencil:Stencil.SymbolGroups>
</Stencil:Stencil>
</Grid>

<!--Initializes Diagram-->
<Syncfusion:SfDiagram x:Name="diagram"
Grid.Column="1"
Nodes="{Binding Nodes}"
Connectors="{Binding Connectors}"
Groups="{Binding Groups}"
PageSettings="{Binding PageSettings}"
SnapSettings="{Binding SnapSettings}"
HorizontalRuler="{Binding HorizontalRuler}"
VerticalRuler="{Binding VerticalRuler}">

</Syncfusion:SfDiagram>
</Grid>
</Window>
31 changes: 31 additions & 0 deletions Samples/Node/NodeStyleBasedOnKey/StencilDiagramElements/MainWindow.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
using Syncfusion.UI.Xaml.Diagram;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Globalization;
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.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace StencilDiagramElements
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}
55 changes: 55 additions & 0 deletions Samples/Node/NodeStyleBasedOnKey/StencilDiagramElements/Properties/AssemblyInfo.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
using System.Reflection;
using System.Resources;
using System.Runtime.CompilerServices;
using System.Runtime.InteropServices;
using System.Windows;

// General Information about an assembly is controlled through the following
// set of attributes. Change these attribute values to modify the information
// associated with an assembly.
[assembly: AssemblyTitle("StencilDiagramElements")]
[assembly: AssemblyDescription("")]
[assembly: AssemblyConfiguration("")]
[assembly: AssemblyCompany("")]
[assembly: AssemblyProduct("StencilDiagramElements")]
[assembly: AssemblyCopyright("Copyright © 2020")]
[assembly: AssemblyTrademark("")]
[assembly: AssemblyCulture("")]

// Setting ComVisible to false makes the types in this assembly not visible
// to COM components. If you need to access a type in this assembly from
// COM, set the ComVisible attribute to true on that type.
[assembly: ComVisible(false)]

//In order to begin building localizable applications, set
//<UICulture>CultureYouAreCodingWith</UICulture> in your .csproj file
//inside a <PropertyGroup>. For example, if you are using US english
//in your source files, set the <UICulture> to en-US. Then uncomment
//the NeutralResourceLanguage attribute below. Update the "en-US" in
//the line below to match the UICulture setting in the project file.

//[assembly: NeutralResourcesLanguage("en-US", UltimateResourceFallbackLocation.Satellite)]


[assembly: ThemeInfo(
ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
//(used if a resource is not found in the page,
// or application resource dictionaries)
ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
//(used if a resource is not found in the page,
// app, or any theme specific resource dictionaries)
)]


// Version information for an assembly consists of the following four values:
//
// Major Version
// Minor Version
// Build Number
// Revision
//
// You can specify all the values or you can default the Build and Revision Numbers
// by using the '*' as shown below:
// [assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]
Loading

0 comments on commit 733f3b2

Please sign in to comment.