MaterialDesign의 ComboBox HasClearButton 크기 변경

4863 단어 MaterialDesignC#WPF

소개



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

수정 전

수정 후


조금의 수정입니다만, 생각보다 보기 쉬워진 것이 아닐까 생각합니다.

좋은 웹페이지 즐겨찾기