Win10系列：C#應用控制元件基礎8

weixin_33896726發表於2017-03-30
Win10C#控制元件

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控制元件示例——撥動開關後

相關文章