WinRT Xaml ToolKit change Column width in Column Series
I am testing WinRT Xaml toolkit and have a question like this. In Column Series when i am using sample data that for 2 consecutive months like first picture, the column width auto calculate nicely. But when i used sample data for 2 non-consecutive months like second picture (Feb & Sep) the column width kinda fail. In second picture, beside input data = 0 for months that don't have data, is there any other way to make the column width span neatly like the first picture.
Here's my code:
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>
is there any other way to make the column width span neatly like the first picture.
The column width can be changed by reset the ColumnDataPoint style. Update the Border element's width to what you want will influence the column's. Code as follows:
<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>
Although the width can be changed by style, but in my opinion the better way is to set the collection's count to the adapt number. As you known, the width actually can be auto calculated, the reason for the column looks so wide is because it only has two records that average twelve records' place. We may create twelve records but only 2 and 9 have values others can set to 0. Code as follows:
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 };
}
And the result:
