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

来源：互联网发布：linux dns配置 ubuntu 编辑：程序博客网时间：2024/06/05 18:06

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、最终效果

0 0