WPF custom control and style (10)-progress control ProcessBar custom sample, wpfprocessbar

WPF custom control and style (10)-progress control ProcessBar custom sample, wpfprocessbar

I. Preface

Statement: WPF custom controls and styles are a series of articles that are associated with each other, but most of them are gradually released in the order of simplicity to complexity, if you have any questions, refer to the articles in this series. Some links to the articles are provided at the end of this article.

Main content of this article:

• ProcessBar custom standard style;
• ProcessBar customizes the ring progress style;

Ii. Standard ProcessBar Style

:

 

ProcessBar style is very simple:

    <!--ProgressBar Style-->    <Style TargetType="ProgressBar" x:Key="SimpleProgressBar">        <Setter Property="Background" Value="{StaticResource ControlBorderBrush}" />        <Setter Property="Maximum" Value="1" />        <Setter Property="Value" Value="0" />        <Setter Property="Height" Value="10" />        <Setter Property="IsTabStop" Value="False" />        <Setter Property="Foreground" Value="{StaticResource FocusBorderBrush}" />        <Setter Property="SnapsToDevicePixels" Value="True" />        <Setter Property="local:ControlAttachProperty.CornerRadius" Value="0" />        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="ProgressBar">                    <Grid x:Name="Root" >                        <Border x:Name="PART_Track" Background="{TemplateBinding Background}"                                 CornerRadius="{TemplateBinding local:ControlAttachProperty.CornerRadius}"                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>                        <Border  x:Name="PART_Indicator" HorizontalAlignment="Left" Background="{TemplateBinding Foreground}"                                 CornerRadius="{TemplateBinding local:ControlAttachProperty.CornerRadius}"                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>                    </Grid>                    <ControlTemplate.Triggers>                        <Trigger Property="Orientation" Value="Vertical">                            <Setter Property="LayoutTransform" TargetName="Root" >                                <Setter.Value>                                    <RotateTransform Angle="-90" />                                </Setter.Value>                            </Setter>                        </Trigger>                    </ControlTemplate.Triggers>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>

Example:

<ProgressBar Margin="5" Value="{Binding Percent,Mode=OneWay}" Style="{StaticResource SimpleProgressBar}" x:Name="pro4"></ProgressBar>
<ProgressBar Margin="5" Value="{Binding Percent,Mode=OneWay}" Height="15" x:Name="pro5" Background="LightSteelBlue" Foreground="OrangeRed" 
　　Style="{StaticResource SimpleProgressBar}"></ProgressBar>

 

3. ProcessBar ring progress Style

:

 

Style definition is also relatively simple:

<! -- Note: the maximum value of the ProgressBar of this style is 1, and BorderThickness controls the ring size. -->
<! -- Ed needs to reference: xmlns: ed = "http://schemas.microsoft.com/expression/2010/drawing" -->
<Style x: Key = "LoopProcessBar" TargetType = "{x: type ProgressBar} "> <Setter Property =" Background "Value =" # C1D1DE "/> <Setter Property =" Margin "Value =" 5 "/> <Setter Property =" Width "Value =" 300 "/> <Setter Property =" Height "Value =" 300 "/> <Setter Property =" BorderBrush "Value =" bluevilet "/> <Setter Property = "BorderThickness" Value = "60"/> <Setter Property = "Foreground" Value = "{StaticResource TextForeground}"/> <Setter Property = "Maximum" Value = "1"/> <Setter Property = "Minimum" Value = "0"/> <Setter Property = "Value" Value = "0" /> <Setter Property = "IsTabStop" Value = "False"/> <Setter Property = "IsHitTestVisible" Value = "False"/> <Setter Property = "Template"> <Setter. value> <ControlTemplate TargetType = "{x: Type ProgressBar}"> <Viewbox Stretch = "Uniform" verticalignment = "Center" HorizontalAlignment = "Center"> <Grid M Argin = "{TemplateBinding Margin}" SnapsToDevicePixels = "True" Width = "{TemplateBinding Width}" Height = "{TemplateBinding Height}"> <! -- Background ring --> <ed: Arc Margin = "{TemplateBinding Margin}" Opacity = "0.6" ArcThickness = "{Binding Path = BorderThickness, RelativeSource = {RelativeSource TemplatedParent }, mode = OneWay, Converter = {x: Static local: XConverter. thicknessToDoubleConverter} "StartAngle =" 0 "Fill =" {TemplateBinding Background} "EndAngle =" 360 "Stretch =" None "x: Name =" arcOuter "/> <! -- Value-ring --> <ed: Arc Margin = "{TemplateBinding Margin}" x: Name = "arcValue" ArcThickness = "{Binding Path = BorderThickness, relativeSource = {RelativeSource TemplatedParent}, Mode = OneWay, Converter = {x: Static local: XConverter. thicknessToDoubleConverter} "StartAngle =" 0 "Fill =" {TemplateBinding BorderBrush} "Stretch =" None "Panel. ZIndex = "2" EndAngle = "{TemplateBinding Value, Converter = {x: Static local: XConverter. percentToAngleConverter }}"> </ed: Arc> </Grid> </Viewbox> </ControlTemplate> </Setter. value> </Setter> </Style>

Two converters are used in the above style:

• ThicknessToDoubleConverter: Use the BorderThickness attribute of ProcessBar to set the ring width and convert BorderThickness to the value required for the ring Arc width;
• PercentToAngleConverter: converts the current progress value to the angle value of the ring Arc;

Here is a little trick to declare a common converter as a Static variable. in XAML, it is used statically in the "x: Static" mode, which makes it much easier to use, it is not defined separately in xaml. Of course, this also has drawbacks, because static variables are determined by their own characteristics and cannot be abused.

/// <Summary> /// Convert percentage to angle value /// </summary> public class PercentToAngleConverter: IValueConverter {public object Convert (object value, Type targetType, object parameter, cultureInfo culture) {var percent = value. toSafeString (). toDouble (); if (percent> = 1) return 360.0D; return percent * 360;} public object ConvertBack (object value, Type targetType, object parameter, CultureInfo culture) {throw new NotImplementedException () ;}/// <summary> // get the fixed Thickness value double /// </summary> public class ThicknessToDoubleConverter: IValueConverter {public object Convert (object value, Type targetType, object parameter, CultureInfo culture) {var thickness = (Thickness) value; return thickness. left;} public object ConvertBack (object value, Type targetType, object parameter, CultureInfo culture) {return DependencyProperty. unsetValue ;}}

 

Example:

            <ProgressBar Style="{StaticResource LoopProcessBar}" Value="{Binding Percent,Mode=OneWay}"  x:Name="pro1" ></ProgressBar>            <Grid Width="200" Height="200">                <ProgressBar Style="{StaticResource LoopProcessBar}" Value="{Binding Percent,Mode=OneWay}" x:Name="pro2" Margin="0" Width="200" Height="200" BorderThickness="20" BorderBrush="#EF436F"/>                <TextBlock FontSize="30" Text="{Binding Value,Mode=OneWay,ElementName=pro2,StringFormat={}{0:p1}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>            </Grid>            <ProgressBar Style="{StaticResource LoopProcessBar}" x:Name="pro3" Value="{Binding Percent,Mode=OneWay}" Width="100" Height="100" BorderThickness="10" BorderBrush="#EFBF0E"></ProgressBar>

 

Appendix: Reference 

WPF custom controls and styles (1)-vector font icons (iconfont)

WPF custom controls and styles (2)-Custom button FButton

WPF custom controls and styles (3)-TextBox & RichTextBox & PasswordBox styles, watermarks, Label labels, function extensions

WPF custom controls and styles (4)-CheckBox/RadioButton custom styles

WPF custom controls and styles (5)-Calendar/DatePicker date controls custom styles and extensions

WPF custom controls and styles (6)-ScrollViewer and ListBox custom styles

WPF custom controls and styles (7)-List controls DataGrid and ListView custom styles

WPF custom controls and styles (8)-ComboBox and custom multi-choice controls MultComboBox

WPF custom control and style (9)-tree control TreeView and Menu-ContextMenu

 

Copyright, Article Source: http://www.cnblogs.com/anding

My personal abilities are limited. The content of this article is only for study and discussion. You are welcome to correct and exchange ideas.