6 Answers, 1 is accepted
0
Lancelot
Top achievements
Rank 1
answered on 31 May 2012, 10:38 PM
Hi Enrico,
You can set the Pallete for the particular chart to "Metro", which will present you with a touch friendly view for the user. To set it, all you need to do is add the property Palette="Metro" inside your ChartView instance. Here's an example:
To try out the code inside your app, swap out the ItemsSource property of the <chartView:BarSeries> line right beneath the Behaviors tag group.
If you really want to drill into this example and see it in action, you have the source code already. Go to your C:\Program Files (x86)\Telerik\RadControls for WPF Q1 2012 SP1\Demos folder and run ExamplesCS_WPF.sln in Visual Studio. This particular code is in the Examples > ChartView.WPF > SmoothScrolling folder, locate it in your Solution Explorer and open the Example.xaml file in that folder.
I hope this helps you on your journey for a more Touch Friendly UI, let me know if you need anymore help. If possible provide the code you want to apply the style to.
Good Luck!
Lancelot
You can set the Pallete for the particular chart to "Metro", which will present you with a touch friendly view for the user. To set it, all you need to do is add the property Palette="Metro" inside your ChartView instance. Here's an example:
<
chart:RadCartesianChart
x:Name
=
"VolumeChart"
Palette
=
"Metro"
Grid.Row
=
"1"
ClipToBounds
=
"False"
Margin
=
"10,0,0,0"
Zoom
=
"{Binding Zoom, Mode=TwoWay}"
PanOffset
=
"{Binding PanOffset, Mode=TwoWay}"
>
<
chart:RadCartesianChart.Behaviors
>
<
chartView:ChartPanAndZoomBehavior
ZoomMode
=
"None"
/>
</
chart:RadCartesianChart.Behaviors
>
<
chartView:BarSeries
ItemsSource
=
"{Binding ElementName=VolumeDataSource}"
CategoryBinding
=
"Date"
ValueBinding
=
"Volume"
/>
<
chart:RadCartesianChart.HorizontalAxis
>
<
chartView:DateTimeCategoricalAxis
MajorTickInterval
=
"50"
LabelFormat
=
"dd-MMM \'yy"
LabelInterval
=
"2"
PlotMode
=
"OnTicks"
DateTimeComponent
=
"Ticks"
/>
</
chart:RadCartesianChart.HorizontalAxis
>
<
chart:RadCartesianChart.VerticalAxis
>
<
chartView:LinearAxis
LabelFormat
=
"0,,, bln"
Minimum
=
"0"
Maximum
=
"10000000000"
MajorStep
=
"2000000000"
/>
</
chart:RadCartesianChart.VerticalAxis
>
<
chart:RadCartesianChart.Grid
>
<
chartView:CartesianChartGrid
StripLinesVisibility
=
"None"
MajorLinesVisibility
=
"XY"
>
<
chartView:CartesianChartGrid.YStripeBrushes
>
<
SolidColorBrush
Color
=
"#FFD7D7D7"
Opacity
=
"0.3"
/>
<
SolidColorBrush
Color
=
"Transparent"
/>
</
chartView:CartesianChartGrid.YStripeBrushes
>
</
chartView:CartesianChartGrid
>
</
chart:RadCartesianChart.Grid
>
</
chart:RadCartesianChart
>
To try out the code inside your app, swap out the ItemsSource property of the <chartView:BarSeries> line right beneath the Behaviors tag group.
If you really want to drill into this example and see it in action, you have the source code already. Go to your C:\Program Files (x86)\Telerik\RadControls for WPF Q1 2012 SP1\Demos folder and run ExamplesCS_WPF.sln in Visual Studio. This particular code is in the Examples > ChartView.WPF > SmoothScrolling folder, locate it in your Solution Explorer and open the Example.xaml file in that folder.
I hope this helps you on your journey for a more Touch Friendly UI, let me know if you need anymore help. If possible provide the code you want to apply the style to.
Good Luck!
Lancelot
0
Enrico
Top achievements
Rank 1
answered on 01 Jun 2012, 06:57 AM
Hi Lancelot,
thank you for your answer.
Unfortunately this is not really helping me. I've already been using the Metro Palette. It is still not very touch friendly, so it is hard to touch the scrollbar. The touch area around the scrollbar needs to be larger. For that reason I was thinking to swap the default scrollbar with the SurfaceScrollbar.
For that reason I need the controltemplate for the chartview and the location of the scrollbar inside.
Hope you can help me.
Cheers,
Enrico
thank you for your answer.
Unfortunately this is not really helping me. I've already been using the Metro Palette. It is still not very touch friendly, so it is hard to touch the scrollbar. The touch area around the scrollbar needs to be larger. For that reason I was thinking to swap the default scrollbar with the SurfaceScrollbar.
For that reason I need the controltemplate for the chartview and the location of the scrollbar inside.
Hope you can help me.
Cheers,
Enrico
0
Lancelot
Top achievements
Rank 1
answered on 01 Jun 2012, 02:20 PM
Hi Enrico,
Ok lets take it to the next level. I've pasted the code from the ScrollBarStyle.xaml file below. You could create the exact style that would suit you best from it.
This on eis based on the Silverlight version, so you may need to tweak it to work in your project. If this doesnt help, provide me with the entire xaml code for the page/window/usercontrol you are trying to change.
Good Luck!
Lancelot
Ok lets take it to the next level. I've pasted the code from the ScrollBarStyle.xaml file below. You could create the exact style that would suit you best from it.
<
ControlTemplate
x:Key
=
"ScrollBarControlTemplate"
TargetType
=
"ScrollBar"
>
<
Border
BorderThickness
=
"{TemplateBinding BorderThickness}"
BorderBrush
=
"{TemplateBinding BorderBrush}"
Background
=
"{TemplateBinding Background}"
>
<
Grid
x:Name
=
"Root"
>
<
Grid
x:Name
=
"HorizontalRoot"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
</
Grid.ColumnDefinitions
>
<
RepeatButton
x:Name
=
"HorizontalSmallDecrease"
Grid.Column
=
"0"
Interval
=
"50"
Style
=
"{StaticResource RepeatButtonLineLeftStyle}"
/>
<
RepeatButton
x:Name
=
"HorizontalLargeDecrease"
Grid.Column
=
"1"
Interval
=
"50"
Style
=
"{StaticResource RepeatButtonBlankStyle}"
/>
<
Thumb
x:Name
=
"HorizontalThumb"
Grid.Column
=
"2"
MinWidth
=
"16"
Style
=
"{StaticResource ThumbHorizontalStyle}"
/>
<
RepeatButton
x:Name
=
"HorizontalLargeIncrease"
Grid.Column
=
"3"
Interval
=
"50"
Style
=
"{StaticResource RepeatButtonBlankStyle}"
/>
<
RepeatButton
x:Name
=
"HorizontalSmallIncrease"
Grid.Column
=
"4"
Interval
=
"50"
Style
=
"{StaticResource RepeatButtonLineRightStyle}"
/>
</
Grid
>
<
Grid
x:Name
=
"VerticalRoot"
Visibility
=
"Collapsed"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"*"
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
RepeatButton
x:Name
=
"VerticalSmallDecrease"
Grid.Row
=
"0"
Interval
=
"50"
Style
=
"{StaticResource RepeatButtonLineUpStyle}"
/>
<
RepeatButton
x:Name
=
"VerticalLargeDecrease"
Grid.Row
=
"1"
Interval
=
"50"
Style
=
"{StaticResource RepeatButtonBlankStyle}"
/>
<
Thumb
x:Name
=
"VerticalThumb"
Grid.Row
=
"2"
MinHeight
=
"16"
Style
=
"{StaticResource ThumbVerticalStyle}"
/>
<
RepeatButton
x:Name
=
"VerticalLargeIncrease"
Grid.Row
=
"3"
Interval
=
"50"
Style
=
"{StaticResource RepeatButtonBlankStyle}"
/>
<
RepeatButton
x:Name
=
"VerticalSmallIncrease"
Grid.Row
=
"4"
Interval
=
"50"
Style
=
"{StaticResource RepeatButtonLineDownStyle}"
/>
</
Grid
>
</
Grid
>
</
Border
>
</
ControlTemplate
>
<
Style
x:Key
=
"ScrollBarStyle"
TargetType
=
"ScrollBar"
>
<
Setter
Property
=
"MinWidth"
Value
=
"12"
/>
<
Setter
Property
=
"MinHeight"
Value
=
"12"
/>
<
Setter
Property
=
"IsTabStop"
Value
=
"False"
/>
<
Setter
Property
=
"Template"
Value
=
"{StaticResource ScrollBarControlTemplate}"
/>
</
Style
>
<
Style
BasedOn
=
"{StaticResource ScrollBarStyle}"
TargetType
=
"ScrollBar"
/>
This on eis based on the Silverlight version, so you may need to tweak it to work in your project. If this doesnt help, provide me with the entire xaml code for the page/window/usercontrol you are trying to change.
Good Luck!
Lancelot
0
Enrico
Top achievements
Rank 1
answered on 01 Jun 2012, 04:55 PM
Thank you for your quick answer,
I will check it out and try to solve my issue on Monday.
Have a great weekend,
Enrico
I will check it out and try to solve my issue on Monday.
Have a great weekend,
Enrico
0
Enrico
Top achievements
Rank 1
answered on 04 Jun 2012, 06:57 AM
Hi,
what I really need is the entire ControlTemplate for the RadCartesianChart. With it I could remove the Scrollbar and exchange it with a SurfaceScrollbar and additionally do some other modifications.
Cheers,
Enrico
what I really need is the entire ControlTemplate for the RadCartesianChart. With it I could remove the Scrollbar and exchange it with a SurfaceScrollbar and additionally do some other modifications.
Cheers,
Enrico
0
Hi Enrico,
the Telerik team
There is no need to retemplate the whole RadCartesianChart. You can get use of the PanZoomBarStyle property of the axes and provide your own style for the slider there. You may find the default style of the PanZoomBar in Telerik.Windows.Controls.Chart.xaml under your local controls installation folder. For example:
C:\RadControls binaries\Q1 2012\Themes\OfficeBlack\Themes.
Let us know if you need further assistance with this.
Greetings,
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>