Control Template vs Colorizer

4 posts, 0 answers
  1. Wayne Williams
    Wayne Williams avatar
    38 posts
    Member since:
    Jul 2019

    Posted 13 Sep Link to this post

    Hi,

    I have a RadTreeMap that's working perfectly except that I want its labels to be centered vertically and horizontally within each rectangle.

    I'm also using a Colorizer:

    <telerik:TypeDefinition.Mappings>
          <telerik:DesaturationColorizer From="1" To="0.1" StartColor="#d9ac26"/>
    </telerik:TypeDefinition.Mappings>

    ...so, when I attempt to change use a TextBlock with the proper alignment:

    <Style TargetType="telerik:RadTreeMapItem">

         <Setter Property="Template">
               <Setter.Value>
                    <ControlTemplate>
                         <TextBlock Text="{Binding Label}" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                     </ControlTemplate>
                </Setter.Value>
           </Setter>
    </Style>

    ...it successfully centers the labels, but I lose the colorizing effect. How can I make the TextBlock respect the intended colorizing?

    Wayne

  2. Wayne Williams
    Wayne Williams avatar
    38 posts
    Member since:
    Jul 2019

    Posted 13 Sep in reply to Wayne Williams Link to this post

    Also, if I may tack on one other request, I'd like to modify the labels, too, as my dataset returns a bit more information than just the label itself (i.e. prior year value and period-over-period change %). If it's not possible to alter the label content, I'd settle for an informative tooltip instead.

    Wayne

  3. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    980 posts

    Posted 17 Sep Link to this post

    Hi Wayne,

    To add more information apart from the labels, you can use the DefaultItemTemplate property of the control and show any property of the items you choose. Here's an example:

                <telerik:RadTreeMap.DefaultItemTemplate>
                    <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                        <StackPanel>
                            <TextBlock Text="{Binding Label}" TextWrapping="Wrap" Effect="{Binding Path=HeaderEffect, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadTreeMapItem}}}"/>
                            <TextBlock Text="{Binding DataItem.EmployeesCount}" />
                        </StackPanel>
                    </HierarchicalDataTemplate>
                </telerik:RadTreeMap.DefaultItemTemplate>
    As for the loss of the colors of the items, I would recommend using the implicit styles approach for theming the controls in this case and base the style in which you define the control template on the RadTreeMapItemStyle.

    Simply replacing the template with a TextBlock, however, will remove most of the functionality of the control and I would not recommend that. The suggested approach would be to extract the default control template of the control for the given theme and modify it (possibly without removing any elements).

    For your convenience, I've extracted the default control template for the Office_Black theme which you can use as a base, should you find it helpful. Please note that this project requires the NoXaml binaries in order to run.

    Please let me know if you find this information helpful and if I can further assist you with anything else.

    Regards,
    Dilyan Traykov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Wayne Williams
    Wayne Williams avatar
    38 posts
    Member since:
    Jul 2019

    Posted 21 Sep in reply to Dilyan Traykov Link to this post

    Sorry for the delay. This solution did indeed solve my problem, so thanks very much!

    Wayne

Back to Top