Syncfusion Chart like Google Financial Chart

References:

Model:

    public class TimeLineData
    {
        public DateTime TimeStamp
        {
            get;
            set;
        }
        public double High
        {
            get;
            set;
        }
        public double Low
        {
            get;
            set;
        }
        public double Last
        {
            get;
            set;
        }
        public double Open
        {
            get;
            set;
        }
        public double Volume
        {
            get;
            set;
        }
    }

Convertor:

   public class LabelConverter : IValueConverter
   {

       public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
       {
           if (value.GetType() == typeof(ChartAxisLabel))
           {
               DateTime date;
               DateTime.TryParse((value as ChartAxisLabel).Content.ToString(), out date);
               if (date.Month >= 1 && date.Month <= 3)
               {
                   return "Q1";
               }
               else if (date.Month >= 4 && date.Month <= 6)
               {
                   return "Q2";
               }
               else if (date.Month >= 7 && date.Month <= 9)
               {
                   return "Q3";
               }
               else if (date.Month >= 10 && date.Month <= 12)
               {
                   return "Q4";
               }
           }
           return value;
       }

       public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
       {
           throw new NotImplementedException();
       }
   }

Behavior:

class TimelineDemoBehavior:Behavior<MainWindow>
    {
        protected override void OnAttached()
        {
            base.OnAttached();
            this.AssociatedObject.Loaded += new System.Windows.RoutedEventHandler(AssociatedObject_Loaded);
            
        }

        void AssociatedObject_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            DataCollection collection = new DataCollection();
            this.AssociatedObject.timelineControl.HoldUpdate = true;
            this.AssociatedObject.timelineControl.PrimaryAxis.DateTimeInterval = new TimeSpan(268, 0, 0, 0);
            this.AssociatedObject.timelineControl.DataSource = collection.datalist;
            this.AssociatedObject.timelineControl.BindingPathX = "TimeStamp";
            this.AssociatedObject.timelineControl.BindingPathsY = new string[] { "High", "Low" };
            this.AssociatedObject.timelineControl.HoldUpdate = false;
            this.AssociatedObject.timelineControl.EndInit();
            this.AssociatedObject.DataContext = collection.datalist;
            this.AssociatedObject.area.MouseMove += new System.Windows.Input.MouseEventHandler(area_MouseMove);
            this.AssociatedObject.area.MouseEnter += new System.Windows.Input.MouseEventHandler(area_MouseEnter);
            this.AssociatedObject.area.MouseLeave += new System.Windows.Input.MouseEventHandler(area_MouseLeave);
        }

        void area_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
        {
            this.AssociatedObject.hCircle.Visibility = System.Windows.Visibility.Collapsed;
        }

        void area_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
        {
            this.AssociatedObject.hCircle.Visibility = System.Windows.Visibility.Visible;
        }

        void area_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
        {
            ChartArea area=sender as ChartArea;
            if (this.AssociatedObject.series1.Data != null)
            {
                IChartDataPoint data = null;
                double xValue= Math.Round(area.PointToValue(area.PrimaryAxis, e.GetPosition(area)));
                for (int i = 0; i < this.AssociatedObject.series1.Data.Count; i++)
                {
                    if (this.AssociatedObject.series1.Data[i].X ==xValue)
                    {
                        data = this.AssociatedObject.series1.Data[i];
                        break;
                    }
                }
                TimeLineControlSample.TimeLineData tld = (TimeLineControlSample.TimeLineData)data.Item;
                this.AssociatedObject.date.Text = tld.TimeStamp.ToString("MMM d, yyyy");              
                this.AssociatedObject.vol.Text = tld.High.ToString();
                double yH = area.ValueToPoint(area.SecondaryAxis, tld.High);
                double yE = e.GetPosition(area).Y;
                var ep = e.GetPosition(this.AssociatedObject.canvas);
                this.AssociatedObject.hCircle.SetValue(Canvas.LeftProperty, ep.X);
                this.AssociatedObject.hCircle.SetValue(Canvas.TopProperty , ep.Y +(yH -yE )-2);

                
               
               
            }
        }

    }

MainWindow

