Question

我在我的项目中使用了Modern UI（Metro）图表。您可以在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>

页面具有相同的viewmodel以显示相同的图表：

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

我在这里所做的是使用一个框架加载包含所需图表的dinamically页面。希望它有所帮助！

如何使用Modern UI（Metro）图表根据用户选择生成图表？

1 个答案: