Skip to content

Commit

Permalink
WPF-900304_Customize Port hover effect sample
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArunKumarSF4054
ArunKumarSF4054 committed Aug 30, 2024
1 parent 87a5b26 commit ffbebac
Show file tree
Hide file tree
Showing 17 changed files with 1,050 additions and 0 deletions.
6 changes: 6 additions & 0 deletions Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/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/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<Application x:Class="PortsSample.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:PortsSample"
StartupUri="MainWindow.xaml">
<Application.Resources>

</Application.Resources>
</Application>
17 changes: 17 additions & 0 deletions Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/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 PortsSample
{
/// <summary>
/// Interaction logic for App.xaml
/// </summary>
public partial class App : Application
{
}
}
174 changes: 174 additions & 0 deletions Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/MainWindow.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
<Window x:Class="PortsSample.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:PortsSample"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<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="RedStyle">
<Setter Property="Fill" Value="Red"/>
<Setter Property="Stretch" Value="Fill"/>
</Style>

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

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

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



<Style TargetType="Path" x:Key="BlueTargetStyle">
<Setter Property="Fill" Value="DeepSkyBlue"/>
<Setter Property="StrokeThickness" Value="1"/>
</Style>

<Style TargetType="Path" x:Key="BlackTargetStyle">
<Setter Property="Fill" Value="Black"/>
<Setter Property="StrokeThickness" Value="1"/>
</Style>

<Style TargetType="Path" x:Key="LightRedTargetStyle">
<Setter Property="Fill" Value="Red"/>
<Setter Property="StrokeThickness" Value="1"/>
</Style>

<Style TargetType="syncfusion:Node">
<Setter Property="ShapeStyle">
<Setter.Value>
<Style TargetType="Path">
<Setter Property="Fill" Value="#FF5B9BD5"/>
<Setter Property="Stretch" Value="Fill"/>
<Setter Property="Stroke" Value="#FFEDF1F6 "/>
</Style>
</Setter.Value>
</Setter>
</Style>



<Style TargetType="syncfusion:RunTimeConnectionIndicator">
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Style.Triggers>
<Trigger Property="PortHoverEffect" Value="Ripple">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:RunTimeConnectionIndicator">
<Grid>
<Viewbox x:Name="PART_Ripple" Width="55" Height="55" Visibility="Visible">
<Grid x:Name="LayoutRoot">
<Path x:Name="_4" Data="F1M30,15C30,23.284,23.284,30,15,30C6.716,30,0,23.284,0,15C0,6.716,6.716,0,15,0C23.284,0,30,6.716,30,15"
Fill="Red" Height="30" Opacity="0.25" Stretch="Fill" Width="30"
HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="connectionIndication">
<VisualState x:Name="Connecting">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="_4">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="_4">
<EasingDoubleKeyFrame KeyTime="0" Value="-0.333"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-0.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-0.667"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-0.834"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-1.001"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="-1.201"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="_4">
<EasingDoubleKeyFrame KeyTime="0" Value="0.333"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.667"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.834"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1.01"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="1.201"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="_4">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="_4">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.80"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.40"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.20"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard />
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>

</Style>
</ResourceDictionary>
</Window.Resources>


<Grid>
<syncfusion:SfDiagram x:Name="diagram" PortHoverEffect="Ripple" >
<syncfusion:SfDiagram.Nodes>
<syncfusion:NodeCollection>

</syncfusion:NodeCollection>
</syncfusion:SfDiagram.Nodes>

<syncfusion:SfDiagram.Connectors>
<syncfusion:ConnectorCollection>

</syncfusion:ConnectorCollection>
</syncfusion:SfDiagram.Connectors>
</syncfusion:SfDiagram>

</Grid>
</Window>
178 changes: 178 additions & 0 deletions Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/MainWindow.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
using Syncfusion.UI.Xaml.Diagram;
using Syncfusion.UI.Xaml.Diagram.Controls;
using Syncfusion.UI.Xaml.Diagram.Serializer;
using Syncfusion.UI.Xaml.Diagram.Utility;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Data;
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;
using System.Xml.Linq;
using Node = Syncfusion.UI.Xaml.Diagram.Node;

