Article From:https://www.cnblogs.com/lonelyxmas/p/9689225.html
WPF mask layer LoadingPage

WPF Mask layer LoadingPage

 

Preface

  Whether it is in the PC client, mobile end, the site, in the face of long processing time will need to use masks, so that users have a better embodiment. Today, I browsed the web about the implementation of the masking layer of our predecessors, and found that many of them are complicated (using foreground code + background code + mathematical calculation)It will undoubtedly increase the difficulty of maintenance. However, I refer to the implementation of your predecessors, I have implemented a reusable LoadingPage control, welcome to download and use.

 

demand

  Demand is the first step. What is the goal I want to achieve?

    1.Is a control that can be reused in various environments of.NET.

    2.Configurable, such as color, size, reminder string, and so on, the user can customize to meet the needs of the user’s situation.

    3.The size and proportion are adaptive, and the window carriers of different sizes can automatically change the proportion of their own size.

    4.The effect of all XAML implementation, all concentrated on XAML control is not difficult, easy to maintain, user copy XAML is also convenient.

 

Resolvent

    1.New WPF user control library is developed.

    2.Use dependency properties, and foreground XAML uses attribute binding.

    3.Use the ViewBox control, which controls the content automatically.

    4.Write animation code in XAML.

Results show

  

 

Production process

  First, create a new “WPF user control library” project, and create a new WPF control. (this step is not explained).

  Two: In order to achieve the mask effect, we make the background of the control black background, and the transparency is 0.2.

<UserControl.Background>
    <SolidColorBrush Color="Black" Opacity="0.2" ></SolidColorBrush>
</UserControl.Background>

  Three: Then use Canvas as the background, draw a big circle composed of small circles on it, using the control Ellipse.

<Canvas RenderTransformOrigin="0.5,0.5" 
                    HorizontalAlignment="Center"  x:Name="loadCancas"
                    VerticalAlignment="Center" Width="120"  
                    Height="120" >
                <Canvas.Resources>
                    <Style TargetType="Ellipse">
                        <Setter Property="Width" Value="10" ></Setter>
                        <Setter Property="Height" Value="10" ></Setter>
                        <Setter Property="Canvas.Left" Value="30"></Setter>
                        <Setter Property="Canvas.Top" Value="30"></Setter>
                        <Setter Property="Stretch" Value="Fill"></Setter>
                        <Setter Property="Fill" Value="Blue"></Setter>
                        <Setter Property="RenderTransformOrigin" Value="3,3"></Setter>
                    </Style>
                </Canvas.Resources>
                <Ellipse >
                </Ellipse>
                <Ellipse Opacity="0.9">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="36"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.8">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="72"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.7">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="108"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.6">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="144"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.5">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="180"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.4">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="216"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.3">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="252"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.2">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="288"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.1" >
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="324"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Canvas.RenderTransform>
                    <TransformGroup>
                        <RotateTransform x:Name="SpinnerRotate"  
                         Angle="0" />
                    </TransformGroup>
                </Canvas.RenderTransform>
            </Canvas>
        </Grid>

  This creates a circle and then wraps the Canvas in a viewBox as a container to achieve Goal 3 (which automatically changes the size of the content). (no code attached)

 

Four: spin animation.

  Because I drew a circle in Canvas, but I just had to rotate it infinitely to make it move like a small circle. Let’s take a look at the trigger of Canvas and write the animation in the trigger.

<Canvas.Triggers>
  <EventTrigger RoutedEvent="Loaded">
    <BeginStoryboard Name="loadAnimation">
      <Storyboard>
        <DoubleAnimation Storyboard.TargetName="loadCancas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" From="360" To="0" RepeatBehavior="Forever" Duration="0:0:3"></DoubleAnimation> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="Unloaded">     <StopStoryboard BeginStoryboardName="loadAnimation"></StopStoryboard> </EventTrigger> </Canvas.Triggers>

 

Fifth: Attribute configurable, using dependency attributes, and writing bindings in xaml, the following look at the background code in the definition of dependency attributes, and then the foreground binding subsidy, unified in the attachment can be seen.

public partial class LoadingPage : UserControl
    {
        public LoadingPage()
        {
            InitializeComponent();
        }

        #region Margin loaded circle
        [DescriptionAttribute("Margin loaded circle"), CategoryAttribute("extend"), DefaultValueAttribute(0)]
        public string LoadCirclesMargin
        {
            get { return (string)GetValue(LoadCirclesMarginProperty); }
            set { SetValue(LoadCirclesMarginProperty, value); }
        }


        public static readonly DependencyProperty LoadCirclesMarginProperty =
            DependencyProperty.Register("LoadCirclesMargin", typeof(string), typeof(LoadingPage),
            new FrameworkPropertyMetadata("50"));
        #endregion

        #region Prompt in loading
        [DescriptionAttribute("Prompt in loading"), CategoryAttribute("extend"), DefaultValueAttribute(0)]
        public string LoadingText
        {
            get { return (string)GetValue(LoadingTextProperty); }
            set { SetValue(LoadingTextProperty, value); }
        }


        public static readonly DependencyProperty LoadingTextProperty =
            DependencyProperty.Register("LoadingText", typeof(string), typeof(LoadingPage),
            new FrameworkPropertyMetadata("Loading"));
        #endregion

        #region Font size for prompt in loading
        [DescriptionAttribute("Font size for prompt in loading"), CategoryAttribute("extend"), DefaultValueAttribute(0)]
        public int LoadingTextFontSize
        {
            get { return (int)GetValue(LoadingTextFontSizeProperty); }
            set { SetValue(LoadingTextFontSizeProperty, value); }
        }


        public static readonly DependencyProperty LoadingTextFontSizeProperty =
            DependencyProperty.Register("LoadingTextFontSize", typeof(int), typeof(LoadingPage),
            new FrameworkPropertyMetadata(12));
        #endregion

        #region Color of circles
        [DescriptionAttribute("Color of circles"), CategoryAttribute("extend"), DefaultValueAttribute(0)]
        public Brush CirclesBrush
        {
            get { return (Brush)GetValue(CirclesBrushProperty); }
            set { SetValue(CirclesBrushProperty, value); }
        }


        public static readonly DependencyProperty CirclesBrushProperty =
            DependencyProperty.Register("CirclesBrush", typeof(Brush), typeof(LoadingPage),
            new FrameworkPropertyMetadata(Brushes.Black));
        #endregion

        #region Font color for prompt in loading
        [DescriptionAttribute("Font color for prompt in loading"), CategoryAttribute("extend"), DefaultValueAttribute(0)]
        public Brush LoadingTextForeground
        {
            get { return (Brush)GetValue(LoadingTextForegroundProperty); }
            set { SetValue(LoadingTextForegroundProperty, value); }
        }


        public static readonly DependencyProperty LoadingTextForegroundProperty =
            DependencyProperty.Register("LoadingTextForeground", typeof(Brush), typeof(LoadingPage),
            new FrameworkPropertyMetadata(Brushes.DarkSlateGray));
        #endregion
    }

 

Be accomplished!!!! The above code is all fragmented to demonstrate the principles of the code, if you want to use the control, you can click the download below

                                    Complete Demo Download

Link of this Article: WPF mask layer LoadingPage

Leave a Reply

Your email address will not be published. Required fields are marked *