LoginSignup
0
0

More than 3 years have passed since last update.

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

Posted at

はじめに

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="性別"/>

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

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

解決方法

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);
        }

修正前
image.png
修正後
image.png

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0