﻿<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>
