add FlipNumber

2018-12-15 23:37:26 +08:00
1 parent ded4994cd5
commit 2a87323e0f
@@ -0,0 +1,278 @@
+using System;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Media;
+using System.Windows.Media.Animation;
+using System.Windows.Media.Media3D;
+using HandyControl.Data;
+
+namespace HandyControl.Controls
+{
+    public class FlipNumber : Viewport3D
+    {
+        private bool _isLoaded;
+
+        private TextBlock _page1TextDown;
+
+        private TextBlock _page2TextUp;
+
+        private TextBlock _page2TextDown;
+
+        private TextBlock _page3TextUp;
+
+        private ContainerUIElement3D _page1;
+
+        private ContainerUIElement3D _page2;
+
+        private ContainerUIElement3D _page3;
+
+        private ContainerUIElement3D _content;
+
+        private readonly AxisAngleRotation3D _pageRotation3D;
+
+        private readonly DoubleAnimation _animation;
+
+        private bool _isAnimating;
+
+        public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register(
+            "CornerRadius", typeof(CornerRadius), typeof(FlipNumber), new PropertyMetadata(new CornerRadius(4)));
+
+        public CornerRadius CornerRadius
+        {
+            get => (CornerRadius)GetValue(CornerRadiusProperty);
+            set => SetValue(CornerRadiusProperty, value);
+        }
+
+        public static readonly DependencyProperty BackgroundProperty = DependencyProperty.Register(
+            "Background", typeof(Brush), typeof(FlipNumber), new PropertyMetadata(default(Brush)));
+
+        public Brush Background
+        {
+            get => (Brush)GetValue(BackgroundProperty);
+            set => SetValue(BackgroundProperty, value);
+        }
+
+        public static readonly DependencyProperty ForegroundProperty = DependencyProperty.Register(
+            "Foreground", typeof(Brush), typeof(FlipNumber), new PropertyMetadata(default(Brush)));
+
+        public Brush Foreground
+        {
+            get => (Brush)GetValue(ForegroundProperty);
+            set => SetValue(ForegroundProperty, value);
+        }
+
+        public static readonly DependencyProperty FontSizeProperty = DependencyProperty.Register(
+            "FontSize", typeof(double), typeof(FlipNumber), new PropertyMetadata(70.0));
+
+        public double FontSize
+        {
+            get => (double)GetValue(FontSizeProperty);
+            set => SetValue(FontSizeProperty, value);
+        }
+
+        public static readonly DependencyProperty NumberProperty = DependencyProperty.Register(
+            "Number", typeof(int), typeof(FlipNumber), new PropertyMetadata(ValueBoxes.Int0Box, OnNumberChanged));
+
+        private static void OnNumberChanged(DependencyObject s, DependencyPropertyChangedEventArgs e) =>
+            ((FlipNumber)s).OnNumberChanged();
+
+        public int Number
+        {
+            get => (int)GetValue(NumberProperty);
+            set => SetValue(NumberProperty, value);
+        }
+
+        public FlipNumber()
+        {
+            var visual3D = new ModelVisual3D
+            {
+                Content = new DirectionalLight()
+            };
+            Children.Add(visual3D);
+
+            _pageRotation3D = new AxisAngleRotation3D
+            {
+                Angle = 0,
+                Axis = new Vector3D(1, 0, 0)
+            };
+
+            _animation = new DoubleAnimation(0, 180, new Duration(TimeSpan.FromSeconds(1)))
+            {
+                FillBehavior = FillBehavior.Stop
+            };
+            _animation.Completed += Animation_Completed;
+
+            Loaded += (s, e) =>
+            {
+                if (_isLoaded) return;
+                _isLoaded = true;
+                InitNumber();
+                var transform3D = new RotateTransform3D(_pageRotation3D);
+                _page2.Transform = transform3D;
+            };
+        }
+
+        private void Animation_Completed(object sender, EventArgs e)
+        {
+            _isAnimating = false;
+            UpdateNumber();
+        }
+
+        private void InitNumber()
+        {
+            _page1 = new ContainerUIElement3D();
+            var num1 = Number > 8 ? 0 : Number + 1;
+            var page1NumDown = CreateNumber(num1, false, out _page1TextDown);
+            _page1.Children.Add(page1NumDown);
+
+            _page2 = new ContainerUIElement3D();
+            var page2NumUp = CreateNumber(num1, true, out _page2TextUp);
+            var page2NumDown = CreateNumber(Number, false, out _page2TextDown);
+            _page2.Children.Add(page2NumUp);
+            _page2.Children.Add(page2NumDown);
+
+            _page3 = new ContainerUIElement3D();
+            var page3NumUp = CreateNumber(Number, true, out _page3TextUp);
+            _page3.Children.Add(page3NumUp);
+            var transform3D = new RotateTransform3D(new AxisAngleRotation3D
+            {
+                Angle = 180,
+                Axis = new Vector3D(1, 0, 0)
+            });
+            _page3.Transform = transform3D;
+
+            _content = new ContainerUIElement3D
+            {
+                Children =
+                {
+                    _page1,
+                    _page2,
+                    _page3
+                }
+            };
+            Children.Add(_content);
+        }
+
+        private void OnNumberChanged()
+        {
+            InitNewNumber();
+
+            if (_isAnimating)
+            {
+                _isAnimating = false;
+                UpdateNumber();
+                return;
+            }
+
+            _isAnimating = true;
+            _pageRotation3D.BeginAnimation(AxisAngleRotation3D.AngleProperty, _animation);
+        }
+
+        private void InitNewNumber()
+        {
+            var num1 = Number.ToString();
+            _page1TextDown.Text = num1;
+            _page2TextUp.Text = num1;
+        }
+
+        private void UpdateNumber()
+        {
+            _pageRotation3D.BeginAnimation(AxisAngleRotation3D.AngleProperty, null);
+            _pageRotation3D.Angle = 0;
+
+            var num = Number.ToString();
+            _page2TextDown.Text = num;
+            _page3TextUp.Text = num;
+
+            _isAnimating = false;
+        }
+
+        private Viewport2DVisual3D CreateNumber(int num, bool isUp, out TextBlock textBlock)
+        {
+            int flag;
+            var rotateTransform = new RotateTransform();
+
+            if (isUp)
+            {
+                flag = -1;
+                rotateTransform.Angle = 180;
+            }
+            else
+            {
+                flag = 1;
+            }
+            var halfWidth = ActualWidth / 2;
+            var quarterWidth = ActualWidth / 4;
+            var quarterHeight = ActualHeight / 4;
+
+            var meMaterial = new DiffuseMaterial();
+            Viewport2DVisual3D.SetIsVisualHostMaterial(meMaterial, true);
+
+            textBlock = new TextBlock
+            {
+                RenderTransformOrigin = new Point(0.5, 0.5),
+                Foreground = Foreground,
+                FontSize = FontSize,
+                VerticalAlignment = VerticalAlignment.Center,
+                HorizontalAlignment = HorizontalAlignment.Center,
+                TextAlignment = TextAlignment.Center,
+                Text = num.ToString(),
+                RenderTransform = rotateTransform,
+                Margin = new Thickness(0, 0, 0, -quarterHeight),
+                FontFamily = new FontFamily("Consolas")
+            };
+
+            var border = new Border
+            {
+                ClipToBounds = true,
+                CornerRadius = new CornerRadius(CornerRadius.TopLeft, CornerRadius.TopRight, 0, 0),
+                Background = Background,
+                Width = halfWidth,
+                Height = quarterHeight,
+                Child = textBlock
+            };
+
+            var positions = new Point3DCollection
+            {
+                new Point3D(-quarterWidth * flag, quarterHeight, 0),
+                new Point3D(-quarterWidth * flag, 0, 0),
+                new Point3D(quarterWidth * flag, 0, 0),
+                new Point3D(quarterWidth * flag, quarterHeight, 0)
+            };
+
+            var triangleIndices = new Int32Collection
+            {
+                0,
+                1,
+                2,
+                0,
+                2,
+                3
+            };
+
+            var textureCoordinates = new PointCollection
+            {
+                new Point(0, 0),
+                new Point(0, 1),
+                new Point(1, 1),
+                new Point(1, 0)
+            };
+
+            var geometry3D = new MeshGeometry3D
+            {
+                Positions = positions,
+                TriangleIndices = triangleIndices,
+                TextureCoordinates = textureCoordinates
+            };
+
+            var child = new Viewport2DVisual3D
+            {
+                Geometry = geometry3D,
+                Visual = border,
+                Material = meMaterial
+            };
+
+            return child;
+        }
+    }
+}
@@ -94,6 +94,7 @@
    <Compile Include="Controls\Other\InternalCanvas.cs" />
    <Compile Include="Controls\StepBar\StepBar.cs" />
    <Compile Include="Controls\StepBar\StepBarItem.cs" />
