diff --git a/wpf/Charts/Animation.md b/wpf/Charts/Animation.md index 3589a6f61..cb7e021c1 100644 --- a/wpf/Charts/Animation.md +++ b/wpf/Charts/Animation.md @@ -40,11 +40,12 @@ The following example shows the Animation feature for chart series. {% highlight xaml %} - - - + {% endhighlight %} @@ -53,17 +54,11 @@ XBindingPath="Category" YBindingPath="Count" ItemsSource="{Binding}"/> ColumnSeries columnSeries = new ColumnSeries() { - - ItemsSource = new ViewModel().Data, - - XBindingPath = "Category", - - YBindingPath = "Count", - - EnableAnimation = true, - - AnimationDuration = new TimeSpan(00, 00, 03) - + ItemsSource = new ViewModel().Data, + XBindingPath = "Category", + YBindingPath = "Count", + EnableAnimation = true, + AnimationDuration = new TimeSpan(00, 00, 03) }; chart.Series.Add(columnSeries); diff --git a/wpf/Charts/Appearance.md b/wpf/Charts/Appearance.md index 3af66caa8..4da53198a 100644 --- a/wpf/Charts/Appearance.md +++ b/wpf/Charts/Appearance.md @@ -40,7 +40,7 @@ Each palette applies a set of predefined brushes to the series in a predefined o {% highlight xaml %} - + {% endhighlight %} @@ -84,26 +84,22 @@ Each palette applies a set of predefined brushes to the segment in a predefined {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} DoughnutSeries series = new DoughnutSeries() - { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage", - Palette = ChartColorPalette.Metro - }; chart.Series.Add(series); @@ -120,26 +116,22 @@ The following code example defined Palette as **AutumnBrights**. {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} DoughnutSeries series = new DoughnutSeries() - { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage", - Palette = ChartColorPalette.AutumnBrights - }; chart.Series.Add(series); @@ -161,26 +153,19 @@ SfChart provides option which enables you to define your own color brushes with {% highlight xaml %} - - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -188,24 +173,16 @@ XBindingPath="Category" ItemsSource="{Binding Tax}" > {% highlight c# %} ChartColorModel colorModel = new ChartColorModel(); - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Cyan)); - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.DarkCyan)); DoughnutSeries series = new DoughnutSeries() { - - ItemsSource = new ViewModel().Tax, - + ItemsSource = new ViewModel().Tax, XBindingPath = "Category", - YBindingPath = "Percentage", - - Palette = ChartColorPalette.Custom, - - ColorModel = colorModel - + Palette = ChartColorPalette.Custom, + ColorModel = colorModel }; chart.Series.Add(series); @@ -223,25 +200,20 @@ You can define the custom palette for series as in the below code example: {% highlight xaml %} - - - - - - - - - - - + - - - - - - - + + + + + + + + + @@ -250,13 +222,10 @@ You can define the custom palette for series as in the below code example: {% highlight c# %} chart.Palette = ChartColorPalette.Custom; - ChartColorModel colorModel = new ChartColorModel(); colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.BlueViolet)); - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.PeachPuff)); - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Purple)); chart.ColorModel = colorModel; @@ -323,46 +292,52 @@ ChartColorModel colorModel = new ChartColorModel(); LinearGradientBrush gradientColor1 = new LinearGradientBrush(); -GradientStop stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(255, 231, 199) }; +GradientStop stop1 = new GradientStop() +{ + Offset = 1, + Color = Color.FromRgb(255, 231, 199) +}; -GradientStop stop2 = new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 182, 159) }; +GradientStop stop2 = new GradientStop() +{ + Offset = 0, + Color = Color.FromRgb(252, 182, 159) +}; gradientColor1.GradientStops.Add(stop1); - gradientColor1.GradientStops.Add(stop2); LinearGradientBrush gradientColor2 = new LinearGradientBrush(); -stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(250, 221, 125) }; +stop1 = new GradientStop() +{ + Offset = 1, + Color = Color.FromRgb(250, 221, 125) +}; -stop2 = new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 204, 45) }; +stop2 = new GradientStop() +{ + Offset = 0, + Color = Color.FromRgb(252, 204, 45) +}; gradientColor2.GradientStops.Add(stop1); - gradientColor2.GradientStops.Add(stop2); ... colorModel.CustomBrushes.Add(gradientColor1); - colorModel.CustomBrushes.Add(gradientColor2); ... ColumnSeries series = new ColumnSeries() - { - - ItemsSource = new ViewModel().Data, - + ItemsSource = new ViewModel().Data, XBindingPath = "Element", - YBindingPath = "YValue", - - Palette = ChartColorPalette.Custom, - - ColorModel = colorModel - + Palette = ChartColorPalette.Custom, + ColorModel = colorModel }; chart.Series.Add(series); @@ -379,14 +354,15 @@ The following code sample and screenshot illustrates how to apply the gradient c {% highlight xaml %} - + - - + + @@ -402,28 +378,29 @@ SfChart chart = new SfChart(); LinearGradientBrush gradientColor = new LinearGradientBrush(); -GradientStop stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(168, 234, 238) }; +GradientStop stop1 = new GradientStop() +{ + Offset = 1, + Color = Color.FromRgb(168, 234, 238) +}; -GradientStop stop2 = new GradientStop() { Offset = 0, Color = Color.FromRgb(123, 176, 249) }; +GradientStop stop2 = new GradientStop() +{ + Offset = 0, + Color = Color.FromRgb(123, 176, 249) +}; gradientColor.GradientStops.Add(stop1); - gradientColor.GradientStops.Add(stop2); ... ColumnSeries series = new ColumnSeries() - { - - ItemsSource = new ViewModel().Data, - + ItemsSource = new ViewModel().Data, XBindingPath = "Element", - YBindingPath = "YValue", - - Interior = gradientColor, - + Interior = gradientColor }; chart.Series.Add(series); @@ -443,20 +420,15 @@ The color for the chart segments can be bound from its items source collection b {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} ColumnSeries series = new ColumnSeries() - { - SegmentColorPath = "SegmentColor" - }; {% endhighlight %} @@ -479,63 +451,38 @@ The following code example demonstrates applying the palette color to the legend {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} @@ -544,11 +491,8 @@ Text="{Binding Label}"> chart.Legend = new ChartLegend() { - DockPosition = ChartDock.Left, - ItemTemplate = chart.Resources["itemTemplate"] as DataTemplate - }; {% endhighlight %} @@ -567,90 +511,77 @@ SfChart provides the option to define your own template for Tooltip. The followi {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} @@ -659,19 +590,12 @@ Foreground="Black" FontSize="10"/> BarSeries series = new BarSeries() { - ItemsSource = new ViewModel().CategoricalDatas, - XBindingPath = "Category", - YBindingPath = "Value", - Palette = ChartColorPalette.FloraHues, - ShowTooltip = true, - TooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate - }; ChartTooltip.SetShowDuration(series, 5000); diff --git a/wpf/Charts/Exporting.md b/wpf/Charts/Exporting.md index 57a8e16da..94c2aa324 100644 --- a/wpf/Charts/Exporting.md +++ b/wpf/Charts/Exporting.md @@ -54,19 +54,15 @@ This helps to export the chart to any stream as in below code example. private void SaveImageEncoder_Click(object sender, RoutedEventArgs e) { SaveFileDialog sfd = new SaveFileDialog(); - - sfd.Filter = "Bitmap(*.bmp)|*.bmp|JPEG(*.jpg,*.jpeg)|*.jpg;*.jpeg|Gif (*.gif)|*.gif|PNG(*.png)|*.png|TIFF(*.tif,*.tiff)|*.tif|All files (*.*)|*.*"; + + sfd.Filter = "Bitmap(*.bmp)|*.bmp|JPEG(*.jpg,*.jpeg)|*.jpg;*.jpeg|Gif (*.gif)|*.gif|PNG(*.png)|*.png|TIFF(*.tif,*.tiff)|*.tif|All files (*.*)|*.*"; if (sfd.ShowDialog() == true) { - using (Stream fs = sfd.OpenFile()) { - SampleChart.Save(fs, new PngBitmapEncoder()); - } - } } @@ -89,13 +85,11 @@ static IntPtr ApplicationMessageFilter(IntPtr hwnd, int message, IntPtr wParam, return IntPtr.Zero; } - HwndSourceParameters sourceParameters = new HwndSourceParameters(); sourceParameters.HwndSourceHook = ApplicationMessageFilter; HwndSource source = new HwndSource(sourceParameters); - source.RootVisual = chart; //Save chart diff --git a/wpf/Charts/Interactive-Features/Crosshair.md b/wpf/Charts/Interactive-Features/Crosshair.md index b9dd75f0d..1711c3b10 100644 --- a/wpf/Charts/Interactive-Features/Crosshair.md +++ b/wpf/Charts/Interactive-Features/Crosshair.md @@ -20,9 +20,7 @@ You can create an instance [`ChartCrossHairBehavior`](https://help.syncfusion.co {% highlight xaml %} - - - + {% endhighlight %} @@ -44,15 +42,11 @@ To view the axis labels then set the [`ShowTrackBallInfo`](https://help.syncfusi {% highlight xml %} - - - + - - - + {% endhighlight %} @@ -65,16 +59,12 @@ chart.Behaviors.Add(behavior); chart.PrimaryAxis = new CategoryAxis() { - ShowTrackBallInfo = true - }; chart.SecondaryAxis = new NumericalAxis() { - ShowTrackBallInfo = true - }; {% endhighlight %} @@ -102,27 +92,18 @@ The following code snippet demonstrates the line style for horizontal line in cr {% highlight xaml %} - - - - - + - - - - - - - - - - - + + + + {% endhighlight %} @@ -130,9 +111,7 @@ The following code snippet demonstrates the line style for horizontal line in cr ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior() { - HorizontalLineStyle = chart.Resources["lineStyle"] as Style - }; chart.Behaviors.Add(crosshair); @@ -151,27 +130,18 @@ chart.Behaviors.Add(crosshair); {% highlight xaml %} - - - - - - - + + + - {% endhighlight %} @@ -180,9 +150,7 @@ chart.Behaviors.Add(crosshair); ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior() { - VerticalLineStyle = chart.Resources["lineStyle"] as Style - }; chart.Behaviors.Add(crosshair); @@ -220,11 +188,7 @@ The following image demonstrates the horizontal axis label positioned center to {% highlight xaml %} - - - - - + {% endhighlight %} @@ -233,9 +197,7 @@ The following image demonstrates the horizontal axis label positioned center to ChartCrossHairBehavior behavior = new ChartCrossHairBehavior() { - HorizontalAxisLabelAlignment = ChartAlignment.Far - }; chart.Behaviors.Add(behavior); @@ -254,11 +216,7 @@ chart.Behaviors.Add(behavior); {% highlight xaml %} - - - - - + {% endhighlight %} @@ -267,9 +225,7 @@ chart.Behaviors.Add(behavior); ChartCrossHairBehavior behavior = new ChartCrossHairBehavior() { - HorizontalAxisLabelAlignment = ChartAlignment.Near - }; chart.Behaviors.Add(behavior); @@ -299,11 +255,7 @@ The following image demonstrates the horizontal axis label positioned center to {% highlight xml %} - - - - - + {% endhighlight %} @@ -312,9 +264,7 @@ The following image demonstrates the horizontal axis label positioned center to ChartCrossHairBehavior behavior = new ChartCrossHairBehavior() { - VerticalAxisLabelAlignment = ChartAlignment.Near - }; chart.Behaviors.Add(behavior); @@ -332,11 +282,7 @@ chart.Behaviors.Add(behavior); {% highlight xaml %} - - - - - + {% endhighlight %} @@ -345,9 +291,7 @@ chart.Behaviors.Add(behavior); ChartCrossHairBehavior behavior = new ChartCrossHairBehavior() { - VerticalAxisLabelAlignment = ChartAlignment.Far - }; chart.Behaviors.Add(behavior); @@ -367,63 +311,43 @@ The default appearance of the crosshair axis labels can be customized by using t {% highlight xaml %} - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + - - - + {% endhighlight %} diff --git a/wpf/Charts/Interactive-Features/Resizable-Scrollbar.md b/wpf/Charts/Interactive-Features/Resizable-Scrollbar.md index 7e00bca87..8430c1722 100644 --- a/wpf/Charts/Interactive-Features/Resizable-Scrollbar.md +++ b/wpf/Charts/Interactive-Features/Resizable-Scrollbar.md @@ -20,9 +20,7 @@ The resizable scrollbar is a type of scrollbar that can be resized within the tr {% highlight xaml %} - - - + {% endhighlight %} @@ -31,9 +29,7 @@ The resizable scrollbar is a type of scrollbar that can be resized within the tr chart.PrimaryAxis = new CategoryAxis() { - EnableScrollBar = true - }; {% endhighlight %} @@ -51,9 +47,7 @@ SfChart provides support to suspend the value updates for every thumb values. Th {% highlight xml %} - - - + {% endhighlight %} @@ -62,11 +56,8 @@ SfChart provides support to suspend the value updates for every thumb values. Th chart.PrimaryAxis = new CategoryAxis() { - EnableScrollBar = true, - DeferredScrolling = true, - }; {% endhighlight %} @@ -82,9 +73,7 @@ SfChart allows you to resize the scrollbar using [`EnableScrollBarResizing`](htt {% highlight xaml %} - - - + {% endhighlight %} @@ -93,11 +82,8 @@ SfChart allows you to resize the scrollbar using [`EnableScrollBarResizing`](htt chart.PrimaryAxis = new CategoryAxis() { - EnableScrollBar = true, - EnableScrollBarResizing = false, - }; {% endhighlight %} @@ -116,9 +102,7 @@ Scrollbar provides a touch mode style by enabling [`EnableTouchMode`](https://he {% highlight xaml %} - - - + {% endhighlight %} @@ -127,11 +111,8 @@ Scrollbar provides a touch mode style by enabling [`EnableTouchMode`](https://he chart.PrimaryAxis = new CategoryAxis() { - EnableScrollBar = true, - EnableTouchMode = true - }; {% endhighlight %} @@ -152,9 +133,7 @@ The following code example demonstrates the thumb labels in scrollbar. {% highlight xml %} - - - + {% endhighlight %} @@ -163,13 +142,9 @@ The following code example demonstrates the thumb labels in scrollbar. chart.PrimaryAxis = new CategoryAxis() { - EnableScrollBar = true, - EnableTouchMode = true, - ThumbLabelVisibility = Visibility.Visible - }; {% endhighlight %} @@ -188,37 +163,28 @@ chart.PrimaryAxis = new CategoryAxis() {% highlight xaml %} - - - - - - - - + + - - - - - - + - {% endhighlight %} @@ -227,15 +193,10 @@ chart.PrimaryAxis = new CategoryAxis() chart.PrimaryAxis = new CategoryAxis() { - EnableTouchMode = true, - EnableScrollBar = true, - ThumbLabelVisibility = Visibility.Visible, - ThumbLabelTemplate = chart.Resources["labelTemplate"] as DataTemplate - }; {% endhighlight %} diff --git a/wpf/Charts/Interactive-Features/Selection.md b/wpf/Charts/Interactive-Features/Selection.md index 58c69f6fd..4d697a71d 100644 --- a/wpf/Charts/Interactive-Features/Selection.md +++ b/wpf/Charts/Interactive-Features/Selection.md @@ -20,11 +20,8 @@ You can create an instance [`ChartSelectionBehavior`](https://help.syncfusion.co {% highlight xml %} - - - - - + + {% endhighlight %} @@ -49,46 +46,39 @@ Segment Selection allows you to highlight a segment in a chart series. To enable {% highlight xaml %} - - - - - + + + + - - {% endhighlight %} {% highlight c# %} ChartSelectionBehavior selection = new ChartSelectionBehavior() { - EnableSegmentSelection = true - }; chart.Behaviors.Add(selection); ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - - YBindingPath = "Year2010", - + YBindingPath = "Year2011", Label ="2011", - SegmentSelectionBrush = new SolidColorBrush(Colors.Green), - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; chart.Series.Add(series); @@ -109,19 +99,20 @@ The following code example demonstrates the spline series segment selection by c {% highlight xml %} - - - - - - - + + + + + + @@ -131,41 +122,28 @@ YBindingPath="Year2010"> ChartSelectionBehavior selection = new ChartSelectionBehavior() { - EnableSegmentSelection = true - }; chart.Behaviors.Add(selection); SplineSeries series = new SplineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - SegmentSelectionBrush = new SolidColorBrush(Colors.Red), - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() { - ShowMarker = true, - HighlightOnSelection = true, - Symbol = ChartSymbol.Ellipse - }; series.AdornmentsInfo = adornmentInfo; - chart.Series.Add(series); {% endhighlight %} @@ -184,27 +162,27 @@ The following code example demonstrates highlighting a series. {% highlight xml %} - - - - - - - - + - + -YBindingPath="Year2011"/> + + + {% endhighlight %} @@ -212,51 +190,33 @@ YBindingPath="Year2011"/> ChartSelectionBehavior selection = new ChartSelectionBehavior() { - EnableSegmentSelection = true, - EnableSeriesSelection = true - }; chart.Behaviors.Add(selection); ScatterSeries series1 = new ScatterSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - Label = "2010", - SegmentSelectionBrush = new SolidColorBrush(Colors.Green), - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; ScatterSeries series2 = new ScatterSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - Label = "2011", - SegmentSelectionBrush = new SolidColorBrush(Colors.Green), - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -281,23 +241,23 @@ The following code example demonstrates the segment selection with adornments {% highlight xaml %} - - - - - - - - - + + + + + + + {% endhighlight %} @@ -305,41 +265,27 @@ ConnectorHeight="30" ShowLabel="True" HighlightOnSelection="True"> ChartSelectionBehavior selection = new ChartSelectionBehavior() { - EnableSegmentSelection = true - }; chart.Behaviors.Add(selection); ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - SegmentSelectionBrush = new SolidColorBrush(Colors.Green), - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() { - ShowLabel = true, - ShowConnectorLine = true, - + ConnectorHeight = 30, HighlightOnSelection = true, - - UseSeriesPalette = true, - - ConnectorHeight = 30 - + UseSeriesPalette = true }; series.AdornmentsInfo = adornmentInfo; @@ -361,53 +307,39 @@ The following code example demonstrates the series selection with adornments. {% highlight xml %} - - - + - - - - - - - - - - + + + + + + - - - - - - - - - - + + + + + + {% endhighlight %} @@ -416,69 +348,47 @@ HighlightOnSelection="True"> ChartSelectionBehavior selection = new ChartSelectionBehavior() { - EnableSegmentSelection = false, - EnableSeriesSelection = true - }; chart.Behaviors.Add(selection); SplineSeries series1 = new SplineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - SeriesSelectionBrush = new SolidColorBrush(Colors.Green) - }; ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() { - ShowMarker = true, - Symbol = ChartSymbol.Ellipse - }; series1.AdornmentsInfo = adornmentInfo; SplineSeries series2 = new SplineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - SeriesSelectionBrush = new SolidColorBrush(Colors.Green), - - Interior = new SolidColorBrush(Color.FromRgb(0x4A,0x4A,0x4A)) - + Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) }; ChartAdornmentInfo adornmentInfo1 = new ChartAdornmentInfo() { - ShowMarker = true, - Symbol = ChartSymbol.Ellipse, - HighlightOnSelection = true - }; series2.AdornmentsInfo = adornmentInfo1; chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -511,11 +421,8 @@ The following code snippet demonstrates the selection mode using [`MouseMove`](h ChartSelectionBehavior selection = new ChartSelectionBehavior() { - SelectionMode = Syncfusion.UI.Xaml.Charts.SelectionMode.MouseMove, - EnableSeriesSelection = true - }; chart.Behaviors.Add(selection); @@ -535,11 +442,7 @@ The following code snippet demonstrates multiple segment selection. {% highlight xml %} - - - - - + {% endhighlight %} @@ -548,11 +451,8 @@ The following code snippet demonstrates multiple segment selection. ChartSelectionBehavior selection = new ChartSelectionBehavior() { - SelectionStyle = SelectionStyle.Multiple, - EnableSegmentSelection = true - }; chart.Behaviors.Add(selection); @@ -575,11 +475,7 @@ The following code snippet demonstrates hand cursor in segment selection. {% highlight xml %} - - - - - + {% endhighlight %} @@ -588,11 +484,8 @@ The following code snippet demonstrates hand cursor in segment selection. ChartSelectionBehavior selection = new ChartSelectionBehavior() { - SelectionCursor = Cursors.Hand, - EnableSegmentSelection = true - }; chart.Behaviors.Add(selection); diff --git a/wpf/Charts/Interactive-Features/Tooltip.md b/wpf/Charts/Interactive-Features/Tooltip.md index 2b9c8d81a..000ca93b6 100644 --- a/wpf/Charts/Interactive-Features/Tooltip.md +++ b/wpf/Charts/Interactive-Features/Tooltip.md @@ -22,16 +22,17 @@ The tooltip will be visible if you enable [`ShowTooltip`](https://help.syncfusio {% highlight xaml %} - - - + + + {% endhighlight %} @@ -39,32 +40,21 @@ XBindingPath="Demand" YBindingPath="Year2011"/> ColumnSeries series1 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true - }; ColumnSeries series2 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - ShowTooltip = true - }; chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -95,9 +85,7 @@ The following properties are used to customize and configure tooltip which is av {% highlight xml %} - - - + {% endhighlight %} @@ -107,7 +95,6 @@ The following properties are used to customize and configure tooltip which is av SfChart chart = new SfChart(); ChartTooltipBehavior behavior = new ChartTooltipBehavior(); - chart.Behaviors.Add(behavior); {% endhighlight %} @@ -127,9 +114,7 @@ The following code example explains positioning the tooltip at `Pointer` positio {% highlight xml %} - - - + {% endhighlight %} @@ -140,6 +125,7 @@ SfChart chart = new SfChart(); ... ChartTooltipBehavior chartTooltipBehavior = new ChartTooltipBehavior(); chartTooltipBehavior.Position = TooltipPosition.Pointer; + chart.Behaviors.Add(chartTooltipBehavior); {% endhighlight %} @@ -160,13 +146,13 @@ The following code example explains applying the style for tooltip. ... - + {% endhighlight %} @@ -174,12 +160,16 @@ The following code example explains applying the style for tooltip. {% highlight c# %} SfChart chart = new SfChart(); + Style style = new Style(typeof(Path)); style.Setters.Add(new Setter(Path.StrokeProperty, new SolidColorBrush(Colors.Black))); style.Setters.Add(new Setter(Path.FillProperty, new SolidColorBrush(Colors.Gray))); + ... + ChartTooltipBehavior tooltipBehavior = new ChartTooltipBehavior(); tooltipBehavior.Style = style; + chart.Behaviors.Add(tooltipBehavior); ... @@ -201,13 +191,13 @@ The following code example explains applying the style for a tooltip label. ... - + {% endhighlight %} @@ -215,12 +205,14 @@ The following code example explains applying the style for a tooltip label. {% highlight c# %} SfChart chart = new SfChart(); + Style labelStyle = new Style(typeof(TextBlock)); labelStyle.Setters.Add(new Setter(TextBlock.FontSizeProperty, 14d)); labelStyle.Setters.Add(new Setter(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Red))); ... ChartTooltipBehavior tooltipBehavior = new ChartTooltipBehavior(); tooltipBehavior.LabelStyle = labelStyle; + chart.Behaviors.Add(tooltipBehavior); ... @@ -244,17 +236,19 @@ The following code example explains the positioning of tooltip to the left of th {% highlight xaml %} - -XBindingPath="Demand" YBindingPath="Year2010" /> - - + {% endhighlight %} @@ -262,36 +256,25 @@ XBindingPath="Demand" YBindingPath="Year2011"/> ColumnSeries series1 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true - }; ChartTooltip.SetHorizontalAlignment(series1, HorizontalAlignment.Left); ColumnSeries series2 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - ShowTooltip = true - }; ChartTooltip.SetHorizontalAlignment(series2, HorizontalAlignment.Left); chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -310,17 +293,19 @@ The following code example explains the positioning of tooltip to the bottom of {% highlight xaml %} - -XBindingPath="Demand" YBindingPath="Year2010" /> - - + {% endhighlight %} @@ -328,36 +313,25 @@ ShowTooltip="True" XBindingPath="Demand" YBindingPath="Year2011"/> ColumnSeries series1 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true - }; ChartTooltip.SetVerticalAlignment(series1, VerticalAlignment.Bottom); ColumnSeries series2 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - ShowTooltip = true - }; ChartTooltip.SetVerticalAlignment(series2, VerticalAlignment.Bottom); chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -374,21 +348,23 @@ You can also set the distance for the margin to be positioned from the cursor us {% highlight xaml %} - - - + + + {% endhighlight %} @@ -396,44 +372,29 @@ ShowTooltip="True" XBindingPath="Demand" YBindingPath="Year2011"/> ColumnSeries series1 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; ChartTooltip.SetTooltipMargin(series1, new Thickness(25)); ColumnSeries series2 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)), - Label = "2011" - }; ChartTooltip.SetTooltipMargin(series2, new Thickness(25)); chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -452,23 +413,21 @@ The tooltip can be positioned at a particular distance from the cursor horizonta {% highlight xaml %} - - - + + + {% endhighlight %} @@ -476,48 +435,31 @@ XBindingPath="Demand" YBindingPath="Year2011"/> ColumnSeries series1 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; ChartTooltip.SetHorizontalOffset(series1, 40); - ChartTooltip.SetVerticalOffset(series1, 40); ColumnSeries series2 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)), - Label = "2011" - }; ChartTooltip.SetHorizontalOffset(series2, 40); - ChartTooltip.SetVerticalOffset(series2, 40); chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -536,14 +478,13 @@ The following code example demonstrates the duration of the tooltip set as 5 sec {% highlight xml %} - - + {% endhighlight %} @@ -552,19 +493,12 @@ XBindingPath="Demand" YBindingPath="Year2010"> ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; ChartTooltip.SetShowDuration(series, 5000); @@ -587,13 +521,14 @@ The following code example demonstrates the tooltip will be delayed for 1 second {% highlight xml %} - + {% endhighlight %} @@ -601,19 +536,12 @@ XBindingPath="Demand" YBindingPath="Year2010" /> ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; ChartTooltip.SetInitialShowDelay(series, 1000); @@ -632,15 +560,14 @@ You can also provide animation effects for tooltip by setting the [`EnableAnimat {% highlight xml %} - - - + {% endhighlight %} @@ -648,19 +575,12 @@ XBindingPath="Demand" YBindingPath="Year2010"> ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; ChartTooltip.SetEnableAnimation(series, true); @@ -681,45 +601,91 @@ The [`TooltipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Ch + ... - + + - - - + + + + - + + - - - + + + + + ... + - + ... @@ -729,52 +695,52 @@ The [`TooltipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Ch ... - DataTemplate tooltip = new DataTemplate(); +DataTemplate tooltip = new DataTemplate(); - FrameworkElementFactory stackpanel = new FrameworkElementFactory(typeof(StackPanel)); - stackpanel.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal); +FrameworkElementFactory stackpanel = new FrameworkElementFactory(typeof(StackPanel)); +stackpanel.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal); - FrameworkElementFactory textblock = new FrameworkElementFactory(typeof(TextBlock)); - textblock.SetBinding(TextBlock.TextProperty, new Binding("Item.Demand")); - textblock.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); - textblock.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center); - textblock.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center); - textblock.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black)); +FrameworkElementFactory textblock = new FrameworkElementFactory(typeof(TextBlock)); +textblock.SetBinding(TextBlock.TextProperty, new Binding("Item.Demand")); +textblock.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); +textblock.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center); +textblock.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center); +textblock.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black)); - stackpanel.AppendChild(textblock); +stackpanel.AppendChild(textblock); - FrameworkElementFactory textblock1 = new FrameworkElementFactory(typeof(TextBlock)); - textblock1.SetValue(TextBlock.TextProperty, " : "); - textblock1.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); - textblock1.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center); - textblock1.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center); - textblock1.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black)); +FrameworkElementFactory textblock1 = new FrameworkElementFactory(typeof(TextBlock)); +textblock1.SetValue(TextBlock.TextProperty, " : "); +textblock1.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); +textblock1.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center); +textblock1.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center); +textblock1.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black)); - stackpanel.AppendChild(textblock1); +stackpanel.AppendChild(textblock1); - FrameworkElementFactory textblock2 = new FrameworkElementFactory(typeof(TextBlock)); - textblock2.SetBinding(TextBlock.TextProperty, new Binding("Item.Year2010")); - textblock2.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); - textblock2.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center); - textblock2.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center); - textblock2.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black)); +FrameworkElementFactory textblock2 = new FrameworkElementFactory(typeof(TextBlock)); +textblock2.SetBinding(TextBlock.TextProperty, new Binding("Item.Year2010")); +textblock2.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); +textblock2.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center); +textblock2.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center); +textblock2.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black)); - stackpanel.AppendChild(textblock2); - tooltip.VisualTree = stackpanel; +stackpanel.AppendChild(textblock2); +tooltip.VisualTree = stackpanel; - ColumnSeries series1 = new ColumnSeries() - { +ColumnSeries series1 = new ColumnSeries() +{ - ItemsSource = Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - Label = "2010", - ShowTooltip = true, - TooltipTemplate = tooltip + ItemsSource = new ViewModel().Demands, + XBindingPath = "Demand", + YBindingPath = "Year2010", + Label = "2010", + ShowTooltip = true, + TooltipTemplate = tooltip - }; +}; - chart.Series.Add(series1); +chart.Series.Add(series1); ... {% endhighlight %} diff --git a/wpf/Charts/Interactive-Features/Trackball.md b/wpf/Charts/Interactive-Features/Trackball.md index 19295ce38..fcda2a79e 100644 --- a/wpf/Charts/Interactive-Features/Trackball.md +++ b/wpf/Charts/Interactive-Features/Trackball.md @@ -20,11 +20,8 @@ You can create an instance [`ChartTrackBallBehavior`](https://help.syncfusion.co {% highlight xml %} - - - - - + + {% endhighlight %} @@ -48,9 +45,7 @@ To view the TrackBall in the particular Axis, you have to enable the ShowTrackBa {% highlight xml %} - - - + {% endhighlight %} @@ -63,9 +58,7 @@ chart.Behaviors.Add(behavior); chart.PrimaryAxis = new CategoryAxis() { - ShowTrackBallInfo = true - }; {% endhighlight %} @@ -98,9 +91,7 @@ The following code snippet explains how to collapse the visibility of trackball {% highlight xaml %} - - - + {% endhighlight %} @@ -109,9 +100,7 @@ The following code snippet explains how to collapse the visibility of trackball ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - ShowLine = false - }; chart.Behaviors.Add(behavior); @@ -134,27 +123,17 @@ The following code snippet explains the customization of trackball line. {% highlight xaml %} - - - - - - {% endhighlight %} @@ -163,9 +142,7 @@ The following code snippet explains the customization of trackball line. ChartTrackBallBehavior trackball = new ChartTrackBallBehavior() { - LineStyle = chart.Resources["lineStyle"] as Style - }; chart.Behaviors.Add(trackball); @@ -186,23 +163,15 @@ By default, the trackball symbol is displayed as ellipse to change the default s {% highlight xaml %} - - - - - - {% endhighlight %} @@ -213,9 +182,7 @@ SfChart chart = new SfChart(); ChartTrackBallBehavior trackball = new ChartTrackBallBehavior() { - ChartTrackBallStyle = chart.Resources["trackballStyle"] as Style - }; chart.Behaviors.Add(trackball); @@ -251,13 +218,9 @@ Center-Axis label is aligned to the center of the trackball. By default, the axi {% highlight xaml %} - - - - - - - + + + {% endhighlight %} @@ -265,9 +228,7 @@ Center-Axis label is aligned to the center of the trackball. By default, the axi ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - AxisLabelAlignment = ChartAlignment.Far - }; chart.Behaviors.Add(behavior); @@ -286,11 +247,7 @@ chart.Behaviors.Add(behavior); {% highlight xaml %} - - - - - + {% endhighlight %} @@ -299,9 +256,7 @@ chart.Behaviors.Add(behavior); ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - AxisLabelAlignment = ChartAlignment.Near - }; chart.Behaviors.Add(behavior); @@ -321,36 +276,27 @@ You can change the default appearance of the axis label in trackball using [`Tra {% highlight xaml %} - - + + - - - - - - + + - - - - - + - - - + @@ -363,11 +309,8 @@ SfChart chart = new SfChart(); chart.PrimaryAxis = new NumericalAxis() { - ShowTrackBallInfo = true, - TrackBallLabelTemplate = chart.Resources["labelTemplate"] as DataTemplate - }; {% endhighlight %} @@ -389,7 +332,7 @@ The [`ShowTrackballInfo`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. {% highlight xaml %} - + @@ -399,22 +342,27 @@ The [`ShowTrackballInfo`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. {% highlight c# %} - SplineSeries series1 = new SplineSeries() - { - Interior = new SolidColorBrush(Color.FromArgb(0, 0x4a, 0x4a, 0x4a)) - }; - chart.Series.Add(series1); - SplineSeries series2 = new SplineSeries() - { - Interior = new SolidColorBrush(Color.FromArgb(0, 0x7f, 0x7f, 0x7f)), - ShowTrackballInfo = false - }; - chart.Series.Add(series2); - SplineSeries series3 = new SplineSeries() - { - Interior = new SolidColorBrush(Color.FromArgb(0, 0xbc, 0xbc, 0xbc)) - }; - chart.Series.Add(series3); +SplineSeries series1 = new SplineSeries() +{ + Interior = new SolidColorBrush(Color.FromArgb(0, 0x4a, 0x4a, 0x4a)) +}; + +chart.Series.Add(series1); + +SplineSeries series2 = new SplineSeries() +{ + Interior = new SolidColorBrush(Color.FromArgb(0, 0x7f, 0x7f, 0x7f)), + ShowTrackballInfo = false +}; + +chart.Series.Add(series2); + +SplineSeries series3 = new SplineSeries() +{ + Interior = new SolidColorBrush(Color.FromArgb(0, 0xbc, 0xbc, 0xbc)) +}; + +chart.Series.Add(series3); {% endhighlight %} @@ -435,13 +383,7 @@ The following code snippet explains how to align the series label to the center {% highlight xaml %} - - - - - + {% endhighlight %} @@ -450,11 +392,8 @@ LabelVerticalAlignment="Center"> ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - LabelHorizontalAlignment = ChartAlignment.Center, - LabelVerticalAlignment = ChartAlignment.Center - }; chart.Behaviors.Add(behavior); @@ -477,11 +416,7 @@ When there is a multiple series, by default, the trackball series label will be {% highlight xaml %} - - - - - + {% endhighlight %} @@ -490,9 +425,7 @@ When there is a multiple series, by default, the trackball series label will be ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - LabelDisplayMode = TrackballLabelDisplayMode.FloatAllPoints - }; chart.Behaviors.Add(behavior); @@ -511,11 +444,7 @@ chart.Behaviors.Add(behavior); {% highlight xaml %} - - - - - + {% endhighlight %} @@ -524,9 +453,7 @@ chart.Behaviors.Add(behavior); ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - LabelDisplayMode = TrackballLabelDisplayMode.NearestPoint - }; chart.Behaviors.Add(behavior); @@ -546,11 +473,7 @@ chart.Behaviors.Add(behavior); {% highlight xaml %} - - - - - + {% endhighlight %} @@ -559,9 +482,7 @@ chart.Behaviors.Add(behavior); ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - LabelDisplayMode = TrackballLabelDisplayMode.GroupAllPoints - }; chart.Behaviors.Add(behavior); @@ -587,30 +508,22 @@ In trackball label, the data point value of the technical indicator also can be {% highlight xaml %} - - - - - + + + - - - - - - + + {% endhighlight %} {% highlight c# %} ChartTrackBallBehavior behavior = new ChartTrackBallBehavior(); - chart.Behaviors.Add(behavior); AverageTrueRangeIndicator average = new AverageTrueRangeIndicator(); - average.ShowTrackballInfo = true; chart.TechnicalIndicators.Add(average); @@ -631,43 +544,32 @@ N> By default, [`ShowTrackballInfo`](https://help.syncfusion.com/cr/wpf/Syncfusi {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + - ItemsSource="{Binding Demands}" + + + - XBindingPath="Demand" - - YBindingPath="Year2010" - - TrackBallLabelTemplate="{StaticResource labelTemplate}"/> - + - {% endhighlight %} {% highlight c# %} @@ -680,17 +582,11 @@ chart.Behaviors.Add(trackball); ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - TrackBallLabelTemplate = chart.Resources["labelTemplate"] as DataTemplate, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(series); @@ -711,11 +607,8 @@ Palette or interior color of the Series is applied to the series label by settin {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -724,9 +617,7 @@ Palette or interior color of the Series is applied to the series label by settin ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - - UseSeriesPalette = true - + UseSeriesPalette = true }; chart.Behaviors.Add(behavior); diff --git a/wpf/Charts/Interactive-Features/Visual-Data-Editing.md b/wpf/Charts/Interactive-Features/Visual-Data-Editing.md index 117527df6..8db446926 100644 --- a/wpf/Charts/Interactive-Features/Visual-Data-Editing.md +++ b/wpf/Charts/Interactive-Features/Visual-Data-Editing.md @@ -21,14 +21,13 @@ Segment Dragging defines the dragging a particular point or segment based on the {% highlight xml %} - - + {% endhighlight %} @@ -37,22 +36,15 @@ YBindingPath="Year2010"> LineSeries series = new LineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSegmentDragging = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; -chart.Series.Add(series) +chart.Series.Add(series); {% endhighlight %} @@ -67,14 +59,14 @@ chart.Series.Add(series) {% highlight xml %} - - + {% endhighlight %} @@ -83,24 +75,16 @@ YBindingPath="Year2010"> ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSegmentDragging = true, - EnableDragTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; -chart.Series.Add(series) +chart.Series.Add(series); {% endhighlight %} @@ -116,37 +100,30 @@ This series supports dragging in both the x and y co-ordinates. The dragging co- {% highlight xml %} - - - + + {% endhighlight %} {% highlight c# %} ScatterSeries series = new ScatterSeries() - { - -ItemsSource = new ViewModel().Data, - -XBindingPath = "Index", - -YBindingPath = "Value", - -Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - -EnableSegmentDragging = true, - -DragDirection = DragType.XY - + ItemsSource = new ViewModel().Data, + XBindingPath = "Index", + YBindingPath = "Value", + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), + EnableSegmentDragging = true, + DragDirection = DragType.XY }; -chart.Series.Add(series) +chart.Series.Add(series); {% endhighlight %} @@ -166,11 +143,15 @@ The following code snippet explains the series dragging feature in LineSeries. {% highlight xaml %} - + + {% endhighlight %} @@ -178,21 +159,13 @@ YBindingPath="Year2010"/> LineSeries series = new LineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSeriesDragging = true, - - EnableDragTooltip = true , - + EnableDragTooltip = true, Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; chart.Series.Add(series); @@ -214,14 +187,15 @@ While the series or segment is dragged by default you can view the tooltip showi {% highlight xml %} - {% endhighlight %} @@ -230,23 +204,14 @@ ItemsSource="{Binding Demands}" LineSeries series = new LineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSeriesDragging = true, - - EnableDragTooltip = true , - + EnableDragTooltip = false, Focusable = false, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; chart.Series.Add(series); @@ -268,45 +233,35 @@ chart.Series.Add(series); {% highlight xaml %} - - - - - - - - - + + - - - - + - {% endhighlight %} @@ -315,21 +270,13 @@ chart.Series.Add(series); ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - Focusable = false, - EnableSegmentDragging = true, - DragTooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; chart.Series.Add(series); @@ -361,13 +308,12 @@ The following are the API’s in `ChartDragTooltipStyle`. {% highlight xml %} - - - + {% endhighlight %} @@ -375,19 +321,12 @@ The following are the API’s in `ChartDragTooltipStyle`. {% highlight c# %} series.DragTooltipStyle = new ChartDragTooltipStyle() - { - FontFamily = new FontFamily("Calibri"), - - FontSize = 14, - - FontStyle = FontStyles.Italic, - + FontSize = 14, + FontStyle = FontStyles.Italic, Background = new SolidColorBrush(Colors.DarkGray), - Foreground = new SolidColorBrush(Colors.Black) - }; {% endhighlight %} @@ -404,14 +343,15 @@ To round off the dragged values, you have to set the [`SnapToPoint`](https://hel {% highlight xml %} - {% endhighlight %} @@ -420,23 +360,14 @@ ItemsSource="{Binding Demands}" SplineSeries series = new SplineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSegmentDragging = true, - - UpdateSource = true , - + UpdateSource = true, RoundToDecimal = 2, - SnapToPoint = SnapToPoint.Round, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; chart.Series.Add(series); @@ -453,14 +384,13 @@ When dragging the series or segment at run time, to update the underlying data b {% highlight xml %} - - + {% endhighlight %} @@ -469,19 +399,12 @@ YBindingPath="Year2010"> SplineSeries series = new SplineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSegmentDragging = true, - - UpdateSource = true , - + UpdateSource = true, Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; chart.Series.Add(series); @@ -498,20 +421,13 @@ While you are dragging you can set the KeyModifiers to cancel the drag by settin {% highlight xml %} - - + {% endhighlight %} @@ -520,21 +436,13 @@ YBindingPath="Year2010"> SplineSeries series = new SplineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSegmentDragging = true, - DragCancelKeyModifiers = ModifierKeys.Alt, - UpdateSource = true , - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; chart.Series.Add(series); diff --git a/wpf/Charts/Interactive-Features/zoompan.md b/wpf/Charts/Interactive-Features/zoompan.md index f0331ca68..364185575 100644 --- a/wpf/Charts/Interactive-Features/zoompan.md +++ b/wpf/Charts/Interactive-Features/zoompan.md @@ -21,13 +21,9 @@ You can create an instance ChartZoomPanBehavior and add it to the Behaviors coll {% highlight xml %} - - - - - - - + + + {% endhighlight %} @@ -55,13 +51,10 @@ The following code example demonstrates the zooming the chart axis by setting zo {% highlight xaml %} - - - + {% endhighlight %} @@ -70,13 +63,9 @@ ZoomFactor="0.3" ZoomPosition="0.1" /> chart.PrimaryAxis = new CategoryAxis() { - ShowGridLines = false, - ZoomFactor = 0.1, - ZoomPosition = 0.3 - }; {% endhighlight %} @@ -94,11 +83,7 @@ Zooming can be performed by mouse wheel action by setting [`EnableMouseWheelZoom {% highlight xml %} - - - - - + {% endhighlight %} @@ -107,9 +92,7 @@ Zooming can be performed by mouse wheel action by setting [`EnableMouseWheelZoom ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableMouseWheelZooming = true - }; chart.Behaviors.Add(zooming); @@ -126,13 +109,9 @@ If you want to zoom using fingers by touch, then you have to set [`EnablePinchZo {% highlight xml %} - - - - - - - + + + {% endhighlight %} @@ -140,9 +119,7 @@ If you want to zoom using fingers by touch, then you have to set [`EnablePinchZo ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnablePinchZooming = true - }; chart.Behaviors.Add(zooming); @@ -160,11 +137,7 @@ To enable the zooming relative to cursor position you can set [`ZoomRelativeToCu {% highlight xml %} - - - - - + {% endhighlight %} @@ -173,9 +146,7 @@ To enable the zooming relative to cursor position you can set [`ZoomRelativeToCu ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - ZoomRelativeToCursor = true - }; chart.Behaviors.Add(zooming); @@ -195,11 +166,7 @@ The following code snippet demonstrated selection zooming. {% highlight xml %} - - - - - + {% endhighlight %} @@ -208,9 +175,7 @@ The following code snippet demonstrated selection zooming. ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableSelectionZooming = true - }; chart.Behaviors.Add(zooming); @@ -237,13 +202,12 @@ The following code example demonstrates the customization of selection rectangle {% highlight xml %} - - - - - + + {% endhighlight %} @@ -252,15 +216,10 @@ Fill="LightBlue" Stroke="Blue" StrokeThickness="2" > ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableSelectionZooming = true, - Fill = new SolidColorBrush(Colors.LightBlue), - Stroke = new SolidColorBrush(Colors.Blue), - StrokeThickness = 2 - }; chart.Behaviors.Add(zooming); @@ -283,11 +242,7 @@ Zooming along [`X`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts {% highlight xml %} - - - - - + {% endhighlight %} @@ -319,11 +274,7 @@ Zooming along Y axis {% highlight xml %} - - - - - + {% endhighlight %} @@ -332,11 +283,8 @@ Zooming along Y axis ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableSelectionZooming = true, - ZoomMode = ZoomMode.Y - }; chart.Behaviors.Add(zooming); @@ -356,11 +304,7 @@ You can also limit the zooming by setting [`MaximumZoomLevel`](https://help.sync {% highlight xaml %} - - - - - + {% endhighlight %} @@ -369,11 +313,8 @@ You can also limit the zooming by setting [`MaximumZoomLevel`](https://help.sync ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableSelectionZooming = true, - MaximumZoomLevel = 100 - }; chart.Behaviors.Add(zooming); @@ -391,11 +332,7 @@ Zooming Toolbar encompassed with buttons for performing actions like Zoom In/Out {% highlight xaml %} - - - - - + {% endhighlight %} @@ -404,9 +341,7 @@ Zooming Toolbar encompassed with buttons for performing actions like Zoom In/Out ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableZoomingToolBar = true - }; chart.Behaviors.Add(zooming); @@ -429,11 +364,7 @@ Zooming Toolbar can be positioned using the [`HorizontalPosition`](https://help. {% highlight xml %} - - - - - + {% endhighlight %} @@ -442,13 +373,9 @@ Zooming Toolbar can be positioned using the [`HorizontalPosition`](https://help. ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableZoomingToolBar = true, - HorizontalPosition = HorizontalAlignment.Left, - VerticalPosition = VerticalAlignment.Bottom - }; chart.Behaviors.Add(zooming); @@ -475,15 +402,14 @@ Zooming Toolbar can be customized using the following APIs: {% highlight xml %} - - - - - + + {% endhighlight %} @@ -492,19 +418,12 @@ ToolBarItems="All" ToolBarItemMargin="2"> ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableZoomingToolBar = true, - ToolBarBackground = new SolidColorBrush(Colors.AliceBlue), - ToolBarItemHeight = 20, - ToolBarItemWidth = 20, - ToolBarItemMargin = new Thickness(2), - ToolBarItems = ZoomToolBarItems.All - }; chart.Behaviors.Add(zooming); @@ -527,13 +446,7 @@ Zooming toolbar orientation is horizontal by default.You can change the orientat {% highlight xml %} - - - - - + {% endhighlight %} @@ -542,11 +455,8 @@ ToolBarOrientation="Vertical"> ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableZoomingToolBar = true, - ToolBarOrientation = Orientation.Vertical - }; chart.Behaviors.Add(zooming); @@ -565,12 +475,9 @@ Panning feature allows moving the visible area of the chart when it is zoomed in {% tabs %} {% highlight xml %} - - - - - + + {% endhighlight %} @@ -579,11 +486,8 @@ Panning feature allows moving the visible area of the chart when it is zoomed in ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableMouseWheelZooming = true, - - EnablePanning = true - + EnablePanning = true }; chart.Behaviors.Add(zooming); @@ -606,11 +510,7 @@ SfChart provides support to reset to the default view when you double tap the ch {% highlight xml %} - - - - - + {% endhighlight %} @@ -619,9 +519,7 @@ SfChart provides support to reset to the default view when you double tap the ch ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - - ResetOnDoubleTap = true - + ResetOnDoubleTap = true }; chart.Behaviors.Add(zooming); diff --git a/wpf/Charts/Printing.md b/wpf/Charts/Printing.md index b3a54a764..c3d2bede6 100644 --- a/wpf/Charts/Printing.md +++ b/wpf/Charts/Printing.md @@ -21,51 +21,38 @@ The following code example demonstrates the printing of chart in button click ev {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + @@ -74,11 +61,8 @@ ShowLabel="True"/> {% highlight C# %} private void Button_Click_1(object sender, RoutedEventArgs e) - { - ExportDemoChart.Print(); - } {% endhighlight %} diff --git a/wpf/Charts/Watermark.md b/wpf/Charts/Watermark.md index 7e82ccf2b..5e92238ef 100644 --- a/wpf/Charts/Watermark.md +++ b/wpf/Charts/Watermark.md @@ -24,25 +24,16 @@ The following code example explains how to set your custom text as Watermark. {% highlight xaml %} - - - - - - - - - - - - - + + + + + {% endhighlight %} @@ -51,22 +42,15 @@ Foreground="Black" > chart.Watermark = new Watermark() { - - HorizontalAlignment = HorizontalAlignment.Center, - - VerticalAlignment = VerticalAlignment.Center - + HorizontalAlignment = HorizontalAlignment.Center, + VerticalAlignment = VerticalAlignment.Center }; chart.Watermark.Content = new TextBlock() { - - Text = "Metals", - - FontSize = 70, - - Foreground = new SolidColorBrush(Colors.Black) - + Text = "Metals", + FontSize = 70, + Foreground = new SolidColorBrush(Colors.Black) }; {% endhighlight %} @@ -84,19 +68,16 @@ You can also set images as Watermark as in below code snippet. {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -105,22 +86,16 @@ HorizontalAlignment="Center" > chart.Watermark = new Watermark() { - - HorizontalAlignment = HorizontalAlignment.Center, - - VerticalAlignment = VerticalAlignment.Center - + HorizontalAlignment = HorizontalAlignment.Center, + VerticalAlignment = VerticalAlignment.Center }; chart.Watermark.Content = new Image() { - - Height = 175, - - Width = 175, - - Source = new BitmapImage(new Uri(@"demands.png", UriKind.RelativeOrAbsolute)) - + Height = 175, + Width = 175, + Source = new BitmapImage( + new Uri(@"demands.png", UriKind.RelativeOrAbsolute)) }; {% endhighlight %}