如何使用Modern UI（Metro）圖表根據用戶選擇生成圖表？

Question

我在我的項目中使用現代UI（都會）圖表。 您可以在這里找到該庫http://modernuicharts.codeplex.com/

我的GUI中有一個組合框，其中包含圖表類型。 我需要做的是當用戶選擇一種圖表類型時，我想生成該圖表。 我可以通過僅編輯生成圖形的xaml代碼來手動完成此操作。 但是如何根據用戶選擇呢？ 盡快需要幫助。

Answer 1

這里有一個工作示例：

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

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

我在這里所做的是使用框架來加載包含所需圖表的動態頁面。 希望能幫助到你！