+    <Compile Include="Controls\Time\FlipClock\FlipNumber.cs" />
    <Compile Include="Data\Args\CancelRoutedEventArgs.cs" />
    <Compile Include="Data\Enum\InfoType.cs" />
    <Compile Include="Data\Enum\ResultType.cs" />
@@ -315,6 +316,10 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="Themes\Styles\FlipNumber.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
    <Page Include="Themes\Styles\GroupBox.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
@@ -0,0 +1,17 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:controls="clr-namespace:HandyControl.Controls">
+
+    <Style TargetType="controls:FlipNumber">
+        <Setter Property="FontSize" Value="70"/>
+        <Setter Property="Foreground" Value="#ccc"/>
+        <Setter Property="Background" Value="#333"/>
+        <Setter Property="Width" Value="120"/>
+        <Setter Property="Height" Value="180"/>
+        <Setter Property="Camera">
+            <Setter.Value>
+                <PerspectiveCamera Position="0 0 120" LookDirection="0 0 -1" />
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>
@@ -47,6 +47,7 @@
        <ResourceDictionary Source="SearchBar.xaml"/>
        <ResourceDictionary Source="Tag.xaml"/>
        <ResourceDictionary Source="RadioGroup.xaml"/>
+        <ResourceDictionary Source="FlipNumber.xaml"/>
    </ResourceDictionary.MergedDictionaries>

 </ResourceDictionary>
@@ -58,6 +58,10 @@
 	
        public static readonly string OutlineTextDemoCtl = nameof(OutlineTextDemoCtl);
 	
+        public static readonly string FlipNumberDemoCtl = nameof(FlipNumberDemoCtl);
+	
+        public static readonly string QQGroupView = nameof(QQGroupView);
+	
        public static readonly string ButtonDemoCtl = nameof(ButtonDemoCtl);

        public static readonly string ToggleButtonDemoCtl = nameof(ToggleButtonDemoCtl);
@@ -31,7 +31,9 @@ var controlList = new List<string>
 	"SearchBarDemoCtl",
 	"TagDemoCtl",
 	"GifImageDemoCtl",
-	"OutlineTextDemoCtl"
+	"OutlineTextDemoCtl",
+	"FlipNumberDemoCtl",
+	"QQGroupView"
 };
 var styleList = new List<string>
 {
@@ -142,6 +142,9 @@
    <Compile Include="UserControl\Controls\DateTimePickerDemoCtl.xaml.cs">
      <DependentUpon>DateTimePickerDemoCtl.xaml</DependentUpon>
    </Compile>
+    <Compile Include="UserControl\Controls\FlipNumberDemoCtl.xaml.cs">
+      <DependentUpon>FlipNumberDemoCtl.xaml</DependentUpon>
+    </Compile>
    <Compile Include="UserControl\Controls\OutlineTextDemoCtl.xaml.cs">
      <DependentUpon>OutlineTextDemoCtl.xaml</DependentUpon>
    </Compile>
@@ -193,6 +196,9 @@
    <Compile Include="UserControl\Main\NoUserContent.xaml.cs">
      <DependentUpon>NoUserContent.xaml</DependentUpon>
    </Compile>
+    <Compile Include="UserControl\Main\QQGroupView.xaml.cs">
+      <DependentUpon>QQGroupView.xaml</DependentUpon>
+    </Compile>
    <Compile Include="UserControl\Styles\BorderDemoCtl.xaml.cs">
      <DependentUpon>BorderDemoCtl.xaml</DependentUpon>
    </Compile>
@@ -402,6 +408,10 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="UserControl\Controls\FlipNumberDemoCtl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
    <Page Include="UserControl\Controls\OutlineTextDemoCtl.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
@@ -470,6 +480,10 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="UserControl\Main\QQGroupView.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
    <Page Include="UserControl\Styles\BorderDemoCtl.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
@@ -626,6 +640,8 @@
      <Generator>TextTemplatingFileGenerator</Generator>
      <LastGenOutput>MessageToken.cs</LastGenOutput>
    </Content>
+    <Resource Include="Resources\Img\qq-group.jpg" />
+    <Resource Include="Resources\Img\LeftMainContent\FlipVertical_16x.png" />
    <Resource Include="Resources\Img\car_chase.gif" />
    <Resource Include="Resources\Img\LeftMainContent\Animation_16x.png" />
    <Resource Include="Resources\Img\LeftMainContent\Tag_16x.png" />
@@ -384,6 +384,15 @@ namespace HandyControlDemo.Properties.Langs {
            }
        }
        
+        /// <summary>
+        ///   查找类似 翻页数字 的本地化字符串。
+        /// </summary>
+        public static string FlipNumber {
+            get {
+                return ResourceManager.GetString("FlipNumber", resourceCulture);
+            }
+        }
+        
        /// <summary>
        ///   查找类似 Gif图片 的本地化字符串。
        /// </summary>
@@ -708,6 +717,15 @@ namespace HandyControlDemo.Properties.Langs {
            }
        }
        
+        /// <summary>
+        ///   查找类似 QQ群 的本地化字符串。
+        /// </summary>
+        public static string QQGroup {
+            get {
+                return ResourceManager.GetString("QQGroup", resourceCulture);
+            }
+        }
+        
        /// <summary>
        ///   查找类似 单选按钮 的本地化字符串。
        /// </summary>
@@ -435,4 +435,10 @@
  <data name="OutlineText" xml:space="preserve">
    <value>OutlineText</value>
  </data>
+  <data name="FlipNumber" xml:space="preserve">
+    <value>FlipNumber</value>
+  </data>
+  <data name="QQGroup" xml:space="preserve">
+    <value>QQ Group</value>
+  </data>
 </root>
@@ -415,4 +415,10 @@
  <data name="OutlineText" xml:space="preserve">
    <value>轮廓文本</value>
  </data>
+  <data name="FlipNumber" xml:space="preserve">
+    <value>翻页数字</value>
+  </data>
+  <data name="QQGroup" xml:space="preserve">
+    <value>QQ群</value>
+  </data>
 </root>
@@ -33,6 +33,19 @@
        </DrawingBrush.Drawing>
    </DrawingBrush>

+    <DrawingBrush x:Key="QqDrawingBrush" RenderOptions.CachingHint="Cache" Viewport="0,0,100,200" ViewportUnits="Absolute" Stretch="Uniform" TileMode="Tile">
+        <DrawingBrush.Transform>
+            <TransformGroup>
+                <RotateTransform Angle="20"/>
+            </TransformGroup>
+        </DrawingBrush.Transform>
+        <DrawingBrush.Drawing>
+            <DrawingGroup>
+                <GeometryDrawing Brush="{DynamicResource DarkMaskBrush}" Geometry="{StaticResource QqGeometry}"/>
+            </DrawingGroup>
+        </DrawingBrush.Drawing>
+    </DrawingBrush>
+
    <LinearGradientBrush x:Key="MenuButtonBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="White" Offset="0"/>
        <GradientStop Color="#F2F2F2" Offset="1"/>
