WIN10 series: C # App Control Basics 7

Slider control

The slider control contains a slider bar, a slider and a range of values, and moving the slider along the slider bar allows you to change the value of the slider control within the value range. slider controls can be used for a wide range of purposes, such as using slider controls to set and represent the sound volume, screen contrast, and so on.

In a XAML file, the use of the slider control is as follows:

<slider?.../>

here 's a look Slider Common Properties of the control:

• The Value property to get or set the values of the slider control's current position.
• The minimum property, gets or sets the minimum value that the slider control's Value property can accept, and the default value is 0.
• The Maximun property, Gets or sets the maximum value that the slider control's Value property can accept, and the default value is 100.
• Orientation property, Gets or sets the orientation of the slider control.

After describing the common properties, take a look at the common events of the slider control:

• The ValueChanged event, which is triggered when the Value property has changed.
• The tapped event, which is triggered when you click the area of the slider control.

Next, use the slider control to design an example of an application that shows the value change of the Values property.

Create a blank application project with the Windows store named "Sliderdemo" and add the following code to the grid element of the MainPage.xaml file.

<slider horizontalalignment= "left" margin= "256,103,0,0" minimum= "0" maximum= "ten" verticalalignment= "Top" Width= " 186 "height=" Wuyi "valuechanged=" slider_valuechanged "/>

<!--" Move the slider to change the display value " Text Block -

<textblock horizontalalignment= "left" margin= "256,51,0,0" textwrapping= "Wrap" text= " Move the slider to change the display value "fontsize=" verticalalignment= "Top" width= "186" height= " />"

<!--" Display values: 0 " Text Block -

<textblock horizontalalignment= "left" name= "Shownumber" margin= "256,142,0,0" text= " Display values: 0 "fontsize=" "textwrapping=" Wrap "verticalalignment=" Top "width=" 107 "height="/>

in the preceding code, a slider control is added and the ValueChanged Event Registration processing method slider_valuechanged is used to move the slider bar to get the value of the Value property. Then set the slider control's Minimum property value to the 0,maximum property value of 10. Then add two TextBlock text blocks to display the "Move slider to change display value" and "Show Value: 0" text message respectively.

Double-click the open MainPage.xaml.cs file for the slider control's ValueChanged event Add Processing method slider_valuechanged, used to move the slider to change the "display value: 0" text content , the code is as follows:

// Change the display value: 0 the text information

private void Slider_valuechanged (object sender, Rangebasevaluechangedeventargs e)

{

string selectmessage = String.Format (" display value : {0}", e.newvalue);

Shownumber.text = Selectmessage;

}

In the above code, the parameter e The NewValue property gets the value that is generated when the slider is moved, formats the value with the Format method, and assigns a value to the variable selectedmessage of type string. Finally, the Selectedmessage variable is displayed in the Shownumber control of the foreground interface.

Run the program, display two text messages and a slider bar on the interface, and two text messages for "Move slider to change display value" and "Show Value: 0", Effect 4-13 shown. Use your mouse or your finger to move the slider to the "3" position, "show Value: 0" The text message changes to "Show Value: 3", Effect 4-14 is shown.

Figure 4-13 The effect of moving the slider before the effect figure 4-14 after moving the slider

WIN10 series: C # App Control Basics 7