[WPF] Create Custom Control (커스텀 컨트롤 만들기) - 행열 선택기(RowColumn Selector) [2]

이제 본격적으로 컨트롤을 만들어보자.

프로젝트를 만들고, 새 아이템 추가를 해서 'Custom Control(WPF)'를 선택해서 추가한다.

이름은 일단 RowColumnSelector 라고 지정하였다.

생성하면 RowColumnSelector.cs 파일 하나와, Themes폴더가 생기고 Themes 폴더 안에 Generic.xaml 이라는 파일이 생성되는 것을 확인할 수 있다.

RowColumnSelector.cs 파일에서 해당 컨트롤의 동작을 구현하고, Generic.xaml 파일에서 해당 컨트롤의 뷰를 구현하게 된다.

Generic.xaml 파일을 보면 다음과 같은 코드가 작성되어 있다.

우리가 필요로 하는 건 앞에서 언급했듯이 

1. 팝업을 열기 위한 버튼(토글버튼)

2. 행, 열을 선택하기 위한 팝업 

이므로 각각을 작성해서 넣는다

ToggleButton과 Popup 컨트롤들을 각각 넣고, 

Popup 컨트롤의 IsOpen 속성을 ToggleButton의 IsChecked 속성과 바인딩한다.

확인을 위해 간단히 크기와 배경을 지정하여 다음과 같이 작성하였다.

<Style TargetType="{x:Type local:RowColumnSelector}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type local:RowColumnSelector}">

                    <Grid>

                        <ToggleButton x:Name="PART_RowColumnSelectorToggleButton"

                                          IsTabStop="True"

                                          MinHeight="22"

                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

                                          Padding="{TemplateBinding Padding}"

                                          IsChecked="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" >

                        </ToggleButton>

                        <Popup x:Name="PART_RowColumnSelectorPopup" VerticalAlignment="Bottom" 

                               IsOpen="{Binding ElementName=PART_RowColumnSelectorToggleButton, Path=IsChecked}"

                               StaysOpen="False" AllowsTransparency="True" Focusable="False" 

                               HorizontalOffset="1" VerticalOffset="1" PopupAnimation="Slide">

                            <Border BorderThickness="1" Width="100" Height="40" Background="Black" >

                                <Grid>

                                

                                </Grid>

                            </Border>

                        </Popup>

                    </Grid>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

여기까지 작성된 'RowColumnSelector' 를 MainWindow 에 넣고 실행시켜보면 다음과 같다.

버튼을 클릭하면 팝업이 나타나고, 팝업이 포커스를 잃으면 사라지도록 구현되었다.

이제 팝업에 원하는 기능을 구현하도록 하자.