WPF Border Radius - Button에 왜 Radius가 없는데?

Button의 모서리를 둥그스름하게 만들려면 Radius속성을 주어야 합니다. 하지만 WPF의 버튼은 Radius가 없기 때문에 다른 방법을 써야 합니다.

 

User Control만들기

눈으로 보면서 작업 하기 위해 일단 User Control을 하나 만듭니다. 

 

 

버튼에 스타일 매핑

UserControl에 Resource로 Style하나 만들어 주고 배경색은 DarkSlateBlue로 합니다. x:Key는 Style1으로 하고 버튼에도 StaticResource로 Style1을 적용 해줍니다.

<UserControl.Resources>
    <Style x:Key="Style1" TargetType="Button">
        <Setter Property="Background" Value="DarkSlateBlue"></Setter>
    </Style>
</UserControl.Resources>

<Grid>
    <Button Content="Button1" Style="{StaticResource Style1}"></Button>
</Grid>

 

 

 

ControlTemplate

이제 드디어 주인공인 ControlTemplate이 나옵니다. ControlTemplate은 컨트롤의 '모든 시각적 구조와 모양'을 정의하는 설계도입니다. WPF 컨트롤은 기능(Logic)과 모양(Visual)이 완벽하게 분리되어 있습니다. ControlTemplate은 오직 '모양'만 담당합니다.

<Button Content="Button1" Style="{StaticResource Style1}">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="Brown"></Border>
        </ControlTemplate>
    </Button.Template>
</Button>

 

 

Border를 쓴 이유

앞에서 만들었던 버튼 기억 하시나요? 테두리를 넣을려고 Border를 썼지만 글자를 형광펜으로 칠한 효과가 나왔습니다. 이것은 Button의 Content를 Border로 넣은 것입니다. 

<Button Margin="20" Style="{StaticResource ButtonBackground}">
    <Border Background="Red">
        <TextBlock Text="ClickMe"></TextBlock>
    </Border>
</Button>

 

그래서 이 부분은 Border의 Content를 TextBlock으로 넣은 것입니다.

 

다음 코드와 동일한 효과 입니다. Button.Content에 Border를 넣은 것입니다.

 <Button>
      <Button.Content>
          <Border Background="Red">
              <TextBlock Text="ClickMe"/>
          </Border>
      </Button.Content>
  </Button>

 

Button의 Content를 Border로 넣었듯이 이 코드는 Button의 Template을 Border의 그것으로 바꿉니다. 하지만 Template으로 들어갈 수 있는 타입은 ControlTemplate이기 때문에 ControlTemplate이 들어간 것입니다.

 

CornerRadius

이제 드디어 Radius를 줄 차례입니다. CornerRadius를 3을 줍니다.

<Button Content="Button1" Style="{StaticResource Style1}">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="Brown" CornerRadius="3"></Border>
        </ControlTemplate>
    </Button.Template>
</Button>

 

이미지의 오른쪽 위에 하얀 부분이 보이나요? 살짝 둥그스름 해졌습니다. 눈에 확 띄게 하기 위해 10을 주겠습니다. 10이면 눈에 좀 띕니다.

 

그럼 다시 이전에 만들어 놓았던 버튼들에 적용 해보겠습니다.

 

버튼들에 적용하기

기존에 만들어 놓았던 StaticResource가 Style에 들어가 있습니다. 이걸 빼고 앞전에 적용한 방법으로 Radius를 적용 해보겠습니다.

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0" 
        Style="{StaticResource BorderRed}"/>

 

 

사라진 버튼

다음과 같이 ControlTemplate을 적용 하면 버튼이 사라집니다. 

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="DodgerBlue" CornerRadius="10">
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

 

TextBlock넣어주기

Border안에 TextBlock을 넣어주면 Button에 Radius가 들어갔고 '파일 열기' 글자도 보입니다.

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="DodgerBlue" CornerRadius="10">
                <TextBlock Text="파일 열기"></TextBlock>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

 

 

그런데 글자가 위쪽으로 올라갔고 버튼에서도 벗어났습니다. 갈길이 머네요. 다음 포스트에서 계속 하겠습니다.