WinRT Xaml ToolKit更改列系列中的列寬

Question

我正在測試WinRT Xaml工具包，並且有這樣的問題。 在“列系列”中，當我使用連續2個月的樣本數據（如第一張圖片）時，列寬會自動很好地計算。 但是，當我使用2個非連續個月的樣本數據（如第二張圖片（2月和9月））時，列寬有點失敗。 在第二張圖片中，除了沒有數據的月份的輸入數據= 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

還有什么其他方法可以使列寬像第一張圖片一樣整齊地跨度。

可以通過重置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 };
}

結果：