WinRT Xaml ToolKit change Column width in Column Series

Question

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>

I'm sure there's a way. Feel free to check the code and suggest changes. — Filip Skakun, Feb 07 '17 at 18:26
I'm trying to reproduce your issue but I cannot. Could you please upload [mcve]? Or upload your code snippet. — Sunteen Wu, Feb 08 '17 at 05:06
Also, consider checking out https://github.com/telerik/UI-For-UWP — Filip Skakun, Feb 08 '17 at 18:31

score 0 · Accepted Answer · answered Feb 28 '17 at 07:17

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:

WinRT Xaml ToolKit change Column width in Column Series

1 Answers1