RadColumnSparkline item style

5 posts, 0 answers
  1. Tulio
    Tulio avatar
    6 posts
    Member since:
    Jul 2017

    Posted 29 Aug Link to this post

    I am using a RadColumnSparkline inside a RadTimebar but can't style the columns so they look a bit better than out of the box.

    I want the columns to have a margin between each other, rounded tops and a dark border color. 

    I've already tried to overwrite the telerik column style to tackle the rectangle for the column but no column was shown:

      <telerik:RadColumnSparkline.Resources>
    <Style TargetType="telerik:Column" BasedOn="{StaticResource ColumnStyle}">
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="telerik:Column">
    <Rectangle Stroke="Black" Margin="5,0,5,0"  Fill="{TemplateBinding Fill}"/>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    </telerik:RadColumnSparkline.Resources>

     

    I've attached an image  of  how they currently look .

    This is the code for the timebar:

    <telerik:RadTimeBar 
    Grid.Column="1"
    x:Name="TimeBar"
    PeriodStart="{Binding AppearanceSearchOverview.PeriodStart, Converter={StaticResource DateTimeToLocalTimeConverter}}"
    PeriodEnd="{Binding AppearanceSearchOverview.PeriodEnd, Converter={StaticResource DateTimeToLocalTimeConverter}}"
    VisiblePeriodStart="{Binding ElementName=TimeBar, Path=PeriodStart}"
    VisiblePeriodEnd="{Binding ElementName=TimeBar, Path=PeriodEnd}"
    Selection="{Binding Path=TimeRange, Converter={StaticResource TelerikTimeRangeConverter}, Mode=TwoWay}"
    MinSelectionRange="00:01:00"
    MaxSelectionRange="72:00:00"
    MinZoomRange="00:15:00"
    Background="{StaticResource PanelBackgroundBrush}"
    SelectionTitleFormatString="{}{0:HH':'mm':'ss} - {1:HH':'mm':'ss}"
    IsSnapToIntervalEnabled="False">
    <telerik:RadTimeBar.Intervals>
    <telerik:DayInterval />
    <telerik:HourInterval />
    <telerik:MinuteInterval IntervalSpans="5" />
    </telerik:RadTimeBar.Intervals>
    <Grid>
    <telerik:RadColumnSparkline 
    AutoRange="False"
    ItemFill="#3D6F99"
    MinYValue="{Binding AppearanceSearchOverview.MinValue}"
    ItemsSource="{Binding AppearanceSearchOverview.Results}"
    XValuePath="X"
    MinXValue="{Binding ElementName=TimeBar, Path=PeriodStart}"
    MaxXValue="{Binding ElementName=TimeBar, Path=PeriodEnd}"
    YValuePath="Y"/>

    </telerik:RadTimeBar>

  2. Tulio
    Tulio avatar
    6 posts
    Member since:
    Jul 2017

    Posted 29 Aug Link to this post

    Also, this is how it looks zoomed in.

    It's hard to see where a column ends/starts.

  3. Sia
    Admin
    Sia avatar
    685 posts

    Posted 01 Sep Link to this post

    Hello,

    Your approach for styling the RadColumnSparkline is right, you have just forgotten to add StrokeThickness setting to the Rectangle:
    <Style   TargetType="telerik:Column" BasedOn="{StaticResource ColumnStyle}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:Column">
                    <Rectangle Fill="{TemplateBinding Fill}" Stroke="Black" StrokeThickness="1" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    Please find attached a screenshot. However you will still need to restrict the maximum amount of visible columns in a way that they will be readable for your users. You can use the TimeBar MaxZoomRange property to achieve this goal.

    Regards, Sia
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  4. Tulio
    Tulio avatar
    6 posts
    Member since:
    Jul 2017

    Posted 06 Sep Link to this post

    Thanks! That worked, but to my surprise, the columns are drawn on top of each other. So adding the border exposes this to the user (which is not ideal). Any way to address that?
  5. Sia
    Admin
    Sia avatar
    685 posts

    Posted 11 Sep Link to this post

    Hello,

    You are right, when the visible range is bigger some of the sparlkine columns will overlap. To overcome this you will need to restrict the amount of visible columns by using the MaxZoomRange property.

    Regards,
    Sia
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top