WPF程式設計，Live Charts使用說明（25）——漏鬥圖

背景

using System.Windows.Controls;
 
namespace Wpf.CartesianChart.Funnel_Chart
{
    /// <summary>
    /// Interaction logic for FunnelExample.xaml
    /// </summary>
    public partial class FunnelExample : UserControl
    {
        public FunnelExample()
        {
            InitializeComponent();
        }
    }
}
           

前台

<UserControl x:Class="Wpf.CartesianChart.Funnel_Chart.FunnelExample"
             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:Wpf.CartesianChart.Funnel_Chart"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="600" d:DesignWidth="600">
    <Grid Background="#14144B">
        <!-- Credit https://dribbble.com/shots/2673159-Funnel-UI-concept-->
        <!-- Icons http://www.flaticon.com/authors/madebyoliver -->
        <Grid.Resources>
            <Style TargetType="lvc:LineSeries">
                <Setter Property="PointGeometry" Value="{x:Null}"/>
                <Setter Property="AreaLimit" Value="0"/>
                <Setter Property="StrokeThickness" Value="0" />
                <Setter Property="Fill" Value="#216AFE"></Setter>
            </Style>
            <Style TargetType="lvc:Axis">
                <Setter Property="IsEnabled" Value="False"/>
                <Setter Property="ShowLabels" Value="False"></Setter>
            </Style>
        </Grid.Resources>
        <lvc:CartesianChart Hoverable="False" DataTooltip="{x:Null}">
            <lvc:CartesianChart.Series>
                <lvc:LineSeries Values="100, 85, 50, 35, 5, 3"/>
                <lvc:LineSeries Values="-100, -85, -50, -35, -5, 3"/>
                
                <!--Shadows-->
                <lvc:LineSeries Values="110, 94, 60, 40, 10, 10" Fill="#222C78" Panel.ZIndex="-1"/>
                <lvc:LineSeries Values="-110, -94, -60, -40, -10, -10" Fill="#222C78" Panel.ZIndex="-1"/>
 
                <lvc:LineSeries Values="120, 104, 70, 50, 15, 15" Fill="#141859" Panel.ZIndex="-2"/>
                <lvc:LineSeries Values="-120, -104, -70, -50, -15, -15" Fill="#141859" Panel.ZIndex="-2"/>
            </lvc:CartesianChart.Series>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis>
                    <lvc:Axis.Sections>
                        <lvc:AxisSection Value="1.5" Stroke="#25FFFFFF" StrokeThickness="5" Panel.ZIndex="1" />
                        <lvc:AxisSection Value="3.5" Stroke="#25FFFFFF" StrokeThickness="5" Panel.ZIndex="1" />
                    </lvc:Axis.Sections>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.VisualElements>
                <lvc:VisualElement X="0.75" Y="120" VerticalAlignment="Bottom" HorizontalAlignment="Center">
                    <lvc:VisualElement.UIElement>
                        <StackPanel Orientation="Vertical">
                            <Image Source="resources/user.png"></Image>
                            <TextBlock Foreground="White" FontSize="16" FontWeight="Bold">LOADED THE AD</TextBlock>
                        </StackPanel>
                    </lvc:VisualElement.UIElement>
                </lvc:VisualElement>
                <lvc:VisualElement X="0.75" Y="0" VerticalAlignment="Center" HorizontalAlignment="Center">
                    <lvc:VisualElement.UIElement>
                        <TextBlock Foreground="White" FontSize="40">100 %</TextBlock>
                    </lvc:VisualElement.UIElement>
                </lvc:VisualElement>
 
                <lvc:VisualElement X="2.5" Y="120" VerticalAlignment="Bottom" HorizontalAlignment="Center">
                    <lvc:VisualElement.UIElement>
                        <StackPanel Orientation="Vertical">
                            <Image Source="resources/view.png"></Image>
                            <TextBlock Foreground="White" FontSize="16" FontWeight="Bold">SAW THE AD</TextBlock>
                        </StackPanel>
                    </lvc:VisualElement.UIElement>
                </lvc:VisualElement>
                <lvc:VisualElement X="2.5" Y="0" VerticalAlignment="Center" HorizontalAlignment="Center">
                    <lvc:VisualElement.UIElement>
                        <TextBlock Foreground="White" FontSize="40">50 %</TextBlock>
                    </lvc:VisualElement.UIElement>
                </lvc:VisualElement>
 
                <lvc:VisualElement X="4.25" Y="120" VerticalAlignment="Bottom" HorizontalAlignment="Center">
                    <lvc:VisualElement.UIElement>
                        <StackPanel Orientation="Vertical">
                            <Image Source="resources/fingerprint.png"></Image>
                            <TextBlock Foreground="White" FontSize="16" FontWeight="Bold">INTERACTED</TextBlock>
                        </StackPanel>
                    </lvc:VisualElement.UIElement>
                </lvc:VisualElement>
                <lvc:VisualElement X="4.25" Y="0" VerticalAlignment="Center" HorizontalAlignment="Center">
                    <lvc:VisualElement.UIElement>
                        <TextBlock Foreground="White" FontSize="40">5 %</TextBlock>
                    </lvc:VisualElement.UIElement>
                </lvc:VisualElement>
            </lvc:CartesianChart.VisualElements>
        </lvc:CartesianChart>
    </Grid>
</UserControl>