locked
How to add a list of charts to a flipview ?

    Question

  • Hi i came across of a silverlight char control that works in winRT ,I am able to display the chart inside a grid.But what i'm trying to achieve is to display a collection of charts and bind them to a flipview .Here is my code 
    <Grid>
     <Charting:Chart Name="ColumnChart" HorizontalAlignment="Center" Title="My Chart" VerticalAlignment="Center" Width="450" Height="500">
    <Charting:ColumnSeries  Margin="0" IndependentValuePath="Name"  DependentValuePath="Amount" IsSelectionEnabled="False">
    </Charting:ColumnSeries>
    </Charting:Chart>
    </Grd>
       private void LoadChartContents()
            {
                Random rand = new Random();
                List<VotingResults> votingResults = new List<VotingResults>();
                votingResults.Add(new VotingResults() { Name = "Accepted", Amount = rand.Next(0, 20) });
                votingResults.Add(new VotingResults() { Name = "Declined", Amount = rand.Next(0, 20) });
                votingResults.Add(new VotingResults() { Name = "Abstained", Amount = rand.Next(0, 20) });
    
                (ColumnChart.Series[0] as ColumnSeries).ItemsSource = votingResults;
    
            }



    19karabo91

    Friday, March 7, 2014 7:54 AM

Answers

  • Hi,

    You can define an ItemTemplate of a FlipView and create a DataTemplatewhich contain the chart control. And the XAML in the DataTemplate defines the layout and appearance of controls used to display an individual item. The controls in the layout can be bound to properties of a data object, or have content defined inline. See some codes below:

    <FlipView x:Name="flipView1" Width="480" Height="270" 
                  BorderBrush="Black" BorderThickness="1">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Charting:Chart Name="ColumnChart" HorizontalAlignment="Center" Title="My Chart" VerticalAlignment="Center" Width="450" Height="500">
                            <Charting:ColumnSeries  Margin="0" IndependentValuePath="Name"  DependentValuePath="Amount" IsSelectionEnabled="False">
                            </Charting:ColumnSeries>
                        </Charting:Chart>
                        </Grd>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

    And refer to the below link:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh781233.aspx

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by 19karabo91 Monday, March 17, 2014 6:30 AM
    Monday, March 10, 2014 5:55 AM
  • Hi,

    About the first question, that depends on which property of chart control do you want to bind. For example if you want to bind the Backgound(I do not familiar with the chart control)property of chart control,you can define a list object in code behind. Then set the flipView ItemSource to the list object. See some codes below:

    <FlipView x:Name="flipView1" Width="480" Height="270" 
                  BorderBrush="Black" BorderThickness="1" ItemsSource="{Binding}">
                <FlipView.ItemTemplate >
                    <DataTemplate>
                        <Grid >
                            <Charting:Chart Name="ColumnChart" HorizontalAlignment="Center" Title="My Chart" VerticalAlignment="Center" Width="450" Height="500" Background="{Binding color}" >
                                <Charting:ColumnSeries  Margin="0" IndependentValuePath="Name"  DependentValuePath="Amount" IsSelectionEnabled="False">
                                </Charting:ColumnSeries>
                            </Charting:Chart>
                            </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>

    code-behind:

    public sealed partial class BlankPage3 : Page
        {
            public BlankPage3()
            {
                this.InitializeComponent();
                List<Test> test = new List<Test>();
                test.Add(new Test{color="Blue"});
                test.Add(new Test{color="Bule"});
                test.Add(new Test { color = "Bule" });
                flipView1.DataContext = test;
            }
        }
        public class Test
        {
            public string color;
        }

    Please refer to the link:

    http://msdn.microsoft.com/en-us/library/windows/apps/jj150601.aspx

    And see how to bind a control to a single item or bind a list control to a collection of items in a Windows Store app:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh464965.aspx

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, March 11, 2014 3:48 AM

All replies

  • Hi,

    You can define an ItemTemplate of a FlipView and create a DataTemplatewhich contain the chart control. And the XAML in the DataTemplate defines the layout and appearance of controls used to display an individual item. The controls in the layout can be bound to properties of a data object, or have content defined inline. See some codes below:

    <FlipView x:Name="flipView1" Width="480" Height="270" 
                  BorderBrush="Black" BorderThickness="1">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Charting:Chart Name="ColumnChart" HorizontalAlignment="Center" Title="My Chart" VerticalAlignment="Center" Width="450" Height="500">
                            <Charting:ColumnSeries  Margin="0" IndependentValuePath="Name"  DependentValuePath="Amount" IsSelectionEnabled="False">
                            </Charting:ColumnSeries>
                        </Charting:Chart>
                        </Grd>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

    And refer to the below link:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh781233.aspx

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by 19karabo91 Monday, March 17, 2014 6:30 AM
    Monday, March 10, 2014 5:55 AM
  • Makes sense now thank you for your response ,so in the code behind how will I add the collection of charts and bind them to the XAML ?

    And i've added the xaml to my page ,i am getting this error (The name ColumnChart does not exist in the current context) seems like the code behind can't access the DataTemplate .


    19karabo91


    • Edited by 19karabo91 Monday, March 10, 2014 7:17 AM
    Monday, March 10, 2014 6:02 AM
  • Hi,

    About the first question, that depends on which property of chart control do you want to bind. For example if you want to bind the Backgound(I do not familiar with the chart control)property of chart control,you can define a list object in code behind. Then set the flipView ItemSource to the list object. See some codes below:

    <FlipView x:Name="flipView1" Width="480" Height="270" 
                  BorderBrush="Black" BorderThickness="1" ItemsSource="{Binding}">
                <FlipView.ItemTemplate >
                    <DataTemplate>
                        <Grid >
                            <Charting:Chart Name="ColumnChart" HorizontalAlignment="Center" Title="My Chart" VerticalAlignment="Center" Width="450" Height="500" Background="{Binding color}" >
                                <Charting:ColumnSeries  Margin="0" IndependentValuePath="Name"  DependentValuePath="Amount" IsSelectionEnabled="False">
                                </Charting:ColumnSeries>
                            </Charting:Chart>
                            </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>

    code-behind:

    public sealed partial class BlankPage3 : Page
        {
            public BlankPage3()
            {
                this.InitializeComponent();
                List<Test> test = new List<Test>();
                test.Add(new Test{color="Blue"});
                test.Add(new Test{color="Bule"});
                test.Add(new Test { color = "Bule" });
                flipView1.DataContext = test;
            }
        }
        public class Test
        {
            public string color;
        }

    Please refer to the link:

    http://msdn.microsoft.com/en-us/library/windows/apps/jj150601.aspx

    And see how to bind a control to a single item or bind a list control to a collection of items in a Windows Store app:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh464965.aspx

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, March 11, 2014 3:48 AM