MaterialDesignのComboBox HasClearButtonの大きさを変更する

4954 ワード
MaterialDesign C# WPF C# テキストリンク

はじめに

WPF MaterialDesignは便利なのですが、時々表示が大きすぎたりとやや使い勝手に癖があります。
ComboBoxを使用した際に、選択したものをクリアするために、クリアボタンが表示させることができます。

    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

    <ComboBox x:Name="GenderComboBox" Width="60" 
                materialDesign:TextFieldAssist.HasClearButton="True"
                ItemsSource="{Binding ItemsGenderValue}" 
                Text="{Binding Gender.Value, UpdateSourceTrigger=PropertyChanged}" 
                materialDesign:HintAssist.Hint="性別"/>

以下のような表示になります

ただ、このクリアボタンが大きくて、見栄えが良くありません。もう少し小さいほうがいいし、押し間違いしないかと思います。

解決方法

xaml側で何とかできないかと考えましたが、スタイルをかなりいじることになりそうで面倒でした。
ということで、簡単な解決方法ですが、コードビハインドでフォームロード時に変更してしまえというものです。

まず、クリアボタンですが、これはComboBoxのPART_ClearButtonで定義されています。
これをScaleTransformでサイズを指定します。
ただ、これだとちょっと位置ずれが起きたので、クリアボタンのpaddingで調整します。
実際、標準のスタイルでもpaddingで位置調整していたので、この対策で問題ないかと思います。
で、以下が、対策後のコードとなります
ちなみに、この例では、Windowではなく、Prismを使用している関係でUserControlとなっています。

        private void UserControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            // ComboBoxのClearButtonを取得します 
            Button genderComboBoxclearButton = GenderComboBox.Template.FindName("PART_ClearButton", GenderComboBox) as Button;

            // ComboBoxのClearButtonの大きさを少し小さめにします 
            ScaleTransform st = new ScaleTransform(0.75,0.75);
            genderComboBoxclearButton.RenderTransform = st;

            // ComboBoxのClearButtonの表示位置を調整します
            genderComboBoxclearButton.Padding = new System.Windows.Thickness(2, 4, -5, -4);
        }

修正前

修正後

ほんのちょっとの修正ですが、思ったより見やすくなったのではないかと思います。