WPF Border - 제품과 습작 차이는 디테일에서

 

Border

 

Border는 경계죠 멋진 버튼과 제품과 습작을 구분 짓는 경계이기도 합니다. 잘 넣으면 제품이 되고 대충 넣으면 습작이죠.

 

다음과 같이 ClickMe버튼에 빨간 Border를 넣으려고 했지만 안됩니다.

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

 

 

Property Content is set more than once 프로퍼티 속성은 한개밖에 못넣는답니다. 앞에 Resoruces에는 Style도 두개 들어가고 StackPanel은 Button두개에 TextBlock까지 들어가는데 버튼에는 Border하나가 안들어가죠.

 

그래서 Button에 Border를 넣는 방법은 다음과 같이 Border를 넣고 Button에 있던 Content를 빼고 TextBlock을 넣는 방법이 있습니다.

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

 

근데 결과는 테두리를 넣으려고 했는데 좀 다르죠?

 

그래서 Border를 넣으려면 BorderThickness와 BorderBrush를 써야 합니다.

<Button BorderThickness="1" BorderBrush="Red"
    Margin="20" Style="{StaticResource ButtonBackground}">
    <TextBlock Text="ClickMe"></TextBlock>
</Button>

 

Border하나 넣기 참 힘들죠? 요즘같이 바이브코딩으로 프롬프트로 때려 넣는 시대에 Border한땀 한땀 깎고 있으면 여태 줄 한바퀴 넣었다고 팀장님이 뭐라 할 수도 있는 딜레마가 있습니다. 하지만 Border는 정말 중요합니다.

 

 

Border에 그라데이션

백마에 까만 줄무늬를 넣으면 얼룩말이죠. 버튼이 갑자기 있어보이는 시점이 그라데이션을 넣는 시점부터입니다. 이 기능 때문에 WPF를 쓰는게 아닌가 싶을 정도 입니다.

<Button Content="GradationBorderButton" Margin="15">
    <Button.BorderBrush>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="#FF6B9D" Offset="0"/>
            <GradientStop Color="#4A90E2" Offset="1"/>
        </LinearGradientBrush> 
    </Button.BorderBrush>
</Button>

 

 

앞에 코드에서 BorderBursh라는 속성을 썼었죠? 이게 Inline에 들어가 있던 것을 자세히 작성 하기 위해서 블럭으로 빼주는 것입니다.

<Button BorderThickness="1" BorderBrush="Red"

 

BorderBrush인라인 속성을 지우고 하위 블럭으로 뺍니다.

<Button Content="GradationBorderButton" Margin="15">
    <Button.BorderBrush>
    </Button.BorderBrush>
</Button>

 

 

위에 빨간 테두리는 다음과 같이 재현 할 수 있습니다.

<Button BorderThickness="1"
    Margin="20" Style="{StaticResource ButtonBackground}">
    <Button.BorderBrush>
        <SolidColorBrush Color="Red"/>
    </Button.BorderBrush>
    <TextBlock Text="PressMe"></TextBlock>
</Button>