RadColumnSparkline item style

[Tulio]

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>

[Tulio]

Also, this is how it looks zoomed in.

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

[Sia]

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

[Tulio]

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?

[Sia]

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