后台
using System. Windows. Controls;
namespace Wpf. CartesianChart. Funnel_Chart
{
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" >
< 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" />
< 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>