[C#프로그래밍] [WPF] PC 카카오톡 만들기 #08 - ComboBox Background 변경하기

 

 

https://www.youtube.com/watch?v=sKy4QHwMVjk&list=PLlrfTSXS0LLKHfOfwM31jJw3SHuDnkF49&index=9

 

📌 Combobox Background color 수정하기

- ComboBox는 Background가 변화되지 않음 

    <StackPanel>
        <TextBlock Text="combobox"/>
        <ComboBox Background="Red" Margin="5 0"/>
    </StackPanel>

 

- Combobox 선택 후 템플릿 변경 - 복사본 편집 - 확인을 누르면 콤보박스가 만들어져있는 코드를 볼 수 있는데, 여기서 우리가 배경색을 수정하기 위해 봐야하는 코드는 ToggleButton에 있는 ControlTemplate.Triggers 부분이다. 

 

- Combobox에 데이터가 입력이 되었을 때에 대한 부분은 PART_EditableTextBox 라는 이름이 지정되어있는 TextBox이다. 

 

이 두 부분을 수정해야 color가 수정 된다. 

 

📌 Background color 변경하기

- 위 코드를 먼저 잠시 지운 후 (되돌린 후) Combobox 에 x:Name 지정한다.

- MainWindow.xaml

    <StackPanel>
        <TextBlock Text="combobox"/>
        <ComboBox x:Name="cmb"  Background="Red" Margin="5 0"/>
    </StackPanel>

실행을 해 보면 toggle 버튼이 찾아지지 않는데, 토글버튼이 로드가 된 후 만들어지기 때문이다.

로그가 된 후 toggle버튼을 찾는 방식으로 코드를 수정 해 준다.

- MainWindow.xaml

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Loaded += MainWindow_Loaded;

        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {

            //토글버튼 찾아서 가져오기 
            var toggleButton =  (ToggleButton)cmb.Template.FindName("toggleButton", cmb);

            //토글 버튼이 없을 수 있으니 토글버튼이 없는 경우 toggleButton안에 있는templateRoot의  border를 찾아 그 border가 존재하면
            //background color를 변경 해 준다. 
            if (toggleButton != null )
            {
                var border = (Border)toggleButton.Template.FindName("templateRoot", toggleButton);
                if(border != null)
                {
                    border.Background = Brushes.Red;
                }
        }
    }

 

이까지하면 Combobox의 배경 색이 바뀐다.

 

📌 Editable 변경하기

- Combobox에 IsEditable="True" 속성을 넣으면 아래와 같이 변경되는데 이는 comboBox에 데이터(TextBox)가 들어 간 경우이다.

 

- MainWindow.xaml

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {

            ...
            
            //TextBox 색깔 변경
            var textBox = (TextBox)cmb.Template.FindName("PART_EditableTextBox", cmb);

            //텍스트 박스가 null이 아니면 parent를 구해서 Background를 지정
            if (textBox != null)
            {
                var parent = (Border)textBox.Parent;
                parent.Background = Brushes.Blue;
            }
        }

 

- 위 코드를 클래스파일 ComboBoxBackgroundExtension 을 생성하여 함수로 만들어준다.

- ComboBoxBackgroundExtension.cs

namespace WpfAttachedProperty
{
    public static class ComboBoxBackgroundExtension
    {
        public static void SetBackground(this ComboBox combo, Brush brush)
        {
            //아까 만들었던 코드 잘라 붙여넣기
            //토글버튼 찾아서 가져오기 
            var toggleButton = (ToggleButton)combo.Template.FindName("toggleButton", combo);

            //토글 버튼이 없을 수 있으니 토글버튼이 없는 경우 toggleButton안에 있는templateRoot의  border를 찾아 그 border가 존재하면
            //background color를 변경 해 준다. 
            if (toggleButton != null)
            {
                var border = (Border)toggleButton.Template.FindName("templateRoot", toggleButton);
                if (border != null)
                {
                    border.Background = brush;
                }
            }

            //TextBox 색깔 변경
            var textBox = (TextBox)combo.Template.FindName("PART_EditableTextBox", combo);

            //텍스트 박스가 null이 아니면 parent를 구해서 Background를 지정
            if (textBox != null)
            {
                var parent = (Border)textBox.Parent;
                parent.Background = brush;
            }
        }
    }
}

 

- MainWindow.xaml.cs

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Loaded += MainWindow_Loaded;

        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {

            cmb.SetBackground(Brushes.Red);
        }
    }
}

위과 같이 수정 후 다시 실행하면 Background Color가 전부 변경된 것을 확인 할 수 있다.