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

Custom MeasurementUnit for Labels?

4 Answers 156 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Olivia
Top achievements
Rank 1
Olivia asked on 27 Feb 2015, 04:45 PM
Hi,

Wondering if there's a way to specify custom Measurement Unit for my Diagram, for the sake of the labels. I want the labels to show intervals in (x) units, instead of the current MeasurementUnit. Or what is a good way to customize the LabelContainer style?

Thanks!

4 Answers, 1 is accepted

Sort by
0
Olivia
Top achievements
Rank 1
answered on 27 Feb 2015, 04:46 PM
Oops, in case it isn't clear, I'm talking about the RadDiagramRuler.
0
Accepted
Peshito
Telerik team
answered on 03 Mar 2015, 11:27 AM
Hello,

In order to achieve your requirement you can extract and edit the default ControlTemplate of the Label of the RadDiagramRuler control. You can find more information about its configuration and visual representation here.

When you extract the ControlTemplate you can also define a converter. Attached
is a sample project illustrating this approach.

Hope it helps.

Regards,
Peshito
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Olivia
Top achievements
Rank 1
answered on 03 Mar 2015, 03:51 PM
Thanks Peshito this is very helpful! I'm using this for two rulers, one with "Top" placement and the other with "Left" placement. The one on the Left, however, now displays label text that is reflected and not oriented the right way. How could I fix this?
0
Accepted
Peshito
Telerik team
answered on 04 Mar 2015, 02:04 PM
Hi Olivia,

This behavior comes out as a result of retemplating the LabelContainer of the ruler. In order to fix that, however, you should have the style targeting the LabelConitainer to be nested in RadDiagramRuler's Resources. Along with that, set a ScaleTransform to the texblock in the ControlTemplate in order to have the text  flipped.

Please see the code below for instance:
<telerik:RadDiagramRuler Diagram="{Binding ElementName=xDiagram}" Grid.Column="0" Grid.RowSpan="2"
                            Placement="Left">
       <telerik:RadDiagramRuler.Resources>
           <Style TargetType="telerik:LabelContainer">
               <Setter Property="Template">
                   <Setter.Value>
                       <ControlTemplate TargetType="telerik:LabelContainer">
                           <TextBlock Margin="2 0 0 4">
                               <TextBlock.LayoutTransform>
                                   <ScaleTransform   ScaleX="-1" />
                               </TextBlock.LayoutTransform>
                           <Run Text="{Binding Value, Converter={StaticResource MyUnitConverter}}"/>
                           <Run Text="m"/>
                           </TextBlock>
                       </ControlTemplate>
                   </Setter.Value>
               </Setter>
           </Style>
       </telerik:RadDiagramRuler.Resources>
       <telerik:RadDiagramRuler.ScaleDefinitions>
           <telerik:DiagramScaleDefinitionCollection>
               <telerik:DiagramScaleDefinition >
                   <telerik:DiagramScaleItemDefinition Interval="5" Type="XSmallTick" />
                   <telerik:DiagramScaleItemDefinition Interval="10" Type="SmallTick" />
                   <telerik:DiagramScaleItemDefinition Interval="100" Type="MediumTick" />
                   <telerik:DiagramScaleItemDefinition Interval="500" Type="LargeTick" />
                   <telerik:DiagramScaleItemDefinition Interval="500" Type="Label" />
               </telerik:DiagramScaleDefinition>
           </telerik:DiagramScaleDefinitionCollection>
       </telerik:RadDiagramRuler.ScaleDefinitions>
   </telerik:RadDiagramRuler>

Using this approach will flip the labels of your left placed ruler.

Regards,
Peshito
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Diagram
Asked by
Olivia
Top achievements
Rank 1
Answers by
Olivia
Top achievements
Rank 1
Peshito
Telerik team
Share this question
or