ColorPicker は、IsAlphaEnabled に true を設定すると、アルファチャンネル(不透明度)を変更できるようになり、アルファチャンネルを変更するスライダーとテキストボックスが表示されます。
この記事では ColorPicker のアルファチャンネルを変更するテキストボックスの表示/非表示を切り替える方法について説明します。
環境
開発環境 | 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 |
アルファチャンネル(不透明度)を変更するテキストボックスの表示/非表示を切り替える
XAML によるアルファチャンネル(不透明度)を変更するテキストボックスの表示/非表示の切り替え
以下は ColorPicker の下に CheckBox を配置し、チェックのオン/オフで アルファチャンネルを変更するテキストボックスの表示/非表示を切り替える例です。
アルファチャンネルを変更するテキストボックスの表示/非表示は、IsAlphaTextInputVisible プロパティに True を設定すると表示されます。
この例では ColorPicker を2つ並べて表示しており、左側がアルファチャンネルの変更をするテキストボックスを非表示にし、右側はテキストボックスを表示しています。
<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" IsAlphaEnabled="True" IsAlphaTextInputVisible="{x:Bind myCheckBox.IsChecked.Value, Mode=OneWay}" /> <CheckBox x:Name="myCheckBox" Content="不透明度テキストボックスの表示" IsChecked="False" Margin="10,50"/> </StackPanel> <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="10"> <ColorPicker x:Name="myColorPicker2" IsAlphaEnabled="True" IsAlphaTextInputVisible="{x:Bind myCheckBox2.IsChecked.Value, Mode=OneWay}" /> <CheckBox x:Name="myCheckBox2" Content="不透明度テキストボックスの表示" IsChecked="True" Margin="10,50"/> </StackPanel> </StackPanel> </Window>
コードで アルファチャンネル(不透明度)を変更するテキストボックスを表示/非表示する
コードで IsAlphaTextInputVisible プロパティに true/false を設定して[詳細]ボタン(「さらに表示」)を表示/非表示する例を以下に示します。
この例では チェックボックスのオン/オフで、ColorPicker の アルファチャンネル(不透明度)を変更するテキストボックスを表示/非表示時にします。
private void myCheckBox_Checked(object sender, RoutedEventArgs e) { myColorPicker.IsAlphaTextInputVisible = true; } private void myCheckBox_Unchecked(object sender, RoutedEventArgs e) { myColorPicker.IsAlphaTextInputVisible = 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" IsAlphaEnabled="True"/> <CheckBox x:Name="myCheckBox" Content="不透明度テキストボックスの表示" IsChecked="True" Checked="myCheckBox_Checked" Unchecked="myCheckBox_Unchecked" Margin="10,50"/> </StackPanel> </Window>
WinUI 3 Tips一覧
Please follow and like us:
コメント