<layout:SampleLayoutWindow x:Class="TimeLineControlSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sync="http://schemas.syncfusion.com/wpf" Style="{StaticResource SampleLayoutWindowStyle}"
        xmlns:layout="clr-namespace:Syncfusion.Windows.SampleLayout;assembly=Syncfusion.Chart.Wpf.SampleLayout"
        xmlns:local="clr-namespace:TimeLineControlSample" 
        xmlns:inter="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        Title="TimeLine Control Demo" UserOptionsVisibility="Collapsed" TitleBarBackground="Transparent" >
    <inter:Interaction.Behaviors>
        <local:TimelineDemoBehavior/>
    </inter:Interaction.Behaviors>
   
    <layout:SampleLayoutWindow.Background>
        <RadialGradientBrush RadiusX="0.558795" RadiusY="0.805194" Center="0.499999,0.5" GradientOrigin="0.499999,0.5">
            <RadialGradientBrush.RelativeTransform>
                <TransformGroup/>
            </RadialGradientBrush.RelativeTransform>
            <GradientStop Color="#FF226285" Offset="0"/>
            <GradientStop Color="#FF060B2A" Offset="1"/>
        </RadialGradientBrush>
    </layout:SampleLayoutWindow.Background>
    <layout:SampleLayoutWindow.Resources>
        <ResourceDictionary>
            
            <DataTemplate x:Key="ScrollThumbTemplateKey" >
                <Grid>
                    <Button Height="12" Margin="0,1,-2,1" Opacity="0.8" >
                        <Button.Template>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Rectangle Fill="#FFC7EAE9" StrokeThickness="0" x:Name="path" Stretch="Fill"  Width="{Binding Path=SelectedRegionWidth, RelativeSource={RelativeSource FindAncestor,  AncestorType={x:Type sync:TimeLineControl}}}" />
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="path" Property="Opacity" Value="0.75"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </Grid>
            </DataTemplate>
            <local:LabelConverter  x:Key="LabelConverterKey" />
           
            <DataTemplate x:Key="verticalline">
                <Canvas>
                    <Line X1="{Binding OffsetX}" Y1="0" X2="{Binding OffsetX}" Y2="1000" Stroke="White" />
                </Canvas>
            </DataTemplate>
            <DataTemplate x:Key="label">
                <TextBlock Text="{Binding Content}" Foreground="Red"/>
            </DataTemplate>
        </ResourceDictionary>
    </layout:SampleLayoutWindow.Resources>
    <layout:SampleLayoutWindow.ControlLayout>
         <Grid Margin="50,30,50,50">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="0.75*" />
                <RowDefinition Height="0.25*" />
            </Grid.RowDefinitions>
            <StackPanel Grid.Row="0" Orientation="Horizontal">
                <Grid HorizontalAlignment="Left" Height="40" Width="180" Grid.Column="0" >
                    <Rectangle Stretch="Fill" Fill="#FF68C7DD" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.4"/>
                    <TextBlock Text="Stock Price Chart" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="White" FontSize="20" FontFamily="Segoe UI" FontWeight="Regular" />
                                      
                </Grid>
                <Grid Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock x:Name="Date" Text="Date:" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="White" FontSize="15" FontFamily="Segoe UI" FontWeight="Regular"  ></TextBlock>
                    <TextBlock x:Name="date"  HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="White" FontSize="15" FontFamily="Segoe UI" FontWeight="Regular"  Grid.Column="1"   ></TextBlock>
                    <TextBlock x:Name="volume" Text="Volume:" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="White" FontSize="15" FontFamily="Segoe UI" FontWeight="Regular" Margin="30,0,0,0" Grid.Column="2"></TextBlock>
                    <TextBlock x:Name="vol" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="White" FontSize="15" FontFamily="Segoe UI" FontWeight="Regular"  Grid.Column="3"></TextBlock>
                </Grid>
            </StackPanel>
            <Canvas Name="canvas" Grid.Row="1" Background="Transparent">
                <Ellipse Fill="Red"  Name="hCircle" Width="5" Height="5" Visibility="Collapsed"  ></Ellipse>
            </Canvas>
               
            <sync:Chart Grid.Row="1">
                <sync:ChartArea x:Name="area" Margin="-7,0,0,0" >
                    
                    <sync:ChartArea.PrimaryAxis>
                        <sync:ChartAxis  LabelForeground="#FFAAD8D6" InteractiveCursorContentVisibility="false" ValueType="DateTime"  LabelDateTimeFormat="MMM/dd/yyy" RangePadding="None" EdgeLabelsDrawingMode="Shift" IsInversed="True"  TickSize="0" SmallTickSize="0">
                            <sync:ChartAxis.Header>
                                <TextBlock Text="Date" FontFamily="Segoe UI" FontSize="12" Foreground="#FFAAD8D6"/>
                            </sync:ChartAxis.Header> 
                        </sync:ChartAxis>
                    </sync:ChartArea.PrimaryAxis>
                    
                    <sync:ChartArea.SecondaryAxis>
                        <sync:ChartAxis LabelForeground="#FFAAD8D6" InteractiveCursorContentVisibility="false" OpposedPosition="True" IsAutoSetRange="False" Range="0,800" Interval="100" TickSize="0" SmallTickSize="0">
                            <sync:ChartAxis.Header>
                                <TextBlock Text="Price in Dollars(USD)" FontFamily="Segoe UI" FontSize="12" Foreground="#FFAAD8D6"/>
                            </sync:ChartAxis.Header> 
                        </sync:ChartAxis>
                    </sync:ChartArea.SecondaryAxis>
                    
                    <sync:ChartSeries x:Name="series1" ShowToolTip="False" DataSource="{Binding ElementName=timelineControl, Path=SelectedData, Mode=TwoWay, UpdateSourceTrigger=Explicit}" BindingPathX="TimeStamp" BindingPathsY="High" Type="Spline" >                      
                    </sync:ChartSeries>

                    <!--<sync:ChartSeries x:Name="series3" ShowToolTip="False" DataSource="{Binding ElementName=timelineControl, Path=SelectedData, Mode=TwoWay, UpdateSourceTrigger=Explicit}" BindingPathX="TimeStamp" BindingPathsY="Last" Type="Spline" >                       
                    </sync:ChartSeries>


                    <sync:ChartSeries x:Name="series2" ShowToolTip="False" DataSource="{Binding ElementName=timelineControl, Path=SelectedData, Mode=TwoWay, UpdateSourceTrigger=Explicit}" BindingPathX="TimeStamp" BindingPathsY="Low" Type="Spline" >                       
                    </sync:ChartSeries>-->
                </sync:ChartArea>
            </sync:Chart>
            
            <Border Grid.Row="2" BorderBrush="#FF4A9BC6" BorderThickness="1" Margin="0,0,33,0">
                <sync:TimeLineControl x:Name="timelineControl" BorderBrush="#FFAAD8D6" StartValue="0" EndValue="85" IsContextMenuEnabled="True"  TimeLineInterior="#FF70CAD0" TimeLineThickness="2"  UnSelectedRegionInterior="Transparent" ViewLineInterior="#FFC7EAE9"  ScrollBarInterior="Transparent" ScrollThumbTemplate="{DynamicResource ScrollThumbTemplateKey}"  ScrollBarBorderBrush="#FF4A9BC6"  >
                    <sync:TimeLineControl.ViewPortInterior>
                        <SolidColorBrush Color="#FF68C7DD" Opacity="0.4"/>
                    </sync:TimeLineControl.ViewPortInterior>
                    <sync:TimeLineControl.MouseOverInterior>
                        <SolidColorBrush Color="#FF68C7DD" Opacity="0.4"/>
                    </sync:TimeLineControl.MouseOverInterior>
                    <sync:TimeLineControl.LeftIndicatorTemplate>
                        <DataTemplate>
                            <Rectangle Fill="#FFC7EAE9" Stretch="Fill" Height="20" Width="5" Margin="-2.5,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </DataTemplate>
                    </sync:TimeLineControl.LeftIndicatorTemplate>
                    <sync:TimeLineControl.RightIndicatorTemplate>
                        <DataTemplate>
                            <Rectangle Fill="#FFC7EAE9" Stretch="Fill" Height="20" Width="5" Margin="-2.5,0,0,-10" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </DataTemplate>
                    </sync:TimeLineControl.RightIndicatorTemplate>
                    <sync:TimeLineControl.ScrollBarSmallIncreaseTemplate>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Grid>
                                <TextBlock FontFamily="Wingdings 3" Text="}" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#FFAAD8D6" Background="Transparent"  />
                            </Grid>
                        </ControlTemplate>
                    </sync:TimeLineControl.ScrollBarSmallIncreaseTemplate>
                    <sync:TimeLineControl.ScrollBarSmallDecreaseTemplate>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Grid>
                                <TextBlock FontFamily="Wingdings 3" Text="|" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#FFAAD8D6" Background="Transparent"  />
                            </Grid>
                        </ControlTemplate>
                    </sync:TimeLineControl.ScrollBarSmallDecreaseTemplate>
                    <sync:TimeLineControl.GridBackground>
                        <LinearGradientBrush StartPoint="0.5,0.939745" EndPoint="0.5,0.146812" Opacity="0.4">
                            <GradientStop Color="#007BCEC1" Offset="0"/>
                            <GradientStop Color="#FF6BC7DD" Offset="1"/>
                        </LinearGradientBrush>
                    </sync:TimeLineControl.GridBackground>
                    <sync:TimeLineControl.PrimaryAxis>
                        <sync:ChartAxis x:Name="primary" TickSize="0" SmallTickSize="0" RangePadding="None" EdgeLabelsDrawingMode="Fit" IntersectAction="Hide" ValueType="DateTime"  LabelDateTimeFormat="yyyy" Interval="1"  LabelPosition="Outside" LabelForeground="#FFD8F0F0" OpposedPosition="True">
                            <sync:ChartArea.ShowGridLines>False</sync:ChartArea.ShowGridLines>
                            <sync:ChartArea.ShowMajorGridLines>True</sync:ChartArea.ShowMajorGridLines>
                            <sync:ChartArea.OriginLineStroke>
                                <Pen Brush="#FF4A9BC6" Thickness="1"/>
                            </sync:ChartArea.OriginLineStroke>
                            <sync:ChartAxis.LineStroke>
                                <Pen Brush="#FF4A9BC6" Thickness="1"/>
                            </sync:ChartAxis.LineStroke>
                        </sync:ChartAxis>
                    </sync:TimeLineControl.PrimaryAxis>
                    <sync:TimeLineControl.Axes>
                        <sync:ChartAxis x:Name="quater" TickSize="0" SmallTickSize="0" LabelForeground="White" ValueType="DateTime" Interval="63" IsAutoSetRange="False" Range="0,1250">
                            <sync:ChartArea.GridLineStroke>
                                <Pen Brush="#FF4A9BC6" Thickness="1"/>
                            </sync:ChartArea.GridLineStroke>
                            <sync:ChartArea.ShowGridLines>True</sync:ChartArea.ShowGridLines>
                            <sync:ChartArea.ShowMajorGridLines>True</sync:ChartArea.ShowMajorGridLines>
                            <sync:ChartArea.OriginLineStroke>
                                <Pen Brush="#FF4A9BC6" Thickness="1"/>
                            </sync:ChartArea.OriginLineStroke>
                            <sync:ChartAxis.LineStroke>
                                <Pen Brush="#FF4A9BC6" Thickness="1"/>
                            </sync:ChartAxis.LineStroke>
                            <sync:ChartAxis.LabelTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Converter={StaticResource LabelConverterKey}}" Margin="50,0,0,0"  Foreground="#FFD8F0F0"/>
                                </DataTemplate>
                            </sync:ChartAxis.LabelTemplate>
                        </sync:ChartAxis>
                    </sync:TimeLineControl.Axes>
                </sync:TimeLineControl>
            </Border>
        </Grid>
    </layout:SampleLayoutWindow.ControlLayout>
