[WinUI 3][ColorPicker] 詳細ボタンの表示/非表示を切り替える

ColorPicker には[詳細]ボタンがあります。

この記事では[詳細]ボタンの表示/非表示を切り替えて「RGB」「赤」「緑」「青」といった詳細項目を表示/非表示にする方法について説明します。

環境

[詳細]ボタンの表示/非表示を切り替える

XAML による[詳細] ボタンの表示/非表示の切り替え

以下は ColorPicker の下に CheckBox を配置し、チェックのオン/オフで [詳細]ボタン（「さらに表示」）の表示/非表示を切り替える例です。

[詳細]ボタン（「さらに表示」）は、IsMoreButtonVisible プロパティに True を設定すると表示されます。

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

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top">
        <ColorPicker x:Name="myColorPicker" IsMoreButtonVisible="{x:Bind myCheckBox.IsChecked.Value, Mode=OneWay}"/>
        <CheckBox x:Name="myCheckBox" Content="さらに表示" IsChecked="True" Margin="10,50"/>
    </StackPanel>
</Window>

[詳細]ボタン（「さらに表示」）を表示/非表示する

コードで [詳細]ボタン（「さらに表示」）を表示/非表示する

コードで IsMoreButtonVisible プロパティに true/false を設定して[詳細]ボタン（「さらに表示」）を表示/非表示する例を以下に示します。

この例では チェックボックスのオン/オフで、ColorPicker の [詳細]ボタンを表示/非表示時にします。

private void myCheckBox_Checked(object sender, RoutedEventArgs e)
{
    myColorPicker.IsMoreButtonVisible = true;
}
private void myCheckBox_Unchecked(object sender, RoutedEventArgs e)
{
    myColorPicker.IsMoreButtonVisible = false;
}

XAML は以下の通りです。

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

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top">
        <ColorPicker x:Name="myColorPicker"/>
        <CheckBox x:Name="myCheckBox" Content="さらに表示"
                  IsChecked="True" Checked="myCheckBox_Checked" 
                  Unchecked="myCheckBox_Unchecked"
                  Margin="10,50"/>
    </StackPanel>
</Window>

[詳細]ボタン（「さらに表示」）を表示/非表示する

WinUI 3 Tips一覧

WinUI 3 のTips 一覧はこちら

Please follow and like us: