[WinUI 3][ToggleButton] 3つの状態を使用できるようにする

スポンサーリンク

ToggleButton は「押下された状態」、「押下されていない状態」の他に「不定(どちらでもない)」という状態を表すことができます。

この記事では ToggleButton で3つの状態を使用する方法について説明します。

スポンサーリンク

環境

開発環境Microsoft Visual Studio Professional 2019 Preview
Version 16.11.0 Preview 3.0
FrameworkMicrosoft .NET Framework Version 4.8.04084
その他Microsoft.Project Reunion 0.8.0-preview
Microsoft.ProjectReunion.Foundation 0.8.0-preview
Microsoft.ProjectReunion.WinUI 0.8.0-preview
Microsoft.UI.Xaml 2.6.1
スポンサーリンク

ToggleButton で3つの状態を使用する

ToggleButton で「押下された状態」「押下されていない状態」「不定(どちらでもない)」の3つの状態を使用するには、IsThreeState プロパティに True を設定します。既定では False になっています。

また、IsThreeState = True に設定した ToggleButton は、状態によって Checked イベント(押下された状態)、Unchecked イベント(押下が解除された状態)、Indeterminate イベント(不定状態) のいずれかが発生します。

以下の例は、IsThreeState プロパティに True を設定して3つの状態を使用できるようにし、変化した状態の内容を TextBlock に表示します。

XAML の例

<Window
    x:Class="WinUISample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUISample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
        <ToggleButton x:Name="myToggleButton" Content="ToggleButton" 
                      IsThreeState="True"
                      Checked="myToggleButton_Checked"
                      Unchecked="myToggleButton_Unchecked"
                      Indeterminate="myToggleButton_Indeterminate"/>
        <TextBlock x:Name="myTextBlock" />
    </StackPanel>
</Window>

C# の例

private void myToggleButton_Checked(object sender, RoutedEventArgs e)
{
    myTextBlock.Text = "ToggleButton = ON";
}

private void myToggleButton_Unchecked(object sender, RoutedEventArgs e)
{
    myTextBlock.Text = "ToggleButton = OFF";
}

private void myToggleButton_Indeterminate(object sender, RoutedEventArgs e)
{
    myTextBlock.Text = "ToggleButton = Null";
}
Cheked 状態の例

Cheked 状態の例

Unchecked 状態の例

Unchecked 状態の例

Indeterminate 状態の例

Indeterminate 状態の例

Please follow and like us:

コメント

タイトルとURLをコピーしました