This is a migrated thread and some comments may be shown as answers.

RadColumnSparkline item style

4 Answers 27 Views
TimeBar
This is a migrated thread and some comments may be shown as answers.
Tulio
Top achievements
Rank 1
Tulio asked on 30 Aug 2017, 01:17 AM

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>

4 Answers, 1 is accepted

Sort by
0
Tulio
Top achievements
Rank 1
answered on 30 Aug 2017, 01:30 AM

Also, this is how it looks zoomed in.

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

0
Sia
Telerik team
answered on 01 Sep 2017, 09:33 AM
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.
0
Tulio
Top achievements
Rank 1
answered on 06 Sep 2017, 04:36 PM
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?
0
Sia
Telerik team
answered on 11 Sep 2017, 10:09 AM
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.
Tags
TimeBar
Asked by
Tulio
Top achievements
Rank 1
Answers by
Tulio
Top achievements
Rank 1
Sia
Telerik team
Share this question
or