Win10系列:C#应用控件基础8

ToggleSwitch控件

在应用程序中ToggleSwitch控件可以模拟一个允许用户在启用和禁用两种状态之间进行切换的物理开关,ToggleSwitch控件的功能与我们在日常生活中所使用的电源开关类似。

在XAML文件中,ToggleSwitch控件的用法如下所示:

<ToggleSwitch .../>

下面介绍一下ToggleSwitch控件的常用属性:

  • Header属性,获取或设置ToggleSwitch控件的标题内容。
  • OffContent属性,当ToggleSwitch控件是禁用状态时,使用OffContent属性显示文本内容。
  • OnContent属性,当ToggleSwitch控件是启用状态时,使用OnContent属性显示文本内容。

介绍完常用属性后,接着来看一下ToggleSwitch控件的常用事件:

  • Toggled事件,当ToggleSwitch控件的状态发生改变时触发。
  • Tapped事件,当单击ToggleSwitch控件的文字区域时触发。

接下来使用ToggleSwitch控件设计一个开关,拨动开关可以显示不同的效果。

新建一个Windows应用商店的空白应用程序项目,并命名为ToggleSwitchDemo,在MainPage.xaml文件的Grid元素中添加如下代码。

<ToggleSwitch Name="MyToggleSwitch" Header="ToggleSwitch控件示例" OffContent="禁用状态" FontSize="20" OnContent="启用状态" Toggled="ToggleSwitch_Toggled" HorizontalAlignment="Center" Margin="543,338,618,343"/>

<ProgressRing Name="MyProgressRing" Width="50" Height="50" Margin="748,359,568,359"/>

在上面的代码中,添加了一个ToggleSwitch控件,定义其Header属性的值为"ToggleSwitch控件示例"、OffContent属性的值为"禁用状态"以及OnContent属性的值为"启用状态",然后为Toggled事件注册了事件处理方法ToggleSwitch_Toggled,以便在拨动ToggleSwitch控件时显示不同效果。为了更好的显示对比效果,添加了一个不确定进度环ProgressRing控件(在4.4.4小节将对ProgressRing控件进行介绍)。接着定义ProgressRing控件的Name属性为MyProgressRing,Width属性和Height属性的值为50。

布局好前台界面后,打开MainPage.xaml.cs文件,为ToggleSwitch控件的Toggled事件添加ToggleSwitch_Toggled处理方法,当拨动ToggleSwitch控件时会启用或禁用此控件以便显示或隐藏不确定进度环。代码如下所示:

private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)

{

if (MyToggleSwitch.IsOn == true)

{

//显示不确定进度环和动画效果

MyProgressRing.IsActive = true;

MyProgressRing.Visibility = Visibility.Visible;

}

else

{

//隐藏不确定进度环

MyProgressRing.IsActive = false;

MyProgressRing.Visibility = Visibility.Collapsed;

}

}

在上面的代码中,通过MyToggleSwitch拨动开关的IsOn属性来判断开关的当前状态,当拨动开关处于启用状态时,其IsOn属性的值为true,设置MyProgressRing不确定进度环的IsActive属性和Visibility属性的值分别为true和Visibility.Visible,使不确定进度环显示出来并显示动画效果。

拨动开关处于禁用状态时,其IsOn属性的值为false,设置MyProgressRing不确定进度环的IsActive属性和Visibility属性的值分别为false和Visibility.Collapsed,使不确定进度环隐藏。

运行程序,ToggleSwitch控件默认处于禁用状态,如图4-15所示,拨动开关后,将ToggleSwitch控件设置到启用状态,界面将显示带有动画效果的不确定进度环,如图4-16所示。

图4-15 ToggleSwitch控件示例——拨动开关前 图4-16 ToggleSwitch控件示例——拨动开关后

原文地址:https://www.cnblogs.com/finehappy/p/6648452.html