如何旋转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布局中缺少一个特性，可能是一个自定义类。

找到核心理念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。如果您运行上面显示的代码，标签将被旋转，但它们将与其他内容重叠。

该博客的作者编写了一个LayoutTransformer类可以帮助解决问题，虽然它是为Silverlight设计的（因此它可以是可移植的并且可以与WinRT XAML一起使用）。