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>
