[WPF] IP Address Mask Control 커스텀 만들기

안녕하세요.

오늘은 WPF의 TextBlock과 TextBox를 이용해 IP입력에 적합한 Control을 제작해 보고자합니다.

Winform에서는 IP Address control를 지원해 줬던거 같은데 WPF는 요상하게도 없네요.

 

제 나름대로 간단하게 제작해 보겠습니다.

먼저

        <Border>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBox Width="50"/>
                <TextBlock Text="."/>
                <TextBox Width="50"/>
                <TextBlock Text="."/>
                <TextBox Width="50"/>
                <TextBlock Text="."/>
                <TextBox Width="50"/>
            </StackPanel>
        </Border>

1차 XAML파일 작성입니다.

테두리효과를 다시주기위한 Border태그, 그리고 가로로 Control들을 세우기위한 StackPanel에 Orientation="Horizontal" 옵션을 주겠습니다. TextBox의 크기 역시 임의로 50씩 설정했습니다.

디자인 결과입니다. 이제 왼쪽 TextBox부터 A,B,C,D Class로 사용할 예정입니다.

이제 A,B,C,D클래스의 테두리(Border)선을 지우고 <Border>태그에 테두리선을 넣겠습니다.

 

 

        <Border HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="1" BorderBrush="Black">
            <StackPanel Margin="1" Orientation="Horizontal" >
                <TextBox BorderThickness="0" Width="50"/>
                <TextBlock Text="."/>
                <TextBox BorderThickness="0" Width="50"/>
                <TextBlock Text="."/>
                <TextBox BorderThickness="0" Width="50"/>
                <TextBlock Text="."/>
                <TextBox BorderThickness="0" Width="50"/>
            </StackPanel>
        </Border>

수정 결과입니다. 위랑 조금 달라졌는데 Border태그로 HorizontalAlignment와 VerticalAlignment 속성을 옮겼습니다.

그리고 BorderThickness속성을 추가해 테두리 선을 넣고 BorderBrush를 통해 테두리 색을 선택했습니다.

다음은 각각 <TextBox>태그들에 BorderThickness 속성을 0으로 설정해 각 A.B,C,D 클래스를 감싸고있던 TextBox테두리를 지웠습니다.

결과물입니다.

다음에는 이렇게 만든 IPaddress control에 이벤트를 추가해보겠습니다.