@@ -13,5 +13,6 @@
    <Geometry x:Key="ConfigGeometry">M827.904 541.184a278.592 278.592 0 0 0 0-58.368l73.728-58.368c15.872-13.056 20.224-35.584 9.728-53.504l-78.592-137.728c-9.984-17.408-31.232-25.856-51.712-18.176l-86.528 35.072c-15.872-11.52-32.512-21.248-49.664-29.184l-12.8-92.928c-3.072-20.224-20.736-35.584-41.216-35.584h-157.44c-20.736 0-38.144 14.848-41.216 35.84L378.88 221.44c-17.152 7.936-33.792 17.92-49.664 29.184L242.688 215.296c-18.688-7.168-41.216 0.768-51.2 18.176L112.64 371.2c-10.24 17.92-6.144 40.448 10.24 53.76l73.472 58.112c-1.024 9.472-1.536 19.2-1.536 29.184 0 9.728 0.512 19.456 1.536 29.184l-73.984 58.368c-15.872 13.056-19.968 35.584-9.728 53.248l78.848 137.728c9.984 17.408 32 25.856 51.456 17.92l86.528-35.072c15.872 11.52 32.512 21.248 49.664 29.184l13.056 93.696c3.328 20.48 20.48 35.328 41.216 35.328h157.44c20.48 0 38.144-15.36 41.216-35.84l13.056-93.184c17.152-7.936 33.792-17.664 49.664-29.184l86.784 35.328c4.864 1.792 9.984 2.816 15.104 2.816 14.848 0 28.672-7.936 36.096-20.992l78.592-137.728c10.24-17.664 6.4-40.192-9.984-53.76l-73.472-58.112z m-25.344 231.168l-99.584-40.448c-7.424-3.072-15.872-1.792-22.272 3.072-19.712 15.36-40.704 27.648-62.464 36.608-7.424 3.072-12.544 9.728-13.568 17.664l-14.592 104.96-155.392 2.304-15.104-107.264c-1.024-7.936-6.4-14.592-13.568-17.664-21.76-8.96-42.752-21.504-62.464-36.608-4.096-3.072-8.96-4.608-13.824-4.608-2.816 0-5.888 0.512-8.448 1.536l-96.256 41.472-80.896-137.216 84.48-66.816c6.144-4.864 9.472-12.8 8.448-20.48-1.536-12.032-2.56-24.32-2.56-36.608 0-12.288 1.024-24.576 2.56-36.608 1.024-7.936-2.048-15.616-8.448-20.48l-83.712-64 76.544-139.264 99.584 40.448c7.424 3.072 15.872 1.792 22.272-3.072 19.712-15.36 40.96-27.648 62.72-36.864 7.424-3.072 12.544-9.728 13.568-17.664l12.544-104.704 157.696-2.304 15.104 107.264c1.024 7.936 6.4 14.592 13.568 17.664 21.76 8.96 42.752 21.504 62.464 36.864 6.4 4.864 14.848 6.144 22.272 3.072l96.256-41.472 80.896 137.216-84.48 66.816c-6.144 4.864-9.472 12.544-8.448 20.48 1.536 12.032 2.56 24.32 2.56 36.608 0 12.288-1.024 24.576-2.56 36.608-1.024 7.936 2.304 15.616 8.448 20.48l83.712 63.744-77.056 139.264zM512 345.6c-91.136 0-165.12 74.752-165.12 166.4s73.984 166.4 165.12 166.4 165.12-74.752 165.12-166.4-73.984-166.4-165.12-166.4z m0 297.216c-71.168 0-129.28-58.624-129.28-130.816 0-72.192 58.112-130.816 129.28-130.816s129.28 58.624 129.28 130.816c0 72.192-57.856 130.816-129.28 130.816z</Geometry>
    <Geometry x:Key="ContributorsGeometry">M657.486769 287.744c5.671385 0 11.264-5.671385 16.935385-5.671385l186.289231-124.140307c5.592615-5.592615 16.935385-16.935385 16.935384-28.199385V73.334154A74.673231 74.673231 0 0 0 804.233846 0H606.680615v220.002462c0 22.606769-16.935385 33.870769-39.463384 33.870769H454.262154c-22.528 0-39.463385-16.935385-39.463385-33.870769V5.671385H222.838154c-45.134769 0-79.005538 33.870769-79.005539 73.255384v56.477539c0 11.264 5.671385 22.528 16.935385 28.199384l186.289231 124.140308h16.935384C200.310154 349.735385 98.697846 507.746462 121.304615 693.878154c22.528 169.275077 169.353846 310.350769 344.221539 327.207384 237.095385 28.199385 440.32-152.339692 440.32-377.934769 0-158.011077-101.612308-299.008-248.359385-355.406769z m-146.747077 671.271385C335.793231 959.015385 189.046154 818.018462 189.046154 643.150769c0-174.867692 146.747077-310.350769 321.693538-310.350769 174.946462 0 321.693538 141.075692 321.693539 315.943385s-146.747077 310.350769-321.693539 310.350769zM670.798769 572.967385l-68.371692-11.185231a31.507692 31.507692 0 0 1-28.514462-16.777846l-28.514461-55.926154c-17.092923-27.963077-51.278769-27.963077-68.371692 0l-28.514462 55.926154a31.507692 31.507692 0 0 1-28.514462 16.777846l-68.371692 11.185231c-28.514462 5.592615-39.936 39.148308-17.092923 61.44l45.528615 39.227077c5.750154 11.185231 17.171692 22.370462 11.421539 33.555692l-11.421539 67.111384c-5.671385 27.963077 28.514462 50.333538 51.357539 33.555693l62.700308-27.963077a37.021538 37.021538 0 0 1 34.185846 0l62.700307 33.555692c28.514462 16.777846 57.028923-5.592615 51.27877-33.555692l-11.421539-67.111385c0-16.777846 5.750154-27.963077 11.421539-33.555692l51.278769-44.740923a38.596923 38.596923 0 0 0-22.843077-61.518769z</Geometry>
    <Geometry x:Key="GitHubStrGeometry">M1185.92 769.92h-1.28c0.576 0 0.96 0.64 1.536 0.704h0.384l-0.64-0.64z m0.256 0.704c-5.952 0.064-20.928 3.2-36.736 3.2-49.92 0-67.2-23.04-67.2-53.12V520.32h101.76c5.76 0 10.24-5.12 10.24-12.16v-108.8c0-5.76-5.12-10.88-10.24-10.88h-101.76V253.44c0-5.12-3.2-8.32-8.96-8.32h-138.24c-5.76 0-8.96 3.2-8.96 8.32v138.88s-69.76 17.28-74.24 17.92c-5.12 1.28-8.32 5.76-8.32 10.88v87.04c0 7.04 5.12 12.16 10.88 12.16h71.04v209.92c0 156.16 108.8 172.16 183.04 172.16 33.92 0 74.88-10.88 81.28-14.08 3.84-1.28 5.76-5.76 5.76-10.24v-96a11.328 11.328 0 0 0-9.344-11.52z m1516.544-140.8c0-115.84-46.72-131.2-96-126.08-38.4 2.56-69.12 21.76-69.12 21.76v225.28s31.36 21.76 78.08 23.04c65.92 1.92 87.04-21.76 87.04-144z m155.52-10.24c0 219.52-71.04 282.24-195.2 282.24-104.96 0-161.28-53.12-161.28-53.12s-2.56 29.44-5.76 33.28c-1.92 3.84-5.12 5.12-8.96 5.12h-94.72c-6.4 0-12.16-5.12-12.16-10.88l1.28-711.04c0-5.76 5.12-10.88 10.88-10.88h136.32c5.76 0 10.88 5.12 10.88 10.88v241.28s52.48-33.92 129.28-33.92l-0.64-1.28c76.8 0 190.08 28.8 190.08 248.32z m-558.08-231.04H2165.76c-7.04 0-10.88 5.12-10.88 12.16v348.16s-35.2 24.96-83.2 24.96-62.08-21.76-62.08-69.76V400c0-5.76-5.12-10.88-10.88-10.88h-136.96c-5.76 0-10.88 5.12-10.88 10.88v327.04c0 140.8 78.72 176 186.88 176 88.96 0 161.28-49.28 161.28-49.28s3.2 24.96 5.12 28.8c1.28 3.2 5.76 5.76 10.24 5.76h85.76c7.04 0 10.88-5.12 10.88-10.88l1.28-478.08c0-5.76-5.12-10.88-12.16-10.88z m-1516.8-0.64h-136.32c-5.76 0-10.88 5.76-10.88 12.8v469.76c0 12.8 8.32 17.28 19.2 17.28h122.88c12.8 0 16-5.76 16-17.28V398.72c0-5.76-5.12-10.88-10.88-10.88z m-67.2-216.32c-49.28 0-88.32 39.04-88.32 88.32 0 49.28 39.04 88.32 88.32 88.32 48 0 87.04-39.04 87.04-88.32 0-49.28-39.04-88.32-87.04-88.32z m1055.36-16h-135.04c-5.76 0-10.88 5.12-10.88 10.88v261.76h-211.84V166.4c0-5.76-5.12-10.88-10.88-10.88h-136.32c-5.76 0-10.88 5.12-10.88 10.88v711.04c0 5.76 5.76 10.88 10.88 10.88h136.32c5.76 0 10.88-5.12 10.88-10.88V573.44h211.84l-1.28 304c0 5.76 5.12 10.88 10.88 10.88h136.32c5.76 0 10.88-5.12 10.88-10.88V166.4c0-5.76-5.12-10.88-10.88-10.88zM563.84 470.4v367.36c0 2.56-0.64 7.04-3.84 8.32 0 0-80 56.96-211.84 56.96-159.36 0-348.16-49.92-348.16-378.88S165.12 127.36 326.4 128c139.52 0 195.84 31.36 204.8 37.12 2.56 3.2 3.84 5.76 3.84 8.96L508.16 288c0 5.76-5.76 12.8-12.8 10.88-23.04-7.04-57.6-21.12-138.88-21.12-94.08 0-195.2 26.88-195.2 238.72s96 236.8 165.12 236.8c58.88 0 80-7.04 80-7.04v-147.2H312.32c-7.04 0-12.16-5.12-12.16-10.88V470.4c0-5.76 5.12-10.88 12.16-10.88h239.36c7.04 0 12.16 5.12 12.16 10.88z</Geometry>
