mirror of
https://gitee.com/akwkevin/aistudio.-wpf.-diagram
synced 2026-03-07 18:20:51 +08:00
90 lines
5.0 KiB
XML
90 lines
5.0 KiB
XML
<Page x:Class="UWP.CartesianChart.Funnel_Chart.FunnelExample"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:lvc="using:LiveCharts.Uwp"
|
|
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="PointGeometrySize" Value="0"/>
|
|
<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="{Binding V1}"/>
|
|
<lvc:LineSeries Values="{Binding V2}"/>
|
|
|
|
<!--Shadows-->
|
|
<lvc:LineSeries StrokeThickness="0" Values="{Binding V3}" Fill="#222C78" Canvas.ZIndex="-1"/>
|
|
<lvc:LineSeries Values="{Binding V4}" Fill="#222C78" Canvas.ZIndex="-1"/>
|
|
|
|
<lvc:LineSeries Values="{Binding V5}" Fill="#141859" Canvas.ZIndex="-2"/>
|
|
<lvc:LineSeries Values="{Binding V6}" Fill="#141859" Canvas.ZIndex="-2"/>
|
|
</lvc:CartesianChart.Series>
|
|
<lvc:CartesianChart.AxisX>
|
|
<lvc:Axis>
|
|
<lvc:Axis.Sections>
|
|
<lvc:AxisSection Value="1.5" Stroke="#25FFFFFF" StrokeThickness="5" Canvas.ZIndex="1" />
|
|
<lvc:AxisSection Value="3.5" Stroke="#25FFFFFF" StrokeThickness="5" Canvas.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>
|
|
</Page>
|
