034_UserControl

사용자가 버튼을 클릭했을때 색깔이 바뀌게 해주자.

DockPanel은 화면크기가 달라져도 유연한 변화가 가능하다.

TextBlock으로 각각이름과 속성 지정

StackPanel안에 버튼 세개를 만든다.

이름은 Red(btnR) , Green(btnG) , Blue(btnB)

button에서 또다시 색깔이 있는 정사각형과 이름을 넣어야하기때문에 stackpanel로 해준다.

각각의 버튼에 아래와 같은 코드로 지정.

 <DockPanel>
        <TextBlock DockPanel.Dock="Top"
                   HorizontalAlignment="Center"
                   FontSize="30"
                   FontWeight="Bold"
                   Margin="30 20 30 20"
                   >COLOR TEST</TextBlock>
        <StackPanel DockPanel.Dock="Top"
                    Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <Button
                x:Name="btnR"
                Margin="20"
                HorizontalAlignment="Center"
                Width="50"
                Height="50"
                VerticalAlignment="Center"
                Click="btnR_Click">

                <StackPanel>
                    <Rectangle Fill ="Red"
                    MinHeight="25"
                    MinWidth="25"/>
                    <TextBlock 
                        HorizontalAlignment="Center">Red</TextBlock>
                </StackPanel>


            </Button>
            <Button
                x:Name="btnG"
                Margin="20"
                HorizontalAlignment="Center"
                Width="50"
                Height="50"
                VerticalAlignment="Center"
                Click="btnG_Click">

                <StackPanel>
                    <Rectangle Fill ="Green"
                    MinHeight="25"
                    MinWidth="25"/>
                    <TextBlock 
                        HorizontalAlignment="Center">Green</TextBlock>
                </StackPanel>


            </Button>
            <Button
                x:Name="btnB"
                Margin="20"
                HorizontalAlignment="Center"
                Width="50"
                Height="50"
                VerticalAlignment="Center"
                Click="btnB_Click">

                <StackPanel>
                    <Rectangle Fill ="Blue"
                    MinHeight="25"
                    MinWidth="25"/>
                    <TextBlock 
                        HorizontalAlignment="Center">Blue</TextBlock>
                </StackPanel>


            </Button>
        </StackPanel>


        <Button DockPanel.Dock="Bottom"
                x:Name="btnColor"
                Margin="30 0 30 30"
                MinHeight="200"
                MinWidth="200"
                Background="AliceBlue"> </Button>
    </DockPanel>

 

색깔을 확인해야하는데 이것을 버튼으로 확인하도록하자.

버튼의 Dockpanel 지정

마진 등 속성을 설정해주자.

그리고 버튼의 색깔을 바꾸는 이벤트를 설정하자.

 private void btnG_Click(object sender, RoutedEventArgs e)
        {
            btnColor.Background = Brushes.Green;
        }

        private void btnB_Click(object sender, RoutedEventArgs e)
        {
            btnColor.Background = Brushes.Blue;
        }

        private void btnR_Click(object sender, RoutedEventArgs e)
        {
            btnColor.Background = Brushes.Red;
        }