namespace PortsSample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
diagram.Constraints = GraphConstraints.Default | GraphConstraints.Bridging;

NodeViewModel node = new NodeViewModel()
{
OffsetX = 300,
OffsetY = 200,
UnitHeight = 100,
UnitWidth = 150,
Shape = this.Resources["Rectangle"],
Annotations = new ObservableCollection<IAnnotation>()
{
//Initialize the Annotation with content
new AnnotationEditorViewModel()
{
Content="Source node"
}
}
};


NodePortViewModel nodePort = new NodePortViewModel()
{
ID= "nodePort",
NodeOffsetX = 0,
NodeOffsetY = 0.5,
UnitHeight = 10,
UnitWidth = 10,
Shape = this.Resources["Ellipse"],
ShapeStyle = this.Resources["RedStyle"] as Style,
};
NodePortViewModel nodePort1 = new NodePortViewModel()
{
ID = "nodePort1",
NodeOffsetX = 0.5,
NodeOffsetY = 0,
UnitHeight = 10,
UnitWidth = 10,
Shape = this.Resources["Ellipse"],
ShapeStyle = this.Resources["GreenStyle"] as Style,
};
NodePortViewModel nodePort2 = new NodePortViewModel()
{
ID = "nodePort2",
NodeOffsetX = 0.5,
NodeOffsetY = 1,
UnitHeight = 10,
UnitWidth = 10,
Shape = this.Resources["Ellipse"],
ShapeStyle = this.Resources["BlackStyle"] as Style,
};
NodePortViewModel nodePort3 = new NodePortViewModel()
{
ID = "nodePort3",
NodeOffsetX = 1,
NodeOffsetY = 0.5,
UnitHeight = 10,
UnitWidth = 10,
Shape = this.Resources["Ellipse"],
ShapeStyle = this.Resources["BlueStyle"] as Style,
};


(node.Ports as PortCollection).Add(nodePort);
(node.Ports as PortCollection).Add(nodePort1);
(node.Ports as PortCollection).Add(nodePort2);
(node.Ports as PortCollection).Add(nodePort3);

(diagram.Nodes as NodeCollection).Add(node);



NodeViewModel node2 = new NodeViewModel()
{
ID = "Node2",
OffsetX = 700,
OffsetY = 300,
UnitHeight = 100,
UnitWidth = 150,
Shape = this.Resources["Rectangle"],
Annotations = new ObservableCollection<IAnnotation>()
{
//Initialize the Annotation with content
new AnnotationEditorViewModel()
{
Content="Target Node"
}
}
};

NodePortViewModel Port = new NodePortViewModel()
{
ID= "Port",
NodeOffsetX = 0,
NodeOffsetY = 0.5,
UnitHeight = 10,
UnitWidth = 10,
Shape = this.Resources["Ellipse"],
ShapeStyle = this.Resources["RedStyle"] as Style,
};
NodePortViewModel Port1 = new NodePortViewModel()
{
ID="Port1",
NodeOffsetX = 0.5,
NodeOffsetY = 0,
UnitHeight = 10,
UnitWidth = 10,
Shape = this.Resources["Ellipse"],
ShapeStyle = this.Resources["GreenStyle"] as Style,
};

NodePortViewModel Port2 = new NodePortViewModel()
{
ID="Port2",
NodeOffsetX = 0.5,
NodeOffsetY = 1,
UnitHeight = 10,
UnitWidth = 10,
Shape = this.Resources["Ellipse"],
ShapeStyle = this.Resources["BlackStyle"] as Style,
};
NodePortViewModel Port3 = new NodePortViewModel()
{
ID="Port3",
NodeOffsetX = 1,
NodeOffsetY = 0.5,
UnitHeight = 10,
UnitWidth = 10,
Shape = this.Resources["Ellipse"],
ShapeStyle = this.Resources["BlueStyle"] as Style,
};


(node2.Ports as PortCollection).Add(Port);
(node2.Ports as PortCollection).Add(Port1);
(node2.Ports as PortCollection).Add(Port2);
(node2.Ports as PortCollection).Add(Port3);
(diagram.Nodes as NodeCollection).Add(node2);



}


}
}
Loading

0 comments on commit ffbebac

Please sign in to comment.