[WinUI 3][ColorPicker] HEXカラーテキストボックスの表示/非表示を切り替える

スポンサーリンク

この記事では ColorPicker のHEXテキストボックスの表示/非表示を切り替える方法について説明します。

HEX テキストボックス

HEX テキストボックス

環境

開発環境 Microsoft Visual Studio Professional 2019 Preview
Version 16.11.0 Preview 3.0
Framework Microsoft .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

HEX テキストボックスの表示/非表示を切り替える

XAML による HEX テキストボックスの表示/非表示の切り替え

以下は ColorPicker の下に CheckBox を配置し、チェックのオン/オフで HEX テキストボックスの表示/非表示を切り替える例です。

HEX テキストボックスの表示/非表示は、IsHexInputVisible プロパティに True を設定すると表示されます(既定値は True です)。

この例では ColorPicker を2つ並べて表示しており、左側は HEX テキストボックスを非表示にし、右側は HEX テキストボックスを表示しています。

<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="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="10">
            <ColorPicker x:Name="myColorPicker"
                         IsHexInputVisible="{x:Bind myCheckBox.IsChecked.Value, Mode=OneWay}"/>
            <CheckBox x:Name="myCheckBox"
                      Content="HEX テキストボックスの表示"
                      IsChecked="False" 
                      Margin="10,50"/>
        </StackPanel>
        
        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="10">
            <ColorPicker x:Name="myColorPicker2" 
                         IsHexInputVisible="{x:Bind myCheckBox2.IsChecked.Value, Mode=OneWay}"/>
            <CheckBox x:Name="myCheckBox2" 
                      Content="HEX テキストボックスの表示" 
                      IsChecked="True" 
                      Margin="10,50"/>
        </StackPanel>
    </StackPanel>
</Window>
HEX テキストボックスの表示/非表示

HEX テキストボックスの表示/非表示

コードで HEX テキストボックスを表示/非表示する

コードで IsHexInputVisible プロパティに true/false を設定して HEX テキストボックスを表示/非表示する例を以下に示します。

この例では チェックボックスのオン/オフで、ColorPicker の HEX テキストボックスを表示/非表示時にします。

private void myCheckBox_Checked(object sender, RoutedEventArgs e)
{
    myColorPicker.IsHexInputVisible = true;
}
private void myCheckBox_Unchecked(object sender, RoutedEventArgs e)
{
    myColorPicker.IsHexInputVisible = 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" 
                        IsHexInputVisible="True"/>
        <CheckBox x:Name="myCheckBox" 
                    Content="HEX テキストボックスの表示" 
                    IsChecked="True" 
                    Checked="myCheckBox_Checked" 
                    Unchecked="myCheckBox_Unchecked" 
                    Margin="10,50"/>
    </StackPanel>
</Window>

WinUI 3 Tips一覧

WinUI 3 のTips 一覧はこちら

Please follow and like us:

コメント

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