如何旋转 WinRTXamlToolkit 柱形图的标签？

Question

我有以下XAML定义：

<Charting:Chart x:Name="ColumnChart"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Width="Auto"
                Height="Auto"
                Padding="50"
                Title="100 random numbers">
    <Charting:ColumnSeries Title="Skills"
                           IndependentValuePath="Name"
                           DependentValuePath="Pts"
                           IsSelectionEnabled="True">

    </Charting:ColumnSeries>
</Charting:Chart>

如何旋转标签（比如 -90 度）以使其更具可读性？

Answer 1

可以旋转标签。它需要几个步骤，不幸的是，由于 WinRT XAML 布局中缺少功能，因此可能需要自定义 class。

找到核心思想here。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Charting:Chart x:Name="ColumnChart"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Padding="50"
            Title="100 random numbers">
        <Charting:ColumnSeries Title="Skills" x:Name="theColumnSeries"
                       IndependentValuePath="Name"
                       DependentValuePath="Pts"
                       IsSelectionEnabled="True">
            <Charting:ColumnSeries.IndependentAxis>
                <Charting:CategoryAxis Orientation="X">
                    <Charting:CategoryAxis.AxisLabelStyle>
                        <Style TargetType="Charting:AxisLabel">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Charting:AxisLabel">
                                        <TextBlock Text="{TemplateBinding FormattedContent}">
                                            <TextBlock.lay
                                            <TextBlock.RenderTransform>
                                                <RotateTransform Angle="-60" />
                                            </TextBlock.RenderTransform>
                                        </TextBlock>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Charting:CategoryAxis.AxisLabelStyle>
                </Charting:CategoryAxis>
            </Charting:ColumnSeries.IndependentAxis>
        </Charting:ColumnSeries>
    </Charting:Chart>
</Grid>

我使用的C#代码：

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        this.Loaded += MainPage_Loaded;
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        var rnd = new Random(444);
        ObservableCollection<Demo> values = new ObservableCollection<Demo>();
        for (int i = 0; i < 15; i++)
        {
            values.Add(new Demo() { Name = (rnd.NextDouble() * 100).ToString(), Pts = i });
        }


        ((ColumnSeries)ColumnChart.Series[0]).ItemsSource = values;
    }
}

class Demo
{
    public string Name { get; set; }
    public double Pts { get; set; }
}

但是，不幸的是，这并不是您想要的。问题是没有像 WPF 中那样存在的 LayoutTransform。如果您运行如上所示的代码，标签会旋转，但它们会与其他内容重叠。

博客的作者写了一个LayoutTransformerclass可能有助于解决问题，虽然它是为 Silverlight 设计的（因此它可能是可移植的并且可以与 WinRT 一起工作XAML).

如何旋转 WinRTXamlToolkit 柱形图的标签？

How to rotate labels of WinRTXamlToolkit column chart?

.net

c#

windows-runtime

windows-phone-8.1

winrt-xaml-toolkit