Как нарисовать равномерно растянутый диагональный текст с помощью wpf xaml

Question

Я делаю пользовательский WPF UserControl, и мне нужно нарисовать текст переменного размера, который повернут на 45 градусов и равномерно распределен по горизонтали, как на следующем изображении (с красными полосами текста):

Со следующим кодом:

    <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>

Мне удалось сделать что-то вроде этого:

Как я могу сделать это с помощью XAML?В этом проекте я также использую Telerik UI для WPF, и я могу использовать их фреймворк, если он проще.

Answer 1

Вы можете комбинировать -90 ° LayoutTransform для ItemsPanel с 45 ° RenderTransform каждого TextBlock.Для горизонтального расстояния просто установите Высота TextBlocks.

<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>

Результат: