WinRT Xaml ToolKit change列の列幅

Question

WinRT Xamlツールキットをテストしており、このような質問があります。列シリーズでは、最初の画像のように2ヶ月連続のサンプルデータを使用しているときに、列幅が自動的に計算されます。しかし、私は2番目の画像（2月& 9月）のように連続していない2ヶ月のサンプルデータを使用すると、列の幅が少し失われます。 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

はきちんともみのような列幅のスパンを作るために他の方法がありますt写真。

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> 

が、私の意見では、より良い方法は、適応数にコレクションの数を設定することです：コードは次のように。あなたが知っているように、幅は実際には自動的に計算することができます。なぜなら、12レコードの場所を平均するレコードが2つしかないからです。私たちは、12件のレコードを作成することが、唯一の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 }; 
} 

そして結果：