Comment dessiner un texte diagonal uniformément espacé avec wpf xaml ?

Question

Je suis en train de faire un UserControl WPF personnalisé et j'ai besoin de dessiner un texte de taille variable qui est tourné de 45 degrés et espacé uniformément horizontalement, comme l'image suivante (étant les barres rouges le texte) :

Avec le code suivant :

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

J'ai seulement réussi à faire quelque chose comme ça :

Comment puis-je faire cela en utilisant XAML ? Dans ce projet, j'utilise également Telerik UI pour WPF, et je peux utiliser leur framework si c'est plus simple.

Answer 1

Vous pouvez combiner une LayoutTransform de -90° du ItemsPanel avec une RenderTransform de 45° de chaque TextBlock. Pour la distance horizontale, il suffit de définir la hauteur des blocs de texte.

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

Résultat :