トグル スイッチを追加する方法 (XAML)

このチュートリアルでは、C++、C#、または Visual Basic で開発された Windows ランタイム アプリにトグル スイッチを追加する手順について説明します。

通常、トグル スイッチは、Extensible Application Markup Language (XAML) エディターで追加するか、Blend for Visual Studio などのデザイン ツールを使って追加します。トグル スイッチを実行時にコードから追加することもできます。

ロードマップ: このトピックと他のトピックとの関連については、以下をご覧ください。

理解しておく必要があること

テクノロジ

必要条件

手順

ステップ 1: XAML でトグル スイッチを追加する

Hh868198.wedge(ja-jp,WIN.10).gifXAML でトグル スイッチを追加するには

  1. ToggleSwitch コントロールを親コンテナーに追加します。
  2. トグル スイッチに名前を割り当てるために、x:Name 属性に文字列値を設定します。

    コード内でコントロールを参照するには名前が必要です。それ以外の場合、名前は不要です。

  3. トグル スイッチにヘッダーを割り当てるために、Header プロパティに文字列値を設定します。
  4. トグル スイッチがオンのときに表示されるラベルを割り当てるために、OnContent プロパティに文字列値を設定します。
  5. トグル スイッチがオフのときに表示されるラベルを割り当てるために、OffContent プロパティに文字列値を設定します。
  6. トグル スイッチの状態が変化したときにアクションを実行するため、Toggled イベントのハンドラーを追加します。Toggled イベント ハンドラーに、何かアクションを実行するためのコードを追加します。
    
    <ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch" 
                  OnContent="On" OffContent="Off" 
                  Toggled="ToggleSwitch_Toggled"/>
    
    
    
    
    private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
    {
        // Add code to perform some action here.
    }
    
    
    

    Toggled イベント以外でコントロールの状態をチェックするには、IsOn プロパティを使います。

ステップ 2: コードからトグル スイッチを追加する

Hh868198.wedge(ja-jp,WIN.10).gifコードからトグル スイッチを追加するには

  1. 新しい ToggleSwitch を作ります。
  2. トグル スイッチにヘッダーを割り当てるために、Header プロパティに文字列値を設定します。
  3. トグル スイッチがオンのときに表示されるラベルを割り当てるために、OnContent プロパティに文字列値を設定します。
  4. トグル スイッチがオフのときに表示されるラベルを割り当てるために、OffContent プロパティに文字列値を設定します。
  5. トグル スイッチの状態が変化したときにアクションを実行するため、Toggled イベントのハンドラーを追加します。Toggled イベント ハンドラーに、何かアクションを実行するためのコードを追加します。
  6. UI にトグル スイッチを表示するために、ビジュアル ツリーで ToggleSwitch を親コンテナーに追加します。
    
    // Create a new toggle switch, set it's content, 
    // and add a Toggled event handler.
    ToggleSwitch toggleSwitch1 = new ToggleSwitch();
    toggleSwitch1.Header = "Toggle Switch";
    toggleSwitch1.OnContent = "On";
    toggleSwitch1.OffContent = "Off";
    toggleSwitch1.Toggled += ToggleSwitch_Toggled;
    
    // Add the toggle switch to a parent container in the visual tree.
    stackPanel1.Children.Add(toggleSwitch1);
    
    
    
    
    private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
    {
        // Add code to perform some action here.
    }
    
    
    

    Toggled イベント以外でコントロールの状態をチェックするには、IsOn プロパティを使います。

ステップ 3: デザイン ツールを使ってトグル スイッチを追加する

Hh868198.wedge(ja-jp,WIN.10).gifデザイン ツールを使ってトグル スイッチを追加するには

  1. ToggleSwitch コントロールを選びます。
    • Microsoft Visual Studio の場合は、[ツールボックス] ウィンドウで ToggleSwitch を選びます。
    • Blend for Visual Studio の場合は、[アセット] ウィンドウの ToggleSwitch を選びます。

      [アセット] ウィンドウの左側にある [コントロール] を選択します (選択されていない場合)。

  2. デザイン サーフェイスに ToggleSwitch を追加します。次のいずれかの操作を行います。
    • トグル スイッチをダブルクリックします。既定の位置とサイズ設定で、選択した親コンテナーにトグル スイッチが追加されます。
    • デザイン サーフェイスにトグル スイッチをドラッグし、ドロップします。ドロップした位置に、既定のサイズとコンテンツ設定でトグル スイッチが追加されます。
    • デザイン サーフェイスにトグル スイッチ コントロールを描画します。描画したサイズと位置設定でトグル スイッチが追加されます。
  3. 必要に応じて、ToggleSwitch に名前を割り当てます。トグル スイッチを選択状態にして、Name プロパティのテキスト ボックスに名前を入力します。

    Name プロパティのテキスト ボックスは、[プロパティ] ウィンドウの一番上にあります。コード内でコントロールを参照するには名前が必要です。それ以外の場合、名前は不要です。

  4. ToggleSwitch のヘッダーを更新します。トグル スイッチを選択状態にして、Header プロパティのテキスト ボックスにコンテンツ文字列を入力します。

    [プロパティ] ウィンドウがカテゴリ別に表示されている場合、Header プロパティは、[共通] カテゴリに表示されます。

  5. 必要に応じて、ToggleSwitch がオンのときに表示されるラベルを更新します。トグル スイッチを選択状態にして、OnContent プロパティのテキスト ボックスにコンテンツ文字列を入力します。

    [プロパティ] ウィンドウがカテゴリ別に表示されている場合、OnContent プロパティは、[共通] カテゴリに表示されます。既定値は "On" です。

  6. 必要に応じて、ToggleSwitch がオフのときに表示されるラベルを更新します。トグル スイッチを選択状態にして、OffContent プロパティのテキスト ボックスにコンテンツ文字列を入力します。

    [プロパティ] ウィンドウがカテゴリ別に表示されている場合、OffContent プロパティは、[共通] カテゴリに表示されます。既定値は "Off" です。

  7. トグル スイッチの状態が変化したときにアクションを実行するため、Toggled イベントのハンドラーを追加します。Toggled イベント ハンドラーに、何かアクションを実行するためのコードを追加します。
    1. [プロパティ] ウィンドウの [イベント] ビューを選びます。
    2. デザイン サーフェイスでトグル スイッチを選択状態にし、次のいずれかの操作を行います。
      • Toggled イベントのテキスト ボックスをダブルクリックし、既定の名前でハンドラーを追加します。
      • Toggled イベントのテキスト ボックスに名前を入力し、Enter キーを押して、カスタムの名前でハンドラーを追加します。

関連トピック

ToggleSwitch
トグル スイッチのガイドラインとチェック リスト
C# または Visual Basic を使った Windows ランタイム アプリのためのロードマップ
C++ を使った Windows ランタイム アプリのためのロードマップ

 

 

表示:
© 2015 Microsoft