c# - How to generete charts according to the user selection using Modern UI (Metro) Charts? -

i'm using modern ui (metro) charts in projects. can find library here http://modernuicharts.codeplex.com/

i have combobox in gui , contains types of charts. need when user selects chart type, want generate chart. can manually editing xaml code generates graph. how can according user selection? need possible..

here have working exemple :

mainwindow xaml :

<window>     <stackpanel>         <combobox width="100" itemssource="{binding charttypes, mode=twoway}"  selecteditem="{binding simplestringproperty, mode=twoway}" text="select option"></combobox>         <frame navigationuivisibility="hidden" x:name="frametest" source="{binding selectedpagechart, mode=twoway}">         </frame>                 </stackpanel> </window> 

mainwindow viewmodel:

public class mainviewmodel : inotifypropertychanged     {         public observablecollection<string> charttypes { get; set; }          public mainviewmodel()         {             charttypes = new observablecollection<string>();                   charttypes.add("pie");             charttypes.add("doughnut");          }          private string _simplestringproperty;         public string simplestringproperty         {             { return _simplestringproperty; }             set             {                 _simplestringproperty = value;                 if (value.equals("pie"))                 {                     selectedpagechart = new uri("pagetest.xaml", urikind.relative);                 }                 if (value.equals("doughnut"))                 {                     selectedpagechart = new uri("pagetest2.xaml", urikind.relative);                 }                 onpropertychanged("simplestringproperty");              }         }          private uri _selectedpagechart;            public uri selectedpagechart         {             { return _selectedpagechart; }             set             {                 _selectedpagechart = value;                 onpropertychanged("selectedpagechart");             }         }         protected void onpropertychanged(string name)         {             propertychangedeventhandler handler = propertychanged;             if (handler != null)             {                 handler(this, new propertychangedeventargs(name));             }         }          public event propertychangedeventhandler propertychanged;     } 

pagetest xaml :

<page x:class="wpfapplication1.pagetest"       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"       xmlns:metrochart="clr-namespace:de.torstenmandelkow.metrochart;assembly=de.torstenmandelkow.metrochart" mc:ignorable="d"        d:designheight="300" d:designwidth="300"     title="pagetest"> <grid>      <metrochart:piechart     style="{staticresource minimalchartstyle}"     charttitle="minimal pie chart"     selecteditem="{binding path=selecteditem, mode=twoway}" >         <metrochart:piechart.series>             <metrochart:chartseries             seriestitle="errors"             displaymember="category"             valuemember="number"             itemssource="{binding path=errors}" />         </metrochart:piechart.series>     </metrochart:piechart>  </grid> 

pagetest2 xaml:

  <page x:class="wpfapplication1.pagetest2"       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"       xmlns:metrochart="clr-namespace:de.torstenmandelkow.metrochart;assembly=de.torstenmandelkow.metrochart"       mc:ignorable="d"        d:designheight="300" d:designwidth="300"     title="pagetest2">      <grid>         <metrochart:doughnutchart         style="{staticresource minimalchartstyle}"         charttitle="minimal pie chart"         chartsubtitle="chart fixed width , height"         selecteditem="{binding path=selecteditem, mode=twoway}" >             <metrochart:piechart.series>                 <metrochart:chartseries                 seriestitle="errors"                 displaymember="category"                 valuemember="number"                 itemssource="{binding path=errors}" />             </metrochart:piechart.series>         </metrochart:doughnutchart>     </grid> </page> 

pages have same viewmodel in order display same chart:

 public class chartviewmodel         {                 public observablecollection<testclass> errors { get; private set; }                 public chartviewmodel()             {                 errors = new observablecollection<testclass>();                 errors.add(new testclass() { category = "globalization", number= 75 });                 errors.add(new testclass() { category = "features", number = 2 });                 errors.add(new testclass() { category = "contenttypes", number = 12 });                 errors.add(new testclass() { category = "correctness", number = 83 });                 errors.add(new testclass() { category = "best practices", number = 29 });             }              private object selecteditem = null;             public object selecteditem             {                                 {                     return selecteditem;                 }                 set                 {                     selecteditem = value;                 }             }         } 

what i've done here use frame load dinamically pages containing desired charts. hope helps!