c# - 如何使用 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 for WPF，如果它更简单，我可以使用他们的框架。

标签： c#wpfxamltelerikwpf-controls

Answer 1

您可以将 ItemsPanel 的 -90° LayoutTransform 与每个 TextBlock 的 45° RenderTransform 结合起来。对于水平距离，只需设置 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>

结果：