Esempio n. 1
0
        /// <summary>
        /// Initializes a new instance of AxisSection class
        /// </summary>
        public AxisSection()
        {
            _rectangle = new Rectangle();
            _label     = new TextBlock();

            _rectangle.MouseDown += (sender, args) =>
            {
                if (!Draggable)
                {
                    return;
                }
                Dragging     = this;
                args.Handled = true;
                Chart.Ldsp   = null;
            };

            SetCurrentValue(StrokeProperty, new SolidColorBrush(Color.FromRgb(131, 172, 191)));
            SetCurrentValue(FillProperty, new SolidColorBrush(Color.FromRgb(131, 172, 191))
            {
                Opacity = .35
            });
            SetCurrentValue(StrokeThicknessProperty, 0d);
            SetCurrentValue(FromValueProperty, 0d);
            SetCurrentValue(ToValueProperty, 0d);

            BindingOperations.SetBinding(_label, TextBlock.TextProperty,
                                         new Binding {
                Path = new PropertyPath(LabelProperty), Source = this
            });
        }
        /// <summary>
        /// Initializes a new instance of AxisSection class
        /// </summary>
        public AxisSection()
        {
            _rectangle = new Rectangle();

            _rectangle.MouseDown += (sender, args) =>
            {
                if (!Draggable)
                {
                    return;
                }
                Dragging     = this;
                args.Handled = true;
                Chart.Ldsp   = null;
            };

            SetCurrentValue(StrokeProperty, new SolidColorBrush(Color.FromRgb(131, 172, 191)));
            SetCurrentValue(FillProperty, new SolidColorBrush(Color.FromRgb(131, 172, 191))
            {
                Opacity = .35
            });
            SetCurrentValue(StrokeThicknessProperty, 0d);
        }
        public FunnelExample()
        {
            InitializeComponent();

            //Credit https://dribbble.com/shots/2673159-Funnel-UI-concept
            //Icons http://www.flaticon.com/authors/madebyoliver

            BackColor = Color.FromArgb(255, 20, 20, 75);

            cartesianChart1.Series.Add(new LineSeries
            {
                Values = new ChartValues<double> {100, 85, 50, 35, 5, 3},
                Fill = new SolidColorBrush(System.Windows.Media.Color.FromRgb(33, 106, 254)),
                PointGeometry = null,
                AreaLimit = 0,
                StrokeThickness = 0
            });
            cartesianChart1.Series.Add(new LineSeries
            {
                Values = new ChartValues<double> {-100, -85, -50, -35, -5, 3},
                Fill = new SolidColorBrush(System.Windows.Media.Color.FromRgb(33, 106, 254)),
                PointGeometry = null,
                AreaLimit = 0,
                StrokeThickness = 0
            });

            var s2 = new LineSeries
            {
                Values = new ChartValues<double> {110, 94, 60, 40, 10, 10},
                Fill = new SolidColorBrush(System.Windows.Media.Color.FromRgb(34, 44, 120)),
                PointGeometry = null,
                AreaLimit = 0,
                StrokeThickness = 0
            };
            var s3 = new LineSeries
            {
                Values = new ChartValues<double> {-110, -94, -60, -40, -10, -10},
                Fill = new SolidColorBrush(System.Windows.Media.Color.FromRgb(34, 44, 120)),
                PointGeometry = null,
                AreaLimit = 0,
                StrokeThickness = 0
            };
            var s4 = new LineSeries
            {
                Values = new ChartValues<double> {120, 104, 70, 50, 15, 15},
                Fill = new SolidColorBrush(System.Windows.Media.Color.FromRgb(20, 24, 89)),
                PointGeometry = null,
                AreaLimit = 0,
                StrokeThickness = 0
            };
            var s5 = new LineSeries
            {
                Values = new ChartValues<double> {-120, -104, -70, -50, -15, -15},
                Fill = new SolidColorBrush(System.Windows.Media.Color.FromRgb(20, 24, 89)),
                PointGeometry = null,
                AreaLimit = 0,
                StrokeThickness = 0
            };

            Panel.SetZIndex(s2, -1);
            Panel.SetZIndex(s3, -1);
            Panel.SetZIndex(s4, -2);
            Panel.SetZIndex(s5, -2);

            cartesianChart1.Series.Add(s2);
            cartesianChart1.Series.Add(s3);
            cartesianChart1.Series.Add(s4);
            cartesianChart1.Series.Add(s5);

            cartesianChart1.AxisY.Add(new Axis { IsEnabled = false, ShowLabels = false });
            var section1 = new AxisSection
            {
                Value = 1.5,
                Stroke = new SolidColorBrush(System.Windows.Media.Color.FromArgb(38, 255, 255, 255)),
                StrokeThickness = 5
            };
            var section2 = new AxisSection
            {
                Value = 3.5,
                Stroke = new SolidColorBrush(System.Windows.Media.Color.FromArgb(38, 255, 255, 255)),
                StrokeThickness = 5
            };
            Panel.SetZIndex(section1, 1);
            Panel.SetZIndex(section2, 1);
            cartesianChart1.AxisX.Add(new Axis
            {
                IsEnabled = false,
                ShowLabels = false,
                Sections = new SectionsCollection
                {
                    section1,
                    section2
                }
            });

            var userUri = new Uri(@"Cartesian/FunnelChart/Resources/user.png", UriKind.Relative);
            var fingerUri = new Uri("Cartesian/FunnelChart/Resources/fingerprint.png", UriKind.Relative);
            var viewUri = new Uri("Cartesian/FunnelChart/Resources/view.png", UriKind.Relative);

            var ve1 = new VisualElement
            {
                X = 0.75,
                Y = 120,
                VerticalAlignment = VerticalAlignment.Bottom,
                HorizontalAlignment = HorizontalAlignment.Center,
                UIElement = new StackPanel
                {
                    Children =
                    {
                        new Image {Source = new BitmapImage(userUri)},
                        new TextBlock { Text = "LOADED THE AD", FontSize = 16, Foreground = Brushes.White}
                    }
                }
            };
            var ve2 = new VisualElement
            {
                X = 0.75,
                Y = 0,
                VerticalAlignment = VerticalAlignment.Center,
                HorizontalAlignment = HorizontalAlignment.Center,
                UIElement = new TextBlock { Text = "100 %", FontSize = 40, Foreground = Brushes.White}
            };

            var ve3 = new VisualElement
            {
                X = 2.5,
                Y = 120,
                VerticalAlignment = VerticalAlignment.Bottom,
                HorizontalAlignment = HorizontalAlignment.Center,
                UIElement = new StackPanel
                {
                    Children =
                    {
                        new Image {Source = new BitmapImage(viewUri)},
                        new TextBlock { Text = "SAW THE AD", FontSize = 16, Foreground = Brushes.White}
                    }
                }
            };

            var ve4 = new VisualElement
            {
                X = 2.5,
                Y = 0,
                VerticalAlignment = VerticalAlignment.Center,
                HorizontalAlignment = HorizontalAlignment.Center,
                UIElement = new TextBlock { Text = "50 %", FontSize = 40, Foreground = Brushes.White }
            };

            var ve5 = new VisualElement
            {
                X = 4.25,
                Y = 120,
                VerticalAlignment = VerticalAlignment.Bottom,
                HorizontalAlignment = HorizontalAlignment.Center,
                UIElement = new StackPanel
                {
                    Children =
                    {
                        new Image {Source = new BitmapImage(fingerUri)},
                        new TextBlock { Text = "INTERACTED", FontSize = 16, Foreground = Brushes.White}
                    }
                }
            };
            var ve6 = new VisualElement
            {
                X = 4.25,
                Y = 0,
                VerticalAlignment = VerticalAlignment.Center,
                HorizontalAlignment = HorizontalAlignment.Center,
                UIElement = new TextBlock { Text = "100 %", FontSize = 40, Foreground = Brushes.White }
            };

            cartesianChart1.VisualElements.AddRange(new[]
            {
                ve1, ve2, ve3, ve4, ve5, ve6
            });
        }