[WPF][C#]ビットイメージ配列位置選択数値変換ユーザコントロール

タイトル長！

通信系のデータを扱う場合、こういうエディタがあると喜ばれるので、作ってみた。
絵でいうとこんなかんじ。

１６個の四角枠のところがユーザコントロール。
ビットが立っているところが水色。
マウスオーバーはオレンジ。

ToggleButton で ON/OFF を表現している。

int <=> byte[4] <=> BitArray(16)

ToggleButton の IsChecked とBitArray[0] 〜 BitArray[15] がデータバインドしている。

ちょっと長くなるが、コードを一式貼付ける。

    /// <summary>

    /// ビット配列イメージ

    /// </summary>

    public partial class BitArraySelect : UserControl

    {

        /// <summary>

        /// データプロパティ

        /// </summary>

        public static readonly DependencyProperty DataProperty = DependencyProperty.Register("Data", typeof(int),

                                                                 typeof(BitArraySelect), 

                                                                 new FrameworkPropertyMetadata(0, new PropertyChangedCallback(OnDataChanged)));

        /// <summary>

        /// データを取得または設定する

        /// </summary>

        public int Data

        {

            get { return (int)GetValue(DataProperty); }

            set { SetValue(DataProperty, value); }

        }

        /// <summary>

        /// データ変更イベント

        /// </summary>

        /// <param name="d"></param>

        /// <param name="e"></param>

        private static void OnDataChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

        {

            ((BitArraySelect)d).Update();

        }

        /// <summary>

        /// ビット配列イメージ

        /// </summary>

        private BitImageWrapper bitArrayImage = new BitImageWrapper();

        /// <summary>

        /// コンストラクタ

        /// </summary>

        public BitArraySelect()

        {

            InitializeComponent();

            this.DataContext = this.bitArrayImage;

            this.Loaded += (sender, e) => { Update(); };

        }

        /// <summary>

        /// トグルボタンクリック

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void ToggleButton_Click(object sender, RoutedEventArgs e)

        {

            byte[] data = new byte[4];

            this.bitArrayImage.Data.CopyTo(data, 0);

            this.Data = BitConverter.ToInt32(data, 0);

        }

        /// <summary>

        /// 更新

        /// </summary>

        public void Update()

        {

            this.bitArrayImage.Data = new BitArray(BitConverter.GetBytes(this.Data));

        }

    }

    /// <summary>

    /// ビットイメージラッパー

    /// </summary>

    public class BitImageWrapper : INotifyPropertyChanged

    {

        /// <summary>

        /// ビット配列

        /// </summary>

        private BitArray data = new BitArray(16);

        /// <summary>

        /// ビット配列データを取得または設定します。

        /// </summary>

        public BitArray Data

        {

            get { return data; }

            set

            {

                data = value;

                OnPropertyChanged("Data");

            }

        }

        /// <summary>

        /// プロパティ変更イベントハンドラ

        /// </summary>

        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>

        /// プロパティ変更処理

        /// </summary>

        /// <param name="name">プロパティ名</param>

        public void OnPropertyChanged(string name)

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this, new PropertyChangedEventArgs(name));

            }

        }

    }

