How to draw evenly spaced diagonal text with wpf xaml

Question

I am doing a custom WPF UserControl and i need to draw a variable size text that is rotated 45 degrees and spaced evenly horizontally, like the next image (being the red bars the text):

With the following code:

    <UserControl.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="CheckTemplate">


                <!-- description -->
                <TextBlock 
                    VerticalAlignment="Bottom" Margin="-10,0,0,0" Text="{Binding Check.Name}" Background="Transparent" x:Name="AAA">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="-45" />
                    </TextBlock.LayoutTransform>
                </TextBlock>



            <DataTemplate.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                    <Setter Property="Margin" Value="0" TargetName="AAA" />
                </Trigger>
            </DataTemplate.Triggers>

        </DataTemplate>

        <ItemsPanelTemplate x:Key="ChecksItemsPanel">
            <StackPanel Orientation="Horizontal" 
                        HorizontalAlignment="Left" 
                        VerticalAlignment="Bottom" 
                        />
        </ItemsPanelTemplate>
    </ResourceDictionary>
</UserControl.Resources>

    <StackPanel x:Name="RootPanel" Margin="5">

    <ItemsControl
        x:Name="WorkflowChecksItemsControl"
        ItemTemplate="{DynamicResource CheckTemplate}"
        ItemsPanel="{DynamicResource ChecksItemsPanel}" 
        ItemsSource="{Binding WorkflowChecks}" />



</StackPanel>

i only managed to do something like this:

How can i do this using XAML? In this project i am also using Telerik UI for WPF, and i can use theirs framework if it is simpler.

Answer 1

You may combine a -90° LayoutTransform of the ItemsPanel with a 45° RenderTransform of each TextBlock. For the horizontal distance, simply set the TextBlocks' Height.

<ItemsControl ItemsSource="{Binding WorkflowChecks}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel>
                <StackPanel.LayoutTransform>
                    <RotateTransform Angle="-90"/>
                </StackPanel.LayoutTransform>
            </StackPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Check.Name}" RenderTransformOrigin="0,1">
                <TextBlock.RenderTransform>
                    <RotateTransform Angle="45"/>
                </TextBlock.RenderTransform>
            </TextBlock>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Result: