[WPF] WPF Content 이용하여 컨트롤 다루기

안녕하세요.

 

오늘은 WPF에서 Content 속성을 이용하여 컨트롤을 다루는 방법에 대해서 공부해 보려고 합니다.

 

WPF에서 기본으로 제공해주는 기본 컨트롤을 거의 다 Content 속성이 있다고 보시면 되겠는데요.

 

이 Content 속성을 이용하여 컨트롤을 사용자가 마음대로 디자인을 할 수 있더라고요!

 

그래서 오늘은 그 방법을 보여 드리려고 합니다.

 

제가 예제로 만들 프로그램은 버튼 컨트롤을 Content 속성을 이용하여 이미지 버튼 컨트롤로 만들 것이고, 두 번째로는 GroupBox 컨트롤의 Header 를 이미지와 Label 컨트롤로 디자인 해 보는 방법을 예제 코드로 작성해 보도록 하겠습니다.

 

Xaml 코드

<Window x:Class="ch04_1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ch04_1"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="300">
    <Grid>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <Button Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button.Content>
                <StackPanel Orientation="Horizontal">
                    <Image Source="image.PNG" Width="30" Height="30"/>
                    <Label Content="저장"/>
                </StackPanel>
            </Button.Content>
        </Button>
 
        <GroupBox Grid.Row="1" Margin="10, 10, 10, 10">
            <GroupBox.Header>
                
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>
 
                    <Image Grid.Column="0" Source="/image.PNG" Width="10" Height="10"/>
                    <Label Grid.Column="1" Content="Header 정보 내용 입력"/>
                    
                </Grid>
 
            </GroupBox.Header>
        </GroupBox>
 
    </Grid>
</Window>
 

 

실행 결과

 

위와 같이 기본 Content 속성과 Header 속성을 이용하여 사용자가 원하는 컨트롤로 디자인이 된 것을 확인하실 수 있습니다.

 

감사합니다.^^