<UserControl x:Class="WpfValueBitImage.BitArraySelect"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

             xmlns:local="clr-namespace:WpfValueBitImage"

             mc:Ignorable="d" 

             d:DesignHeight="60" d:DesignWidth="480" Width="480" Height="30">

    <UserControl.Resources>

        <LinearGradientBrush x:Key="PressedGradientBrush" 

            StartPoint="0.5,0" EndPoint="0.5,1">

            <GradientStop Color="White" Offset="0" />

            <GradientStop Color="LightBlue" Offset="1" />

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="MouseOverGradientBrush" 

            StartPoint="0.5,0" EndPoint="0.5,1">

            <GradientStop Color="White" Offset="0" />

            <GradientStop Color="#FFFFD452" Offset="1" />

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="SelectedGradientBrush" 

            StartPoint="0.5,0" EndPoint="0.5,1">

            <GradientStop Color="#FFEBFAFF" Offset="0" />

            <GradientStop Color="#FFA2E0FB" Offset="1" />

        </LinearGradientBrush>

        <Style TargetType="{x:Type ToggleButton}">

            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>

            <Setter Property="Foreground" Value="Black"/>

            <Setter Property="Background" Value="White"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type ToggleButton}">

                        <Grid>

                            <Border BorderBrush="Gray" BorderThickness="0" CornerRadius="0"  Width="{TemplateBinding Property=Button.Width}" Height="{TemplateBinding Property=Button.Height}" Background="{TemplateBinding Property=Foreground}">

                                <Rectangle  Fill="{TemplateBinding Property=Background}"/>

                            </Border>

                            <TextBlock Text="{TemplateBinding ToggleButton.Content}" HorizontalAlignment="Center" VerticalAlignment="Center"  />

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

            <Style.Triggers>

                <Trigger Property="IsPressed" Value="true">

                    <Setter Property="Foreground" Value="Red" />

                    <Setter Property="Background" Value="{StaticResource PressedGradientBrush}" />

                </Trigger>

                <Trigger Property="IsChecked" Value="true">

                    <Setter Property="Background" Value="{StaticResource SelectedGradientBrush}" />

                </Trigger>

                <MultiTrigger>

                    <MultiTrigger.Conditions>

                        <Condition Property="IsMouseOver" Value="True" />

                        <Condition Property="IsChecked" Value="False" />

                        <Condition Property="IsPressed" Value="False" />

                    </MultiTrigger.Conditions>

                    <Setter Property="Background" Value="{StaticResource MouseOverGradientBrush}" />

                </MultiTrigger>

            </Style.Triggers>

        </Style>

        <Style x:Key="BorderStyle" TargetType="{x:Type Border}">

            <Setter Property="Width" Value="30" />

            <Setter Property="Height" Value="30" />

            <Setter Property="BorderBrush" Value="Gray" />

            <Setter Property="BorderThickness" Value="1,1,0,1" />

        </Style>

    </UserControl.Resources>

    <Grid>

        <StackPanel Orientation="Horizontal">

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="F" IsChecked="{Binding Path=Data[15], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="E" IsChecked="{Binding Path=Data[14], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="D" IsChecked="{Binding Path=Data[13], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="C" IsChecked="{Binding Path=Data[12], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="B" IsChecked="{Binding Path=Data[11], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="A" IsChecked="{Binding Path=Data[10], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="9" IsChecked="{Binding Path=Data[9], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="8" IsChecked="{Binding Path=Data[8], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="7" IsChecked="{Binding Path=Data[7], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="6" IsChecked="{Binding Path=Data[6], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="5" IsChecked="{Binding Path=Data[5], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="4" IsChecked="{Binding Path=Data[4], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="3" IsChecked="{Binding Path=Data[3], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="2" IsChecked="{Binding Path=Data[2], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}">

                <ToggleButton Content="1" IsChecked="{Binding Path=Data[1], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

            <Border Style="{StaticResource BorderStyle}" BorderThickness="1">

                <ToggleButton Content="0" IsChecked="{Binding Path=Data[0], Mode=TwoWay}" Click="ToggleButton_Click"/>

            </Border>

        </StackPanel>

    </Grid>

</UserControl>

サンプルの画像は上部にあるテキストボックスの Text プロパティ とこのユーザコントロールの Data プロパティがバインディングで連結されている。

Data="{Binding Path=Text, Mode=TwoWay, ElementName=textBox}"

関連

• [C#]Shift-jis文字列 <-> JIS7バイト配列 変換
• [C#]１６進数文字列をバイト配列に変換
• [WPF][C#]ビットイメージ配列位置選択数値変換ユーザコントロール
• [C#]ビット配列とかバイト配列とか
• [C#]配列の結合
• [C#]配列の初期化