+    <Geometry x:Key="QqGeometry">M936.194300839506 691.6934192494618c-5.891587367822223-94.26540047423211-70.69904970840491-170.8560375504593-106.04857520987652-212.09715041975304 5.891587367822223-11.783174735644446 17.674762103466666-79.53643140740742-29.457938133649378-126.66913164452346V349.981342854005c0-182.63921228610366-129.61492468116543-315.1999312984493-294.57937486380246-315.1999312984493s-294.57937615834066 132.5607190123457-294.57937615834066 315.1999312984493v2.9457943311802466c-47.132700237116055 47.132700237116055-35.349525501471604 114.885956908879-29.45793683911111 126.66913164452346-35.349525501471604 41.24111286929382-100.15698784205432 117.83174994552098-106.04857520987652 212.09715041975304 0 23.56634947128889 2.9457943311802466 58.91587497276049 14.728969066824689 76.59063707622718 14.728969066824689 20.62055643464691 55.97008193611851-2.9457943311802466 82.48222444404936-64.80746234058272 8.837381699002469 29.457938133649378 26.51214380246913 73.64484403958517 67.75325667176295 126.66913164452346-70.69904970840491 14.728969066824689-88.37381310640988 85.42801877522965-64.80746234058272 123.72333731334321 17.674762103466666 26.51214380246913 53.02428760493826 47.132700237116055 120.77754298216297 47.132700237116055 114.885956908879 0 167.9102445138173-32.40373117029136 191.4765952796444-53.02428760493826 5.891587367822223-5.891587367822223 11.783174735644446-5.891587367822223 20.620555140108642-5.891587367822223 8.837381699002469 0 14.728969066824689 2.9457943311802466 20.62055643464691 5.891587367822223 23.56634947128889 20.62055643464691 73.64484403958517 53.02428760493826 191.4765939851062 53.02428760493826 64.80746234058272 0 103.10278087869627-20.62055643464691 120.77754427670124-47.132700237116055 23.56634947128889-38.29531853811359 2.9457943311802466-106.04857520987652-64.80746234058272-123.72333731334321 41.24111286929382-55.97008193611851 58.91587497276049-100.15698784205432 67.75325667176295-126.66913164452346 29.457938133649378 61.86166930394074 67.75325667176295 85.42801877522965 82.48222444404936 64.80746234058272 5.891587367822223-17.674762103466666 11.783174735644446-53.02428760493826 8.837381699002469-76.59063707622718z m0 0</Geometry>

 </ResourceDictionary>
