如何使用 wpf 绘制等间距的对角线文本 xaml

Question

我正在做一个自定义的 WPF 用户控件，我需要绘制一个可变大小的文本，该文本旋转 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 执行此操作？在这个项目中，我还为 WPF 使用了 Telerik UI，如果它更简单，我可以使用他们的框架。

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>

结果：

如何使用 wpf 绘制等间距的对角线文本 xaml

How to draw evenly spaced diagonal text with wpf xaml

c#

wpf

xaml

telerik

wpf-controls