Styling Scrollbar

7 posts, 0 answers
  1. Enrico
    Enrico avatar
    14 posts
    Member since:
    Mar 2011

    Posted 31 May 2012 Link to this post

    Hi,
    how can I style the Scrollbar, which appears when I zoom into the chart?
    I wanna change it to be more touch friendly.

    Cheers,
    Enrico
  2. Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 31 May 2012 Link to this post

    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:
    <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




  3. UI for WPF is Visual Studio 2017 Ready
  4. Enrico
    Enrico avatar
    14 posts
    Member since:
    Mar 2011

    Posted 01 Jun 2012 Link to this post

    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
  5. Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 01 Jun 2012 Link to this post

    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.

    <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
  6. Enrico
    Enrico avatar
    14 posts
    Member since:
    Mar 2011

    Posted 01 Jun 2012 Link to this post

    Thank you for your quick answer,
    I will check it out and try to solve my issue on Monday.
    Have a great weekend,
    Enrico
  7. Enrico
    Enrico avatar
    14 posts
    Member since:
    Mar 2011

    Posted 04 Jun 2012 Link to this post

    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
  8. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 07 Jun 2012 Link to this post

    Hi Enrico,

     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,

    Evgenia
    the Telerik team

     

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top
UI for WPF is Visual Studio 2017 Ready