@@ -0,0 +1,16 @@
+<UserControl x:Class="HandyControlDemo.UserControl.FlipNumberDemoCtl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Background="{DynamicResource RegionBrush}"
+             xmlns:controls="clr-namespace:HandyControl.Controls;assembly=HandyControl">
+    <controls:TransitioningContentControl>
+         <Grid Margin="32">
+             <Grid.RowDefinitions>
+                 <RowDefinition Height="Auto"/>
+                 <RowDefinition/>
+             </Grid.RowDefinitions>
+            <controls:NumericUpDown x:Name="UpDown" Minimum="0" Maximum="9"/>
+            <controls:FlipNumber Number="{Binding Value,ElementName=UpDown}" Grid.Row="1" Margin="0,16,0,0"/>
+         </Grid>   
+    </controls:TransitioningContentControl>
+</UserControl>
@@ -0,0 +1,10 @@
+namespace HandyControlDemo.UserControl
+{
+    public partial class FlipNumberDemoCtl
+    {
+        public FlipNumberDemoCtl()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -189,6 +189,11 @@
                        <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
                    </controls:EdgeElement.LeftContent>
                </ListBoxItem>
+                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.FlipNumberDemoCtl}" Content="{x:Static langs:Lang.FlipNumber}">
+                    <controls:EdgeElement.LeftContent>
+                        <Image Source="../../Resources/Img/LeftMainContent/FlipVertical_16x.png"/>
+                    </controls:EdgeElement.LeftContent>
+                </ListBoxItem>
                <ListBoxItem Tag="{x:Static data:MessageToken.SearchBarDemoCtl}" Content="{x:Static langs:Lang.SearchBar}">
                    <controls:EdgeElement.LeftContent>
                        <Image Source="../../Resources/Img/LeftMainContent/Search_16x.png"/>
@@ -31,11 +31,16 @@
                </MenuItem>
                <MenuItem Tag="https://www.nuget.org/packages/HandyControl" Header="NuGet">
                    <MenuItem.Icon>
-                        <Path Data="{StaticResource NugetGeometry}" Fill="#224880"/>
+                        <Path Data="{StaticResource NugetGeometry}" Fill="#30a5dd"/>
                    </MenuItem.Icon>
                </MenuItem>
            </MenuItem>
            <MenuItem Foreground="White" Header="{x:Static langs:Lang.About}">
+                <MenuItem Click="MenuItemQQGroup_OnClick" Header="{x:Static langs:Lang.QQGroup}">
+                    <MenuItem.Icon>
+                        <Path Data="{StaticResource QqGeometry}" Fill="{DynamicResource PrimaryBrush}"/>
+                    </MenuItem.Icon>
+                </MenuItem>
                <MenuItem Tag="mailto:836904362@qq.com" Header="{x:Static langs:Lang.Email}">
                    <MenuItem.Icon>
                        <Path Data="{StaticResource EmailGeometry}" Fill="{DynamicResource PrimaryBrush}"/>
@@ -59,6 +59,13 @@ namespace HandyControlDemo.UserControl
            }
        }

