ay wpf in net6 第10天 - 练手项目UI案例1 第11-20步

时间：2022年05月23日 | 作者 : aaronyang | 分类 : wpf in net6 | 浏览: 654次 | 评论 0 人

全当练手布局和一些基本思路，实际使用需要配合数据绑定，动态生成的数据

11 信息卡片

                <!--信息卡片-->
                <Grid Grid.Row="1" Margin="50 20 15 40">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    
                </Grid>

新建一个InfoCard用户控件显示信息

新建文件夹UserControls，右键新增InfoCard用户控件

顶部输入 xmlns:fa=" 就已经快捷提示了

====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========

接下来，定义卡片的外观，一般来说写用户控件：

编写布局

编写控件

颜色使用常用颜色红绿黄蓝紫灰等

文字随便写

最后提取动态的值，绑定xaml.cs的依赖属性

<UserControl x:Class="AyUIDemo1.UserControls.InfoCard"
             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:local="clr-namespace:AyUIDemo1.UserControls"
             mc:Ignorable="d" xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp"
             d:DesignHeight="140" d:DesignWidth="316" Width="316" Height="140">
    <Border Margin="0 0 25 0">
        <Border.Background>
            <LinearGradientBrush StartPoint="0 0" EndPoint="1,2">
                <GradientStop Color="red" Offset="0"/>
                <GradientStop Color="Gray" Offset="1"/>
            </LinearGradientBrush>
        </Border.Background>
        <Border.Clip>
            <RectangleGeometry RadiusX="15" RadiusY="15" Rect="0,0,291,140"/>
        </Border.Clip>

        <Grid>
            <Ellipse Width="230" Height="230"  Margin="0 -130 -90 0" HorizontalAlignment="Right">
                <Ellipse.Fill>
                    <LinearGradientBrush>
                        <GradientStop Color="Green" Offset="0"/>
                        <GradientStop Color="Yellow" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>

            <fa:IconImage Icon="HatCowboy" Margin="0 0 25 25" Width="60" Height="60" Foreground="#FFFFFF" HorizontalAlignment="Right" VerticalAlignment="Center"/>

            <StackPanel Margin="35 0 0 20" VerticalAlignment="Bottom">
                <TextBlock Text="AY学习" Foreground="#c9e9e9" FontSize="14"/>
                <TextBlock Text="WPF NET6" Foreground="#FFFFFF" FontSize="28" FontWeight="SemiBold"/>
            </StackPanel>
        </Grid>
    </Border>
</UserControl>

编写后台依赖属性

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace AyUIDemo1.UserControls
{
    /// <summary>
    /// InfoCard.xaml 的交互逻辑
    /// </summary>
    public partial class InfoCard : UserControl
    {
        public InfoCard()
        {
            InitializeComponent();
        }

        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }

        public static readonly DependencyProperty TitleProperty =
            DependencyProperty.Register("Title", typeof(string), typeof(InfoCard));


        public string Number
        {
            get { return (string)GetValue(NumberProperty); }
            set { SetValue(NumberProperty, value); }
        }

        public static readonly DependencyProperty NumberProperty =
            DependencyProperty.Register("Number", typeof(string), typeof(InfoCard));




        public FontAwesome.Sharp.IconChar Icon
        {
            get { return (FontAwesome.Sharp.IconChar)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }


        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register("Icon", typeof(FontAwesome.Sharp.IconChar), typeof(InfoCard));





        public Color Background1
        {
            get { return (Color)GetValue(Background1Property); }
            set { SetValue(Background1Property, value); }
        }

        public static readonly DependencyProperty Background1Property =
            DependencyProperty.Register("Background1", typeof(Color), typeof(InfoCard));



        public Color Background2
        {
            get { return (Color)GetValue(Background2Property); }
            set { SetValue(Background2Property, value); }
        }

        public static readonly DependencyProperty Background2Property =
            DependencyProperty.Register("Background2", typeof(Color), typeof(InfoCard));





        public Color EllipseBackground1
        {
            get { return (Color)GetValue(EllipseBackground1Property); }
            set { SetValue(EllipseBackground1Property, value); }
        }

        public static readonly DependencyProperty EllipseBackground1Property =
            DependencyProperty.Register("EllipseBackground1", typeof(Color), typeof(InfoCard));


        public Color EllipseBackground2
        {
            get { return (Color)GetValue(EllipseBackground2Property); }
            set { SetValue(EllipseBackground2Property, value); }
        }

        public static readonly DependencyProperty EllipseBackground2Property =
            DependencyProperty.Register("EllipseBackground2", typeof(Color), typeof(InfoCard));
    }
}

前台绑定

<UserControl x:Class="AyUIDemo1.UserControls.InfoCard"
             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:local="clr-namespace:AyUIDemo1.UserControls"
             mc:Ignorable="d" xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp"
             d:DesignHeight="140" d:DesignWidth="316" Width="316" Height="140">
    <Border Margin="0 0 25 0">
        <Border.Background>
            <LinearGradientBrush StartPoint="0 0" EndPoint="1,2">
                <GradientStop Color="{Binding Background1,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Offset="0"/>
                <GradientStop Color="{Binding Background2,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Offset="1"/>
            </LinearGradientBrush>
        </Border.Background>
        <Border.Clip>
            <RectangleGeometry RadiusX="15" RadiusY="15" Rect="0,0,291,140"/>
        </Border.Clip>

        <Grid>
            <Ellipse Width="230" Height="230"  Margin="0 -130 -90 0" HorizontalAlignment="Right">
                <Ellipse.Fill>
                    <LinearGradientBrush>
                        <GradientStop Color="{Binding EllipseBackground1,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Offset="0"/>
                        <GradientStop Color="{Binding EllipseBackground2,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>

            <fa:IconImage Icon="{Binding Icon,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Margin="0 0 25 25" Width="60" Height="60" Foreground="#FFFFFF" HorizontalAlignment="Right" VerticalAlignment="Center"/>

            <StackPanel Margin="35 0 0 20" VerticalAlignment="Bottom">
                <TextBlock Text="{Binding Title,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Foreground="#c9e9e9" FontSize="14"/>
                <TextBlock Text="{Binding Number,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Foreground="#FFFFFF" FontSize="28" FontWeight="SemiBold"/>
            </StackPanel>
        </Grid>
    </Border>
</UserControl>

12 使用信息卡片

     <usercontrols:InfoCard Grid.Column="0" Title="总览" Number="654,948" Icon="Eye" Background1="#827bff" Background2="#d9b5ff"
                                           EllipseBackground1="#b298fd" EllipseBackground2="#e4bbff"/>

复制2个，修改颜色和值

    <!--信息卡片-->
                <Grid Grid.Row="1" Margin="50 20 15 40">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <usercontrols:InfoCard Grid.Column="0" Title="总览" Number="654,948" Icon="Eye" Background1="#827bff" Background2="#d9b5ff"
                                           EllipseBackground1="#b298fd" EllipseBackground2="#e4bbff"/>

                    <usercontrols:InfoCard Grid.Column="1" Title="总订单" Number="192,340" Icon="ShoppingCart" Background1="#fd8a87" Background2="#f3ab92"
                                           EllipseBackground1="#fbd5a8" EllipseBackground2="#fdb89b"/>

                    <usercontrols:InfoCard Grid.Column="2" Title="总收入" Number="￥19,532" Icon="Coins" Background1="#fc84cb" Background2="#fc8fae"
                                           EllipseBackground1="#fc8fae" EllipseBackground2="#ffabe6"/>
                    
                    
                    
                </Grid>

V8MLJ65VK]~06Q3RYK2IT5A.png

13 主内容下半部分 2列

   <!--主内容下半部分-->
                <Grid Grid.Row="2" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="300"/>
                    </Grid.ColumnDefinitions>

                    <!--图表-->
                    <Border CornerRadius="20" Padding="35 25" Background="#243771" Margin="50 0 10 40">
                        
                    </Border>

                    <!--订单部分-->
                    <Border Grid.Column="1" CornerRadius="20" Padding="0 25" Background="#243771" Margin="15 0 47 40">

                    </Border>

                </Grid>

14 订单部分

标题样式

        <Style x:Key="titleText" TargetType="TextBlock">
            <Setter Property="Foreground" Value="#FFFFFF"></Setter>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="FontWeight"  Value="SemiBold"/>
            <Setter Property="Margin" Value="10 0 0 0"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>

        <Style x:Key="titleIcon" TargetType="fa:IconImage">
            <Setter Property="Width" Value="18"></Setter>
            <Setter Property="Height" Value="18"/>
            <Setter Property="Margin" Value="0 3 0 0"/>
            <Setter Property="Foreground" Value="#7b82ea"/>
        </Style>

标题使用样式

  <!--订单部分-->
                    <Border Grid.Column="1" CornerRadius="20" Padding="0 25" Background="#243771" Margin="15 0 47 40">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <StackPanel Orientation="Horizontal" Margin="20 0 0 15">
                                <fa:IconImage Icon="Circle" Style="{StaticResource titleIcon}"/>
                                <TextBlock Text="最近订单" Style="{StaticResource titleText}"/>
                            </StackPanel>
                            
                            <!--订单-->
                            
                        </Grid>
                    </Border>

15 订单列表

添加一个用户控件Order

<UserControl x:Class="AyUIDemo1.UserControls.Order"
             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:local="clr-namespace:AyUIDemo1.UserControls" xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp"
             mc:Ignorable="d" 
             >
    <Border Padding="5" Margin="0 5" HorizontalAlignment="Stretch">
        <Border.Style>
            <Style TargetType="Border">
                <Setter Property="Background" Value="Transparent"></Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#364c8f"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <StackPanel Orientation="Horizontal" Background="Yellow">
        <Grid Width="45" Height="45" Margin="25 0 0 0">
                <Border CornerRadius="10" Background="#152457"/>
                <fa:IconImage Icon="Eye" Foreground="#bcc6e6" Width="25"/>
            </Grid>

            <StackPanel Margin="10 0 0 0" VerticalAlignment="Center">
                <TextBlock Text="hello" FontSize="14" Foreground="#7c8dc3"/>
                <TextBlock Text="AAAYYY" FontSize="11" Foreground="#7c8dc3" Margin="0 3 0 0"/>
            </StackPanel>
        </StackPanel>
    </Border>
</UserControl>

后台添加依赖属性，绑定

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace AyUIDemo1.UserControls
{
    /// <summary>
    /// Order.xaml 的交互逻辑
    /// </summary>
    public partial class Order : UserControl
    {
        public Order()
        {
            InitializeComponent();
        }


        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }

        public static readonly DependencyProperty TitleProperty =
            DependencyProperty.Register("Title", typeof(string), typeof(Order));

        public string Desc
        {
            get { return (string)GetValue(DescProperty); }
            set { SetValue(DescProperty, value); }
        }

        public static readonly DependencyProperty DescProperty =
            DependencyProperty.Register("Desc", typeof(string), typeof(Order));



        public FontAwesome.Sharp.IconChar Icon
        {
            get { return (FontAwesome.Sharp.IconChar)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }


        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register("Icon", typeof(FontAwesome.Sharp.IconChar), typeof(Order));



    }
}

xaml修改

<UserControl x:Class="AyUIDemo1.UserControls.Order"
             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:local="clr-namespace:AyUIDemo1.UserControls" xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp"
             mc:Ignorable="d" 
             >
    <Border Padding="5" Margin="0 5" HorizontalAlignment="Stretch">
        <Border.Style>
            <Style TargetType="Border">
                <Setter Property="Background" Value="Transparent"></Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#364c8f"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <StackPanel Orientation="Horizontal">
        <Grid Width="45" Height="45" Margin="25 0 0 0">
                <Border CornerRadius="10" Background="#152457"/>
                <fa:IconImage Icon="{Binding Icon,RelativeSource={RelativeSource AncestorType={x:Type local:Order},Mode=FindAncestor},Mode=TwoWay}" Foreground="#bcc6e6" Width="25"/>
            </Grid>

            <StackPanel Margin="10 0 0 0" VerticalAlignment="Center">
                <TextBlock Text="{Binding Title,RelativeSource={RelativeSource AncestorType={x:Type local:Order},Mode=FindAncestor},Mode=TwoWay}" FontSize="14" Foreground="#7c8dc3"/>
                <TextBlock Text="{Binding Desc,RelativeSource={RelativeSource AncestorType={x:Type local:Order},Mode=FindAncestor},Mode=TwoWay}" FontSize="11" Foreground="#7c8dc3" Margin="0 3 0 0"/>
            </StackPanel>
        </StackPanel>
    </Border>
</UserControl>

16 回到主页面，添加列表项

F6编译下，方便xaml页面能智能提示

Icons | Font Awesome

   <!--订单-->
                            <StackPanel Orientation="Vertical" Grid.Row="1">
                                <usercontrols:Order Title="T恤 李宁" Desc="杨洋 - 10:12" Icon="Tshirt"/>
                                <usercontrols:Order Title="鞋 鸿星尔克" Desc="十年 - 12:05" Icon="ShoePrints"/>
                                <usercontrols:Order Title="袜 李宁" Desc="张三 - 13:34" Icon="Socks"/>
                                <usercontrols:Order Title="T恤 Pumb" Desc="杨洋 - 14:30" Icon="Tshirt"/>
                                <usercontrols:Order Title="帽子 安踏" Desc="杨洋 - 15:58" Icon="HardHat"/>
                            </StackPanel>

17 添加图表区域，画坐标轴

还是两行，跟右边保持一致

                    <!--图表-->
                    <Border CornerRadius="20" Padding="35 25" Background="#243771" Margin="50 0 10 40">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <StackPanel Orientation="Horizontal" Margin="0 0 0 25">
                                <fa:IconImage Icon="Circle" Style="{StaticResource titleIcon}"/>
                                <TextBlock Text="利润" Style="{StaticResource titleText}"/>
                            </StackPanel>
                            
                            
                            
                        </Grid>
                    </Border>

画两个坐标轴，实际使用这里会用图表控件，下方只是演示常用控件怎么使用

<Border CornerRadius="20" Padding="35 25" Background="#243771" Margin="50 0 10 40">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <StackPanel Orientation="Horizontal" Margin="0 0 0 25">
                                <fa:IconImage Icon="Circle" Style="{StaticResource titleIcon}"/>
                                <TextBlock Text="利润" Style="{StaticResource titleText}"/>
                            </StackPanel>


                            <StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0 0 0 25" Grid.Row="1">
                                <TextBlock Text="60000" Foreground="#717eb2" Margin="0 0 0 25"/>
                                <TextBlock Text="50000" Foreground="#717eb2" Margin="0 0 0 25"/>
                                <TextBlock Text="40000" Foreground="#717eb2" Margin="0 0 0 25"/>
                                <TextBlock Text="30000" Foreground="#717eb2" Margin="0 0 0 25"/>
                                <TextBlock Text="20000" Foreground="#717eb2" Margin="0 0 0 25"/>
                                <TextBlock Text="10000" Foreground="#717eb2" Margin="0 0 0 25"/>
                                <TextBlock Text="0" Foreground="#717eb2" HorizontalAlignment="Right"/>
                            </StackPanel>


                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="50 0 0 0" Grid.Row="1">
                                <TextBlock Text="1" Foreground="#717eb2" />
                                <TextBlock Text="2" Foreground="#717eb2" Margin="41 0 0 0"/>
                                <TextBlock Text="3" Foreground="#717eb2" Margin="41 0 0 0"/>
                                <TextBlock Text="4" Foreground="#717eb2" Margin="41 0 0 0"/>
                                <TextBlock Text="5" Foreground="#717eb2" Margin="41 0 0 0"/>
                                <TextBlock Text="6" Foreground="#717eb2" Margin="41 0 0 0"/>
                                <TextBlock Text="7" Foreground="#717eb2" Margin="41 0 0 0"/>
                                <TextBlock Text="9" Foreground="#717eb2" Margin="41 0 0 0"/>
                                <TextBlock Text="10" Foreground="#717eb2" Margin="41 0 0 0"/>
                                <TextBlock Text="11" Foreground="#717eb2" Margin="41 0 0 0"/>
                                <TextBlock Text="12" Foreground="#717eb2" Margin="41 0 0 0"/>
                            </StackPanel>
                        </Grid>
                    </Border>

