[WPF] WPF TabControl 사용 방법

안녕하세요.

 

오늘은 WPF에서 TabControl 사용 방법에 대해서 알려 드리려고 합니다.

 

프로젝트를 진행하다 보면, 서로 다른 항목 혹은 메뉴들을 여러 탭을 이용하여 보여주어야 하는 경우가 종종 있는데요.

 

이럴 때, TabControl을 사용하면 유용하게 UI 구성을 할 수 있습니다.

 

 

Xaml.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<Window x:Class="TabControlTest.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:TabControlTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="400">
    <Grid Margin="10">
        <TabControl>
            <TabItem>
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="https://cdn0.iconfinder.com/data/icons/dota-2-2/32/Recipe-512.png" Width="16"/>
                        <TextBlock Text="아이템1"/>
                    </StackPanel>
                </TabItem.Header>
 
                <StackPanel>
                    <Label>아이템1 #1</Label>
                    <Label>아이템1 #2</Label>
                    <Label>아이템1 #3</Label>
                    <Label>아이템1 #4</Label>
                </StackPanel>
            </TabItem>
            
            <TabItem Header="아이템2">
                <StackPanel>
                    <Label>아이템2 #1</Label>
                    <Label>아이템2 #2</Label>
                    <Label>아이템2 #3</Label>
                    <Label>아이템2 #4</Label>
                </StackPanel>
            </TabItem>
            <TabItem Header="아이템3">
                <StackPanel>
                    <Label>아이템3 #1</Label>
                    <Label>아이템3 #2</Label>
                    <Label>아이템3 #3</Label>
                    <Label>아이템3 #4</Label>
                </StackPanel>
            </TabItem>
        </TabControl>
    </Grid>
</Window>
 
cs

 

실행 결과

 

위와 같이 TabControlHeader를 꾸밀 수도 있고, Item에 항목을 추가해서 디자인 할 수도 있습니다.

 

감사합니다.^^

728x90

이 글을 공유하기

댓글

Designed by JB FACTORY