+        private void MenuItemQQGroup_OnClick(object sender, RoutedEventArgs e)
+        {
+            Messenger.Default.Send<object>(null, MessageToken.ClearLeftSelected);
+            Messenger.Default.Send(true, MessageToken.FullSwitch);
+            Messenger.Default.Send(AssemblyHelper.CreateInternalInstance($"UserControl.{MessageToken.QQGroupView}"), MessageToken.LoadShowContent);
+        }
+
        private void MenuItemContributors_OnClick(object sender, RoutedEventArgs e)
        {
            Messenger.Default.Send<object>(null, MessageToken.ClearLeftSelected);
@@ -0,0 +1,12 @@
+<UserControl x:Class="HandyControlDemo.UserControl.QQGroupView"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Background="{DynamicResource SecondaryRegionBrush}">
+    <Border Background="{DynamicResource QqDrawingBrush}">
+        <Border Height="274" Effect="{StaticResource EffectShadow5}" Width="200" CornerRadius="10">
+            <Border.Background>
+                <ImageBrush ImageSource="/HandyControlDemo;component/Resources/Img/qq-group.jpg"/>
+            </Border.Background>
+        </Border>
+    </Border>
+</UserControl>
@@ -0,0 +1,10 @@
+namespace HandyControlDemo.UserControl
+{
+    public partial class QQGroupView
+    {
+        public QQGroupView()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -2,6 +2,10 @@

 ![csharp-version](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/csharp-version.png) ![IDE-version](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/IDE-version.png) [![nuget-version](https://img.shields.io/nuget/v/HandyControl.svg)](https://www.nuget.org/packages/HandyControl) [![build-status](https://ci.appveyor.com/api/projects/status/github/NaBian/handycontrol?svg=true)](https://ci.appveyor.com/project/NaBian/handycontrol) [![Join the chat at https://gitter.im/HandyControl/Lobby](https://badges.gitter.im/HandyControl/Lobby.svg)](https://gitter.im/HandyControl/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

+# Discussion
+
+![Discussion](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/qq-group.jpg)
+
 # Welcome to HandyControl

 ## Latest examples
@@ -200,8 +204,4 @@ Step 3：enjoy coding

 # Switching configuration

-![Switching configuration](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/SwitchConfig.png)
-
-# Discussion
-
-![DataGrid](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/qq-group.jpg)
+![Switching configuration](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/SwitchConfig.png)