WinRT Xaml 工具包更改列系列中的列宽

Question

我正在测试 WinRT Xaml 工具包并有这样的问题。在 Column Series 中，当我像第一张图片一样使用连续 2 个月的样本数据时，列宽会自动计算得很好。但是当我像第二张图片（2 月和 9 月）那样使用 2 个非连续月份的样本数据时，列宽有点失败。在第二张图片中，对于没有数据的月份，除了输入数据 = 0 之外，是否还有其他方法可以使列宽像第一张图片一样整齐地跨度。

这是我的代码：

class Report
{
    public string months { get; set; }
    public int value{ get; set; }
}

public MainPage()
{
    this.InitializeComponent();
    LoadChartContents();
}

private void LoadChartContents()
{
    List<Report> lstSource = new List<Report>();
    lstSource.Add(new Report() { months = "2", value= 10 });
    lstSource.Add(new Report() { months = "9", value= 15 });

    (LineChart.Series[0] as ColumnSeries).ItemsSource = lstSource;
    (LineChart.Series[0] as ColumnSeries).IndependentAxis = new LinearAxis{Minimum = 1,Maximum = 12,Orientation = AxisOrientation.X,Interval = 1};
}

Xaml

<Chart:Chart x:Name="Chart" HorizontalAlignment="Center" Margin="5" Width="500">
 <Chart:ColumnSeries Title="Chart Name" IndependentValuePath="months" DependentValuePath="value" />
</Chart:Chart>

Answer 1

is there any other way to make the column width span neatly like the first picture.

可以通过重置 ColumnDataPoint 样式来更改列宽。将 Border 元素的宽度更新为您想要的宽度会影响列的宽度。代码如下：

<charting:Chart
    x:Name="Chart"
    Width="500"
    Margin="5"
    HorizontalAlignment="Center">
    <charting:ColumnSeries
        Title="Chart Name"
        DependentValuePath="value"
        IndependentValuePath="months">
        <charting:ColumnSeries.DataPointStyle>
            <Style TargetType="charting:ColumnDataPoint">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="charting:ColumnDataPoint">
                            <Border
                                x:Name="Root"
                                Width="20"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Opacity="0">
                                <Grid Background="{TemplateBinding Background}">
                                    <Rectangle
                                        x:Name="SelectionHighlight"
                                        Width="20"
                                        Fill="Red"
                                        Opacity="0" />
                                    <Rectangle
                                        x:Name="MouseOverHighlight"
                                        Width="20"
                                        Fill="White"
                                        Opacity="0" />
                                </Grid>
                                <ToolTipService.ToolTip>
                                    <ContentControl Content="{TemplateBinding FormattedDependentValue}" />
                                </ToolTipService.ToolTip>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0:0:0.1" />
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Duration="0"
                                                    Storyboard.TargetName="MouseOverHighlight"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="0.6" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0:0:0.1" />
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Unselected" />
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Duration="0"
                                                    Storyboard.TargetName="SelectionHighlight"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="0.6" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="RevealStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0:0:0.001" />
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Shown">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Duration="0"
                                                    Storyboard.TargetName="Root"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="1" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Hidden">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Duration="0"
                                                    Storyboard.TargetName="Root"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="0" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </charting:ColumnSeries.DataPointStyle>
    </charting:ColumnSeries>
</charting:Chart>

虽然可以根据样式改变宽度，但我认为更好的方法是将集合的计数设置为适配数。如您所知，宽度实际上可以自动计算，列看起来如此宽的原因是因为它只有两条记录平均十二条记录的位置。我们可以创建十二条记录，但只有2和9有值，其他可以设置为0。代码如下：

private void LoadChartContents()
{
    List<Report> lstSource = new List<Report>();
    for (int i = 1; i <= 12; i++)
    {
        if (i == 2)
        {
            lstSource.Add(new Report() { months = 2, value = 10 });
        }
        if (i == 9)
        {
            lstSource.Add(new Report() { months = 9, value = 15 });
        }
        else
        {
            lstSource.Add(new Report() { months = i, value = 0 });
        }
    }
    (Chart.Series[0] as ColumnSeries).ItemsSource = lstSource;
    //lstSource.Add(new Report() { months = 2, value = 10 });
    //lstSource.Add(new Report() { months = 9, value = 15 }); 
    //(Chart.Series[0] as ColumnSeries).IndependentAxis = new LinearAxis { Minimum = 1, Maximum = 12, Orientation = AxisOrientation.X, Interval = 1 };
}

结果：

WinRT Xaml 工具包更改列系列中的列宽

WinRT Xaml ToolKit change Column width in Column Series

c#

xaml

winrt-xaml-toolkit

uwp