Custom MeasurementUnit for Labels?

5 posts, 2 answers
  1. Olivia
    Olivia avatar
    4 posts
    Member since:
    Feb 2015

    Posted 27 Feb 2015 Link to this post

    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!
  2. Olivia
    Olivia avatar
    4 posts
    Member since:
    Feb 2015

    Posted 27 Feb 2015 in reply to Olivia Link to this post

    Oops, in case it isn't clear, I'm talking about the RadDiagramRuler.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Answer
    Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 03 Mar 2015 Link to this post

    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.

     
  5. Olivia
    Olivia avatar
    4 posts
    Member since:
    Feb 2015

    Posted 03 Mar 2015 in reply to Peshito Link to this post

    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?
  6. Answer
    Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 04 Mar 2015 Link to this post

    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.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready