如何使用 Modern UI (Metro) Charts 根据用户选择生成图表？

Question

我在我的项目中使用现代 UI（地铁）图表。您可以在此处找到图书馆 http://modernuicharts.codeplex.com/

我的 GUI 中有一个组合框，它包含图表类型。我需要做的是当用户选择图表类型时，我想生成该图表。我可以通过编辑生成图形的 xaml 代码来手动完成。但是如何根据用户选择来做呢？尽快需要帮助..

Answer 1

这里有一个工作示例：

主窗口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>

主窗口视图模型：

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
        {
            get { 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
        {
            get { 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;
    }

页面测试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 with fixed width and 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>

页面具有相同的视图模型以显示相同的图表：

 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
            {
                get
                {
                    return selectedItem;
                }
                set
                {
                    selectedItem = value;
                }
            }
        }

我在这里所做的是使用框架动态加载包含所需图表的页面。希望对您有所帮助！

如何使用 Modern UI (Metro) Charts 根据用户选择生成图表？

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

c#

wpf

charts

graph