</layout:SampleLayoutWindow>

App style:

<Application x:Class="TimeLineControlSample.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
             xmlns:local="clr-namespace:Syncfusion.Windows.SampleLayout;assembly=Syncfusion.Chart.Wpf.SampleLayout"
             StartupUri="View/MainWindow.xaml">
    <Application.Resources>

        <SolidColorBrush x:Key="MetroPathBrush" Color="#FF7F7F7F"/>

        <SolidColorBrush x:Key="MetroTitleBarBackground" Color="#FF1BA1E2"/>

        <SolidColorBrush x:Key="MetroTitleBarForeground" Color="White"/>

        <LinearGradientBrush x:Key="ResizeGripperForeground" EndPoint="1,0.75" StartPoint="0,0.25">
            <GradientStop Color="#FFFFFF" Offset="0.3"/>
            <GradientStop Color="#BBC5D7" Offset="0.75"/>
            <GradientStop Color="#6D83A9" Offset="1"/>
        </LinearGradientBrush>

        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>

        <syncfusion:CornerRadiusConverter x:Key="CRConvert"/>

        <Style TargetType="{x:Type syncfusion:TitleBar}">
            <Setter Property="Focusable" Value="False"/>
        </Style>

        <Style TargetType="{x:Type syncfusion:TitleButton}">
            <Setter Property="Focusable" Value="False"/>
        </Style>

        <Style x:Key="ResizeStyle" TargetType="{x:Type syncfusion:ResizeGripStyle}">
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Visibility" Value="Collapsed"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Cursor" Value="SizeNWSE"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type syncfusion:ResizeGripStyle}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Grid Height="3" Width="1" Grid.Column="2" Grid.Row="0" Margin="2,1,1,1" >
                                <Rectangle Fill="#FF939598"/>
                                <Rectangle Fill="#FF939598" RenderTransformOrigin="0.5,0.5">
                                    <Rectangle.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform/>
                                            <SkewTransform/>
                                            <RotateTransform Angle="90"/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                            </Grid>
                            <Grid Height="3"   Width="1" Grid.Column="1" Grid.Row="1" Margin="2,1,1,1" >
                                <Rectangle Fill="#FF939598"/>
                                <Rectangle Fill="#FF939598" RenderTransformOrigin="0.5,0.5">
                                    <Rectangle.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform/>
                                            <SkewTransform/>
                                            <RotateTransform Angle="90"/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                            </Grid>
                            <Grid Height="3"   Width="1" Grid.Column="2" Grid.Row="1" Margin="2,1,1,1" >
                                <Rectangle Fill="#FF939598"/>
                                <Rectangle Fill="#FF939598" RenderTransformOrigin="0.5,0.5">
                                    <Rectangle.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform/>
                                            <SkewTransform/>
                                            <RotateTransform Angle="90"/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                            </Grid>
                            <Grid Height="3" Width="1" Grid.Column="0" Grid.Row="2" Margin="1" >
                                <Rectangle Fill="#FF939598"/>
                                <Rectangle Fill="#FF939598" RenderTransformOrigin="0.5,0.5">
                                    <Rectangle.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform/>
                                            <SkewTransform/>
                                            <RotateTransform Angle="90"/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                            </Grid>
                            <Grid Height="3"   Width="1" Grid.Column="1" Grid.Row="2" Margin="2,1,1,1" >
                                <Rectangle Fill="#FF939598"/>
                                <Rectangle Fill="#FF939598" RenderTransformOrigin="0.5,0.5">
                                    <Rectangle.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform/>
                                            <SkewTransform/>
                                            <RotateTransform Angle="90"/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                            </Grid>
                            <Grid Height="3"   Width="1" Grid.Column="2" Grid.Row="2" Margin="2,1,1,1" >
                                <Rectangle Fill="#FF939598"/>
                                <Rectangle Fill="#FF939598" RenderTransformOrigin="0.5,0.5">
                                    <Rectangle.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform/>
                                            <SkewTransform/>
                                            <RotateTransform Angle="90"/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                            </Grid>
                        </Grid>
                        <!--<Grid Background="Transparent" SnapsToDevicePixels="true">
                        <Path Data="M 9,0 L 11,0 L 11,11 L 0,11 L 0,9 L 3,9 L 3,6 L 6,6 L 6,3 L 9,3 z" HorizontalAlignment="Right" VerticalAlignment="Bottom" >
                            <Path.Fill>
                                <DrawingBrush TileMode="Tile" Viewbox="0,0,3,3" Viewport="0,0,3,3" ViewportUnits="Absolute" ViewboxUnits="Absolute">
                                    <DrawingBrush.Drawing>
                                        <DrawingGroup>
                                            <GeometryDrawing Brush="{StaticResource ResizeGripperForeground}" Geometry="M 0,0 L 2,0 L 2,2 L 0,2 z "/>
                                        </DrawingGroup>
                                    </DrawingBrush.Drawing>
                                </DrawingBrush>
                            </Path.Fill>
                        </Path>
                    </Grid>-->
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

        </Style>

        <ControlTemplate x:Key="SkinTemp" TargetType="{x:Type local:SampleLayoutWindow}">
            <AdornerDecorator>
                <Border Name="OuterBorder" CornerRadius="{Binding RelativeSource={RelativeSource FindAncestor,  AncestorType={x:Type local:SampleLayoutWindow}}, Path=CornerRadius}" 
                    Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding ResizeBorderThickness}" 
                    BorderBrush="White" Margin="{TemplateBinding Margin}">
                    <!--<Border.Effect>
                    <DropShadowEffect BlurRadius="30" Direction="302" ShadowDepth="0" Color="Black"/>
                </Border.Effect>-->
                    <Border Name="InnerBorder">
                        <Grid x:Name="RootGrid">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <Border Grid.RowSpan="2" Background="{TemplateBinding Background}" CornerRadius="{Binding RelativeSource={RelativeSource FindAncestor,  AncestorType={x:Type local:SampleLayoutWindow}}, Path=CornerRadius}">
                                <Border.Effect>
                                    <DropShadowEffect BlurRadius="30" Direction="302" ShadowDepth="0" Color="Black"/>
                                </Border.Effect>
                            </Border>
                            <Border Name="ContentAreaBorder" Grid.Row="1" >
                                <Grid x:Name="ChildGrid">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <syncfusion:ResizeGripStyle x:Name="PART_Resizegrip" Style="{TemplateBinding ResizeGripStyle}" HorizontalAlignment="right" VerticalAlignment="Bottom" Visibility="Collapsed" IsTabStop="False" Cursor="SizeNWSE" Margin="0,0,3,3" />
                                    <ContentPresenter Name="contentpresenter"   ></ContentPresenter>
                                </Grid>
                            </Border>
                            <syncfusion:TitleBar Grid.Row="0" Template="{TemplateBinding TitleBarTemplate}" Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding TitleBarBackground}" Name="PART_TitleBar" Focusable="False" Height="60" >
                                <Grid>
                                    <Path Stretch="Fill" StrokeThickness="1.33333" StrokeMiterLimit="2.75" Stroke="#FF194B7A" Data="F1 M 124.623,343.223L 109.916,343.223L -412.585,343.223L -412.585,414.374L 124.623,414.374L 181.149,343.223L 124.623,343.223 Z " Height="70" Width="500" HorizontalAlignment="Left" VerticalAlignment="Top" >
                                        <Path.Fill>
                                            <LinearGradientBrush StartPoint="0.499999,0.248289" EndPoint="0.499999,0.950002">
                                                <GradientStop Color="#FF226088" Offset="0"/>
                                                <GradientStop Color="#FF194F70" Offset="0.485207"/>
                                                <GradientStop Color="#FF113F59" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <TextBlock Text="{TemplateBinding Title}" Foreground="{TemplateBinding TitleBarForeground}" HorizontalAlignment="Left" VerticalAlignment="Center" FontFamily="Segoe UI" FontWeight="Light" FontSize="30" Margin="20,0,0,0"/>
                                    <StackPanel x:Name="MinMaxCloseStackPanel"  Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" >
                                        <syncfusion:TitleButton Command="syncfusion:ChromelessWindow.ToggleMinimizedState" x:Name="MinimizeButton"  Template="{TemplateBinding MinimizeButtonTemplate}" />
                                        <syncfusion:TitleButton Command="syncfusion:ChromelessWindow.ToggleMaximizedState" Visibility="Collapsed" x:Name="PART_MaximizeButton" Template="{TemplateBinding MaximizeButtonTemplate}"  Margin="0,0,4,0"  />
                                        <syncfusion:TitleButton Command="syncfusion:ChromelessWindow.ToggleMaximizedState" Visibility="Collapsed" x:Name="PART_RestoreButton" Template="{TemplateBinding RestoreButtonTemplate}" Margin="0,-2,5,0"   />
                                        <syncfusion:TitleButton Command="syncfusion:ChromelessWindow.CloseWindow" x:Name="CloseButton" Template="{TemplateBinding CloseButtonTemplate}"    VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
                                    </StackPanel>
                                </Grid>
                            </syncfusion:TitleBar>
                        </Grid>
                    </Border>
                </Border>
            </AdornerDecorator>
            <ControlTemplate.Triggers>
                <Trigger Property="ResizeMode" Value="NoResize">
                    <Setter Property="Visibility" Value="Collapsed" TargetName="MinimizeButton"/>
                    <Setter Property="Visibility" Value="Collapsed" TargetName="PART_MaximizeButton"/>
                    <Setter Property="Visibility" Value="Collapsed" TargetName="PART_RestoreButton"/>
                    <Setter Property="ResizeBorderThickness" Value="1"/>
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="ResizeMode" Value="CanResizeWithGrip"/>
                        <Condition Property="WindowState" Value="Normal"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Visibility" Value="Visible" TargetName="PART_Resizegrip"/>

                </MultiTrigger>

                <Trigger Property="WindowState" Value="Maximized">
                    <Setter Property="Margin" Value="0" TargetName="OuterBorder"/>
                </Trigger>

                <Trigger Property="IsActive" Value="False">
                    <Setter Property="Effect" TargetName="OuterBorder">
                        <Setter.Value>
                            <DropShadowEffect BlurRadius="20" Direction="320" ShadowDepth="0" Color="Black" Opacity="0.8"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>

                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="ResizeMode" Value="NoResize"/>
                        <Condition Property="WindowState" Value="Maximized"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Visibility" Value="Collapsed" TargetName="MinimizeButton"/>
                    <Setter Property="Visibility" Value="Collapsed" TargetName="PART_MaximizeButton"/>
                    <Setter Property="Visibility" Value="Collapsed" TargetName="PART_RestoreButton"/>
                    <Setter Property="Margin" Value="0" TargetName="OuterBorder"/>
                </MultiTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <ControlTemplate x:Key="MinimizeBlue" TargetType="{x:Type Button}" >
            <Border Name="minborder"   BorderThickness="1" CornerRadius="0" Background="Transparent" Margin="3" SnapsToDevicePixels="True">
                <Path x:Name="minpath" Data="M0.5,0.5 L8.5,0.5 L8.5,2.5 L0.5,2.5 z" Fill="#FFB8B6B7" HorizontalAlignment="Center"
                  VerticalAlignment="Center" Height="3" Margin="5" Stretch="Fill" Stroke="{StaticResource MetroPathBrush}" Width="13" SnapsToDevicePixels="True"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="minpath" Property="Fill" Value="#FFFFFFFF"/>

                </Trigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>

        <ControlTemplate x:Key="MaximizeBlue" TargetType="{x:Type Button}">
            <Border x:Name="maxborder" BorderThickness="0"
                    BorderBrush="Transparent" Margin="0 3 3 3">
                <Border Width="10" Height="10" x:Name="pathButton" Background="#FF353535" BorderThickness="1 3 1 1" BorderBrush="#FFB8B6B7"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="pathButton" Property="BorderBrush" Value="White"/>
                </Trigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>

        <ControlTemplate x:Key="RestoreBlue" TargetType="{x:Type Button}">
            <Grid x:Name="minButton"  Margin="0 3 3 3">
                <Rectangle x:Name="path1" Stroke="#FFB8B6B7" StrokeThickness="1" Fill="#FF353535" Width="9" Height="9"/>
                <Rectangle x:Name="path2" Stroke="#FFB8B6B7" StrokeThickness="2" Fill="#FF353535" Width="9" Height="9" Margin="0 5 5 0"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="path1" Property="Stroke" Value="White"/>
                    <Setter TargetName="path2" Property="Stroke" Value="White"/>
                </Trigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>

        <ControlTemplate x:Key="CloseBlue" TargetType="{x:Type Button}">
            <Border Cursor="Arrow" Background="Transparent" >
                <Grid   Height="35"  Width="35">
                    <Path x:Name="path" HorizontalAlignment="Stretch" Opacity="0.3" VerticalAlignment="Stretch" Stretch="Fill" Fill="White" Data="F1 M 259.89,264.302L 259.89,346.681C 305.385,346.681 342.269,309.797 342.269,264.302L 259.89,264.302L 259.89,264.302 Z " RenderTransformOrigin="0.5,0.5">
                        <Path.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform Angle="90"/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Path.RenderTransform>
                    </Path>
                    <Grid   Height="10"  Width="2" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,10,0">
                        <Rectangle x:Name="rect1" SnapsToDevicePixels="True" Fill="White" StrokeThickness="0" RenderTransformOrigin="0.5,0.5" >
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="-45"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle  x:Name="rect2" SnapsToDevicePixels="True" Fill="White" StrokeThickness="0" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="45"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                    </Grid>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="path" Property="Opacity" Value="0.5"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <ControlTemplate x:Key="IconDialogclose" TargetType="{x:Type Button}">
            <Border Width="0" Height="0" Cursor="Arrow" Background="Transparent"  >
            </Border>
        </ControlTemplate>

        <ControlTemplate x:Key="Office2010BlueTitleBarTemplate" TargetType="{x:Type syncfusion:TitleBar}">
            <Border Name="border"  Height="60"  CornerRadius="0" Background="Transparent" >
                <Border BorderBrush="{DynamicResource  MetroBorderBrush}" Background="{TemplateBinding Background}" BorderThickness="0" Width="Auto" CornerRadius="0">
                    <ContentPresenter VerticalAlignment="Bottom"  Margin="0,0,0,0"/>
                </Border>
            </Border>
        </ControlTemplate>

        <Style TargetType="{x:Type local:SampleLayoutWindow}" x:Key="SampleLayoutWindowStyle">
            <Setter Property="Height" Value="720" />
            <Setter Property="Width" Value="1024" />
            <Setter Property="ResizeMode" Value="NoResize"/>
            <Setter Property="ResizeGripStyle" Value="{StaticResource ResizeStyle}"/>
            <Setter Property="WindowStyle" Value="None" />
            <Setter Property="ResizeBorderThickness" Value="2" />
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="CornerRadius" Value="0"/>
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontWeight" Value="Regular"/>
            <Setter Property="MinWidth" Value="300"/>
            <Setter Property="MinHeight" Value="120"/>
            <Setter Property="Margin" Value="25"/>
            <Setter Property="TitleBarBackground" Value="{StaticResource MetroTitleBarBackground}"/>
            <Setter Property="TitleBarForeground" Value="{StaticResource  MetroTitleBarForeground}"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="BorderThickness" Value="0.5"/>
            <Setter Property="ResizeBorderBrush" Value="{DynamicResource  MetroBorderBrush}"/>
            <Setter Property="Foreground" Value="{DynamicResource  MetroForegroundBrush}"/>
            <Setter Property="MinimizeButtonTemplate" Value="{StaticResource MinimizeBlue}"/>
            <Setter Property="MaximizeButtonTemplate" Value="{StaticResource MaximizeBlue}"/>
            <Setter Property="RestoreButtonTemplate" Value="{StaticResource RestoreBlue}"/>
            <Setter Property="CloseButtonTemplate" Value="{StaticResource CloseBlue}"/>
            <Setter Property="TitleBarTemplate" Value="{StaticResource Office2010BlueTitleBarTemplate}"/>
            <Setter Property="Template" Value="{StaticResource SkinTemp}"/>
            <Setter Property="Icon" Value="/syncfusion.Chart.Wpf.SampleLayout;component/App.ico" />
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Grid.Resources>
                                <ResourceDictionary>
                                    <ResourceDictionary.MergedDictionaries>
                                        <ResourceDictionary Source="/syncfusion.Chart.Wpf.SampleLayout;component/Themes/ControlStyles.xaml" />
                                    </ResourceDictionary.MergedDictionaries>
                                </ResourceDictionary>
                            </Grid.Resources>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>
                            <ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor,  AncestorType={x:Type local:SampleLayoutWindow}}, Path=ControlLayout}" />

                            <Line Width="10" X1="0" Y1="0" X2="0" Y2="100" Stroke="#FFD3D3D3" Stretch="Fill" Margin="0,40,0,40"  RenderOptions.EdgeMode="Aliased" StrokeThickness="1" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Visibility="{Binding RelativeSource={RelativeSource FindAncestor,  AncestorType={x:Type local:SampleLayoutWindow}},Path= UserOptionsVisibility}" />

                            <ScrollViewer Width="300" Grid.Column="2" Margin="0,40,0,40" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Visibility="{Binding RelativeSource={RelativeSource FindAncestor,  AncestorType={x:Type local:SampleLayoutWindow}},Path= UserOptionsVisibility}" >
                                <ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor,  AncestorType={x:Type local:SampleLayoutWindow}}, Path=UserOptionsLayout}" />
                            </ScrollViewer>

                        </Grid>


                    </DataTemplate>

                </Setter.Value>
            </Setter>
        </Style>


    </Application.Resources>
</Application>