18 使用图表

安装 Live Chart WPF

framework项目使用

我是net6项目使用

点击安装

顶部引用 xmlns:wpf="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

使用：

x轴，y轴

  <wpf:CartesianChart.AxisX>
                                    <wpf:Axis MinValue="1" MaxValue="5" Foreground="#717eb2" ShowLabels="False">
                                        <wpf:Axis.Separator>
                                            <wpf:Separator StrokeThickness="0"/>
                                        </wpf:Axis.Separator>
                                    </wpf:Axis>
                                </wpf:CartesianChart.AxisX>
                                <wpf:CartesianChart.AxisY>
                                    <wpf:Axis MinValue="0" MaxValue="60000" Foreground="#717eb2" ShowLabels="False">
                                        <wpf:Axis.Separator>
                                            <wpf:Separator StrokeThickness="0"/>
                                        </wpf:Axis.Separator>
                                    </wpf:Axis>
                                </wpf:CartesianChart.AxisY>

19 我们给图表添加数据

     <!--图表-->
                            <wpf:CartesianChart Grid.Row="1" Margin="45 0 0 25">
                                <wpf:CartesianChart.Background>
                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                        <GradientStop Color="#26376f" Offset="0"/>
                                        <GradientStop Color="#6a6ae4" Offset="1.5"/>
                                    </LinearGradientBrush>
                                </wpf:CartesianChart.Background>
                                <wpf:CartesianChart.DataTooltip>
                                    <wpf:DefaultTooltip Background="#24336a" Foreground="#d5e2ff"/>
                                </wpf:CartesianChart.DataTooltip>
                                <wpf:CartesianChart.AxisX>
                                    <wpf:Axis MinValue="1" MaxValue="5" Foreground="#717eb2" ShowLabels="False">
                                        <wpf:Axis.Separator>
                                            <wpf:Separator StrokeThickness="0"/>
                                        </wpf:Axis.Separator>
                                    </wpf:Axis>
                                </wpf:CartesianChart.AxisX>
                                <wpf:CartesianChart.AxisY>
                                    <wpf:Axis MinValue="0" MaxValue="60000" Foreground="#717eb2" ShowLabels="False">
                                        <wpf:Axis.Separator>
                                            <wpf:Separator StrokeThickness="0"/>
                                        </wpf:Axis.Separator>
                                    </wpf:Axis>
                                </wpf:CartesianChart.AxisY>

                                <wpf:CartesianChart.Series>
                                    <wpf:LineSeries Stroke="#ada4fd" StrokeThickness="2" PointGeometrySize="0" Values="20000,17000,30000,15000,50000,30000,20000">
                                        <wpf:LineSeries.Fill>
                                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                                <GradientStop Color="#b397e2" Offset="0.4"/>
                                                <GradientStop Color="#6a6ae4" Offset="1.2"/>
                                            </LinearGradientBrush>
                                        </wpf:LineSeries.Fill>
                                    </wpf:LineSeries>
                                </wpf:CartesianChart.Series>
                            </wpf:CartesianChart>