欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Syncfusion Chart like Google Financial Chart

程序员文章站 2024-03-17 10:06:16
...

References:

Syncfusion Chart like Google Financial Chart

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>

 

Syncfusion Chart like Google Financial Chart


  

转载于:https://www.cnblogs.com/mjgb/archive/2012/10/05/2711879.html