WIN10 series: C # App Control Basics 8

Toggleswitch controls

In the application, the Toggleswitch control simulates a physical switch that allows the user to switch between enabling and disabling the two states, and the Toggleswitch control is similar to the power switch we use in our daily life.

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

<toggleswitch .../>

The following describes the common properties of the Toggleswitch control:

• Header property, Gets or sets the caption content of the Toggleswitch control.
• The Offcontent property displays text content using the Offcontent property when the Toggleswitch control is disabled.
• The Oncontent property displays text content using the Oncontent property when the Toggleswitch control is enabled.

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

• The toggled event, which is triggered when the state of the Toggleswitch control has changed.
• The tapped event, which is triggered when the text area of the Toggleswitch control is clicked.

Next, use the Toggleswitch control to design a switch that toggles the toggle to show different effects.

Create a new Windows store blank application project and name Toggleswitchdemo to add the following code to the grid element of the MainPage.xaml file.

<toggleswitch name= "Mytoggleswitch" header= "Toggleswitch Control Example "Offcontent=" disabled State "Fontsize=" " oncontent= " Enable status "toggled=" toggleswitch_toggled "horizontalalignment=" Center "margin=" 543,338,618,343 "/>

<progressring name= "myprogressring" width= "" "Height=" margin= "" 748,359,568,359 "/>

In the preceding code, you add a Toggleswitch control that defines the value of its header property as "Toggleswitch Control Sample", the value of the Offcontent property to "disabled state", and the value of the Oncontent property to "enabled state". The event-handling method toggleswitch_toggled is then registered for the toggled event so that different effects are displayed when the Toggleswitch control is toggled. To better display the contrast, an indeterminate progress ring progressring control (described in section 4.4.4 of the progressring control) is added. The Name property of the Progressring control is then defined as the value of the Myprogressring,width property and the height property of 50.

After layout of the foreground interface, open the MainPage.xaml.cs file and add toggleswitch_toggled processing method for the toggled event of the Toggleswitch control. When you toggle the Toggleswitch control, this control is enabled or disabled to show or hide the indeterminate progress ring. The code looks like this:

private void Toggleswitch_toggled (object sender, RoutedEventArgs e)

{

if (Mytoggleswitch.ison = = True)

{

// Show indeterminate progress loops and animation effects

Myprogressring.isactive = true;

myprogressring.visibility = visibility.visible;

}

Else

{

// Hide Indeterminate Progress loops

Myprogressring.isactive = false;

myprogressring.visibility = visibility.collapsed;

}

}

In the above code, the current state of the switch is judged by the Ison property of the Mytoggleswitch toggle switch, and the value of its Ison property is true when the toggle switch is enabled. Sets the value of the IsActive property and Visibility property of the myprogressring indeterminate progress ring to True and Visibility, respectively. Visible, which displays the indeterminate progress loop and displays the animation effect.

when the toggle switch is disabled, the value of its Ison property is false, and the value of the IsActive property and Visibility property of the myprogressring indeterminate progress ring are set to false and Visibility . Collapsed, so that the indeterminate progress ring is hidden.

Run the program, the Toggleswitch control is disabled by default, 4-15, after the toggle switch, the Toggleswitch control is set to the enabled state, the interface will show the animation effect of the indeterminate progress ring, 4-16.

Figure 4-15 Toggleswitch Control Example--toggle switch Front diagram 4-16 Toggleswitch Control Example--toggle Switch

WIN10 series: C # App Control Basics 8