FlipView实现天气AQI 效果

新建一个User Control文件依次在XAML，xaml.cs中加入如下代码

//UserControl.xaml.cs
public class AQINumberClass
    {
        public int AQINumber { get; set; }
    }
    
    public sealed partial class AQIDetail : UserControl
    {
        DispatcherTimer AQINumberFlipViewTimerAnimation;
        List AQINumList = new List();
        List FloatingCircleList = new List();
        int TickTime = 0;
        int aqi = 0;
        Random random = new Random();

        public AQIDetail()
        {
            this.InitializeComponent();
            
            // AQI Number FlipView Animation
            AQINumberFlipViewTimerAnimation = new DispatcherTimer();
            AQINumberFlipViewTimerAnimation.Interval = new TimeSpan(10);//10ms
            AQINumberFlipViewTimerAnimation.Tick += AQINumberFlipViewTimer_Tick;//Refresh
            AQINumberFlipViewTimerAnimation.Start();
            
        }

        public static readonly DependencyProperty WeatherQualityProperty =
            DependencyProperty.Register("WeatherQuality", typeof(string), typeof(AQIDetail), new PropertyMetadata("--"));

        public string WeatherQuality
        {
            get => (string)GetValue(WeatherQualityProperty);
            set => SetValue(WeatherQualityProperty, value);
        }

        public static readonly DependencyProperty AQINumberProperty =
            DependencyProperty.Register("AQINumber", typeof(string), typeof(AQIDetail), new PropertyMetadata("0",OnAQINumberChanged));

        private static void OnAQINumberChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            AQIDetail _AQIDetail = d as AQIDetail;
            _AQIDetail.aqi = Convert.ToInt32(_AQIDetail.AQINumber);
            //AQI Rectangle Animation
            _AQIDetail.AQIRectangleAnimation();
            //AQI List Add
            for (int i = 0; i <= _AQIDetail.aqi; i++)
            {
                _AQIDetail.AQINumList.Add(new AQINumberClass { AQINumber = i });
            }
            //AQINumberFlipView Binding
            _AQIDetail.AQINumberFlipView.ItemsSource = _AQIDetail.AQINumList;
            //AQI Floationg Circle Add
            int AQILevel = _AQIDetail.GetAQILevel(_AQIDetail.aqi);
            int rgb = 0;
            for (int i = 0; i <= AQILevel; i++)
            {
                Ellipse ellipse = new Ellipse();
                ellipse.Height = _AQIDetail.random.Next(1, 20);
                ellipse.Width = ellipse.Height;
                rgb = _AQIDetail.random.Next(100, 255);
                ellipse.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)rgb, (byte)rgb, (byte)rgb));
                ellipse.Margin = new Thickness(_AQIDetail.random.Next(-60, 60), _AQIDetail.random.Next(-60, 60), _AQIDetail.random.Next(-60, 60), _AQIDetail.random.Next(-60, 60));
                _AQIDetail.FloatingCircleIconGrid.Children.Add(ellipse);
                _AQIDetail.FloatingCircleList.Add(ellipse);
            }
            //AQI Floating Circle Animation
            _AQIDetail.AQIFloatingCircleAnimation();
        }

        public string AQINumber
        {
            get => (string)GetValue(AQINumberProperty);
            set => SetValue(AQINumberProperty, value);
        }


        private void AQIRectangleAnimation()
        {
            int aqi = Convert.ToInt32(AQINumber);
            var targetRectangle = new Rectangle();
            if (aqi <= 50)
                targetRectangle = AQIRectangle_1;
            else if (aqi > 50 && aqi <= 100)
                targetRectangle = AQIRectangle_2;
            else if (aqi > 100 && aqi <= 150)
                targetRectangle = AQIRectangle_3;
            else if (aqi > 150 && aqi <= 200)
                targetRectangle = AQIRectangle_4;
            else if (aqi > 200 && aqi <= 300)
                targetRectangle = AQIRectangle_5;
            else if (aqi > 300)
                targetRectangle = AQIRectangle_6;

            var storyBoard = new Storyboard();
            var extendAnimation1 = new DoubleAnimation { Duration = new Duration(TimeSpan.FromSeconds(0.5)), From = 0, To = targetRectangle.Height * 2, EnableDependentAnimation = true };


            Storyboard.SetTarget(extendAnimation1, targetRectangle);
            Storyboard.SetTargetProperty(extendAnimation1, "Height");


            storyBoard.Children.Add(extendAnimation1);

            storyBoard.AutoReverse = false;
            storyBoard.Begin();
        }

        private void AQIFloatingCircleAnimation()
        {
            TranslateTransform translateTransform = new TranslateTransform();
            foreach (var circle in FloatingCircleList)
            {

                translateTransform.X = random.Next(-2, 2);
                translateTransform.Y = random.Next(-2, 2);
                circle.RenderTransform = translateTransform;

                var storyboard = new Storyboard();
                var XAnimation = new DoubleAnimation { Duration = new Duration(TimeSpan.FromSeconds(0.5)) };
                var YAnimation = new DoubleAnimation { Duration = new Duration(TimeSpan.FromSeconds(0.5)) };
                storyboard.Children.Add(XAnimation);
                storyboard.Children.Add(YAnimation);
                Storyboard.SetTarget(XAnimation, translateTransform);
                Storyboard.SetTarget(YAnimation, translateTransform);

                Storyboard.SetTargetProperty(XAnimation, "X");
                Storyboard.SetTargetProperty(YAnimation, "Y");

                XAnimation.From = translateTransform.X;
                YAnimation.From = translateTransform.Y;
                XAnimation.To = translateTransform.X + 2;
                YAnimation.To = translateTransform.Y + 2;
                //Repeat
                storyboard.RepeatBehavior = RepeatBehavior.Forever;
                storyboard.Begin();
                storyboard.AutoReverse = true;
            }
        }

        private int GetAQILevel(int _aqi)
        {
            int _level = 0;
            if (_aqi <= 50)
                _level = 1;
            else if (_aqi > 50 && _aqi <= 100)
                _level = 2;
            else if (_aqi > 100 && _aqi <= 150)
                _level = 3;
            else if (_aqi > 150 && _aqi <= 200)
                _level = 4;
            else if (_aqi > 200 && _aqi <= 300)
                _level = 5;
            else if (_aqi > 300)
                _level = 6;
            return _level;
        }



        private void AQINumberFlipViewTimer_Tick(object sender, object e)
        {
            if (AQINumberFlipView.SelectedIndex < AQINumList.Count - 1)
            {
                AQINumberFlipView.SelectedIndex++;
                TickTime++;
            }
            if (TickTime == AQINumList.Count - 1)
                AQINumberFlipViewTimerAnimation.Stop();
        }



        /// 

        /// Narrow the button in the FlipView
        /// 
        private void AQINumberFlipView_Loaded(object sender, RoutedEventArgs e)
        {
            Grid grid = (Grid)VisualTreeHelper.GetChild(AQINumberFlipView, 0);
            for (int i = grid.Children.Count - 1; i >= 0; i--)
                if (grid.Children[i] is Button)
                    grid.Children.RemoveAt(i);
        }
    }

//MainPage.xaml

效果如图:

AQIFlipView.gif

GitHub:https://github.com/Yanzipe/SimpleWeather/tree/master/SimpleWeather/Control