World War I Windows 10 (34) and World War I 34

World War I Windows 10 (34) and World War I 34

[Download source code]

Backwater world war I Windows 10 (34)-Controls (Progress class): RangeBase, Slider, ProgressBar, ProgressRing

Author: webabcd


Introduction
Controls for backwaters Windows 10 (Progress class)

• RangeBase
• Slider
• ProgressBar
• ProgressRing

Example
1. RangeBase (base class) Example
Controls/ProgressControl/RangeBaseDemo. xaml

<Page x: Class = "Windows10.Controls. ProgressControl. RangeBaseDemo" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: local =" using: Windows10.Controls. ProgressControl "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "Xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "Mc: ignorable = "d"> <Grid Background = "Transparent"> <StackPanel Margin = "10 0 10"> <TextBlock Name = "lblMsg" Margin = "5"/> <! -- Slider-slide control, inherited from RangeBase. The following describes the RangeBase-related knowledge point Minimum-the Minimum value of the range control (double type) Maximum-the Maximum value of the range control (double type) value-the current Value of the range control (double type) SmallChange-small variation step (double type ), press the "Upper/lower/left/right" Key of the keyboard LargeChange-large change step size (double type) and press the "PageUp/PageDown" Key of the keyboard (the test result is invalid, in addition, the Home Key and End key are available) valueChanged-event triggered when the current value of the range control changes --> <Slider Name = "slider" Width = "200" Margin = "5" HorizontalAlignment = "Left" Foreground =" orange "Background =" Red "Style =" {StaticResource MySliderStyle} "Minimum =" 1000 "Maximum =" 2000 "Value =" 1500 "SmallChange =" 10 "LargeChange =" 100" valueChanged = "slider_ValueChanged"> </Slider> </StackPanel> </Grid> </Page>

Controls/ProgressControl/RangeBaseDemo. xaml. cs

/** RangeBase (base class)-range Control base class (inherited from Control, see/Controls/BaseControl/ControlDemo/) */using Windows. UI. xaml. controls; using Windows. UI. xaml. controls. primitives; namespace Windows10.Controls. progressControl {public sealed partial class RangeBaseDemo: Page {public RangeBaseDemo () {this. initializeComponent ();} private void slider_ValueChanged (object sender, RangeBaseValueChangedEventArgs e) {// RangeBaseValueChangedEventArgs // previous value of the OldValue-range control // NewValue-current value of the range control lblMsg. text = $ "slider old value: {e. oldValue}, slider new value: {e. newValue }";}}}

2. Slider example
Controls/ProgressControl/SliderDemo. xaml

<Page x: Class = "Windows10.Controls. ProgressControl. SliderDemo" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: local =" using: Windows10.Controls. ProgressControl "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "Xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "Mc: Ignorable =" d "> <Grid Background =" Transparent "> <Grid. resources> <local: MyThumbToolTipValueConverter x: Key = "MyThumbToolTipValueConverter"/> </Grid. resources> <! -- Slider-Slider control Header-you can set a plain text item and cannot hit the test. If the Header is empty, HeaderTemplate does not occupy any space.-You can set the Header to any xaml, the layout direction of the hit test Orientation-slide bar is Horizontal-Vertical-IsDirectionReversed-value is left-right or down-to-top, which is false (default ), true IsThumbToolTipEnabled-whether to display the current value prompt ThumbToolTipValueConverter-Converter TickPlacement used to display the current value prompt next to thumb-how to display the dial line, Windows. UI. xaml. controls. primitives. tickPlacement enumeration (None, TopLeft, BottomRight, Outside, Inline) TickFrequency-interval of the dial-StepFrequency-interval of each step SnapsTo-Method of pasting StepValues-Snap by StepFrequency (default) when Slider is controlled by dragging the mouse or clicking the mouse, its value is an integral multiple of StepFrequency (NOTE: When controlling the keyboard, the step size comes from the SmallChange and LargeChange of the basic RangeBase class) ticks-when Snap is performed by TickFrequency by dragging the mouse or clicking the mouse to control the Slider, the value is an integral multiple of TickFrequency (NOTE: When controlling the keyboard, the step size comes from the SmallChange and LargeChange of the basic RangeBase class) note: You can use Foreground and Background to set the color of some Slider states, for more style settings, modify the control template --> <StackPanel Margin = "10 0 10 10"> <Slider Margin = "5" Width = "100" Value = "20" horizontalAlignment = "Left" Foreground = "Orange" Background = "Red" Style = "{StaticResource MySliderStyle}" Header = "Slider"/> <Slider Margin = "5" Height =" 100 "placement =" Left "Foreground =" Orange "Background =" Red "Style =" {StaticResource MySliderStyle} "Orientation =" Vertical "IsDirectionReversed =" True "IsThumbToolTipEnabled =" True" thumbToolTipValueConverter = "{StaticResource MyThumbToolTipValueConverter}"> <Slider. headerTemplate> <DataTemplate> <TextBlock Text = "Slider" Foreground = "Red"/> </DataTemplate> </Slider. headerTemplate> </Slider> <Slider Margin = "5" Width = "800" Minimum = "0" Maximum = "800" HorizontalAlignment = "Left" Foreground = "Orange" Background = ""Red" Style = "{StaticResource MySliderStyle}" TickPlacement = "Inline" TickFrequency = "80" StepFrequency = "100" SnapsTo = "StepValues"/> </StackPanel> </Grid> </Page>

Controls/ProgressControl/SliderDemo. xaml. cs

/** Slider-Slider control (inherited from RangeBase, see/Controls/ProgressControl/RangeBaseDemo. xaml) * Thumb-control that can be dragged by the user (the drag part in the Slider is a Thumb control) */using System; using Windows. UI. xaml. controls; using Windows. UI. xaml. data; namespace Windows10.Controls. progressControl {public sealed partial class SliderDemo: Page {public SliderDemo () {this. initializeComponent () ;}}// provides Converter public sealed class Converter: IValueConverter {public object Convert (object value, Type targetType, object parameter, string language) for the ThumbToolTipValueConverter of Slider) {// Add a percent sign return value + "%";} public object ConvertBack (object value, Type targetType, object parameter, string language) to the current value displayed next to thumb) {return null ;}}}

3. Example of ProgressBar
Controls/ProgressControl/ProgressBarDemo. xaml

<Page x: Class = "Windows10.Controls. ProgressControl. ProgressBarDemo" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: local =" using: Windows10.Controls. ProgressControl "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "Xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "Mc: Ignorable =" d "> <Grid Background =" Transparent "> <StackPanel Margin =" 10 0 10 10 "> <! -- ProgressBar-progress bar control IsIndeterminate-whether it is a progress bar that cannot be determined ShowPaused-display pause status ShowError-Display Error status note: You can use Foreground and Background to set the color of partial states of ProgressBar, for more style settings, modify the control template --> <ProgressBar IsIndeterminate = "True" Width = "200" HorizontalAlignment = "Left" Foreground = "Orange" Background = "Red" ShowPaused = "{Binding IsChecked, elementName = radPaused} "ShowError =" {Binding IsChecked, elementName = radError} "/> <ProgressBar IsIndeterminate =" False "Width =" 200 "Minimum =" 0 "Maximum =" 100 "Value =" 50 "HorizontalAlignment =" Left "Margin = "0 20 0 0" Foreground = "Orange" Background = "Red" ShowPaused = "{Binding IsChecked, elementName = radPaused} "ShowError =" {Binding IsChecked, ElementName = radError} "/> <StackPanel Orientation =" Horizontal "Margin =" 0 20 0 "> <RadioButton x: name = "radRunning" GroupName = "ProgressState" Content = "Running" IsChecked = "True"/> <RadioButton x: name = "radPaused" GroupName = "ProgressState" Content = "Paused"/> <RadioButton x: name = "radError" GroupName = "ProgressState" Content = "Error"/> </StackPanel> </Grid> </Page>

Controls/ProgressControl/ProgressBarDemo. xaml. cs

/** ProgressBar-progress bar control (inherited from RangeBase, see/Controls/ProgressControl/RangeBaseDemo. xaml) */using Windows. UI. xaml. controls; namespace Windows10.Controls. progressControl {public sealed partial class ProgressBarDemo: Page {public ProgressBarDemo () {this. initializeComponent ();}}}

4. Example of ProgressRing
Controls/ProgressControl/ProgressRingDemo. xaml

<Page x: Class = "Windows10.Controls. progressControl. progressRingDemo "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: local =" using: Windows10.Controls. progressControl "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc: Ignorable =" d "> <Grid B Ackground = "Transparent"> <StackPanel Margin = "10 0 10"> <! -- ProgressRing-Progress ring control IsActive-show or not --> <ProgressRing Margin = "5" Foreground = "White" Width = "200" Height = "200" HorizontalAlignment = "Left" IsActive = "{Binding IsChecked, elementName = chkIsActive} "/> <CheckBox Name =" chkIsActive "Margin =" 5 "Content =" IsActive "IsChecked =" True "/> </StackPanel> </Grid> </Page>

Controls/ProgressControl/ProgressRingDemo. xaml. cs

/** ProgressRing-Progress Ring Control (inherited from Control, see/Controls/BaseControl/ControlDemo/) */using Windows. UI. xaml. controls; namespace Windows10.Controls. progressControl {public sealed partial class ProgressRingDemo: Page {public ProgressRingDemo () {this. initializeComponent ();}}}

OK
[Download source code]