WPF入门：用 Modern UI + Metro Chart 打造漂亮的图表(1)

1、去CodePlex上下载Modern UI for WPF和Metro Chart for WPF (或者使用VS2012/2013的PM工具，如果可行的话)

2、新建WPF项目

3、然后添加引用

FirstFloor.ModernUI.dll

De.TorstenMandelkow.MetroChart.dll

其中

Microsoft.Windows.Shell.dll

会自动加入，无需手动添加。

具体添的方式：【引用】->【添加】->【浏览】，选择所需dll

4、设置ResourceDictionary

打开App.xaml代码编辑器

加入以下代码，最后可能会是这个样子

<Application x:Class="AliChart.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:chart="clr-namespace:De.TorstenMandelkow.MetroChart;assembly=De.TorstenMandelkow.MetroChart"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <Style x:Key="MyChartStyle" TargetType="chart:ChartBase"/>
            <chart:ResourceDictionaryCollection x:Key="CustomColors">
                <ResourceDictionary>
                    <SolidColorBrush x:Key="Brush1" Color="#AA5B9BD5" />
                </ResourceDictionary>
                <ResourceDictionary>
                    <SolidColorBrush x:Key="Brush2" Color="#AAED7D31" />
                </ResourceDictionary>
                <ResourceDictionary>
                    <SolidColorBrush x:Key="Brush3" Color="#AAA5A5A5" />
                </ResourceDictionary>
                <ResourceDictionary>
                    <SolidColorBrush x:Key="Brush4" Color="#AAFFC000" />
                </ResourceDictionary>
                <ResourceDictionary>
                    <SolidColorBrush x:Key="Brush5" Color="#AAFF9BA5" />
                </ResourceDictionary>
                <ResourceDictionary>
                    <SolidColorBrush x:Key="Brush6" Color="#AAFF7D31" />
                </ResourceDictionary>
                <ResourceDictionary>
                    <SolidColorBrush x:Key="Brush7" Color="#AAFFA5A5" />
                </ResourceDictionary>
                <ResourceDictionary>
                    <SolidColorBrush x:Key="Brush8" Color="#9AFFC0FF" />
                </ResourceDictionary>
            </chart:ResourceDictionaryCollection>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
            </ResourceDictionary.MergedDictionaries>     
        </ResourceDictionary>
    </Application.Resources>
</Application>

5、编辑主窗口的XAML文件MainWIndow.xaml一个示例如下

<mui:ModernWindow x:Class="AliChart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mui="http://firstfloorsoftware.com/ModernUI"
        Title="VonTeco" IsTitleVisible="True"
        LogoData="F1 M 46.7083,47.5C 48.8945,47.5 50.6667,49.2722 50.6667,51.4583C 50.6667,53.6445 48.8945,55.4167 46.7083,55.4167C 44.5222,55.4167 42.75,53.6445 42.75,51.4583C 42.75,49.2722 44.5222,47.5 46.7083,47.5 Z M 30.875,47.5C 33.0611,47.5 34.8333,49.2722 34.8333,51.4583C 34.8333,53.6445 33.0611,55.4167 30.875,55.4167C 28.6889,55.4167 26.9167,53.6445 26.9167,51.4583C 26.9167,49.2722 28.6889,47.5 30.875,47.5 Z M 25.3333,45.9167L 25.3333,41.1667L 22.1667,28.5L 19,28.5L 19,23.75L 26.9167,23.75L 26.9167,28.5L 57,28.5L 52.25,45.9167L 25.3333,45.9167 Z M 30.2417,41.1667L 48.925,41.1667L 50.825,33.25L 28.3417,33.25L 30.2417,41.1667 Z "          
        ContentSource="/Pages/Welcome.xaml">

    <mui:ModernWindow.MenuLinkGroups>
        <mui:LinkGroup DisplayName="MyChart">
            <mui:LinkGroup.Links>
                <mui:Link DisplayName="Home" Source="/Pages/BasicPages.xaml" />
                <mui:Link DisplayName="Settings" Source="/Pages/Settings.xaml" />
                <mui:Link DisplayName="About" Source="/Pages/About.xaml" />
            </mui:LinkGroup.Links>
        </mui:LinkGroup>
    </mui:ModernWindow.MenuLinkGroups>
    
    <mui:ModernWindow.TitleLinks>
        <mui:Link DisplayName="Login" Source="/Pages/UserLogin.xaml" />
    </mui:ModernWindow.TitleLinks>
</mui:ModernWindow>

6、设计Pages(编写*.xaml文件及对应*.xaml.cs代码实现)

7、最终效果