[WPF] WPF TabControl 항목 회전하기

안녕하세요.

 

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

 

그 중에서도, TabControl 아이템 항목들을 회전시키는 방법에 대해서 알려 드리려고 합니다.

 

기본적으로 아이템 항목은 Top을 기준이로 디폴트 값이 설정되어 있는데요. 필요에 따라서 좌, 우, 아래에도 아이템 항목을 넣을 경우가 생길 수 있어서 이럴 때 유용하게 사용할 수 있을 것 같습니다.

 

 

Xaml.cs

<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 TabStripPlacement="Left">
            <TabControl.Resources>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <ContentPresenter Content="{TemplateBinding Content}">
                                    <ContentPresenter.LayoutTransform>
                                        <RotateTransform Angle="270"/>
                                    </ContentPresenter.LayoutTransform>
                                </ContentPresenter>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>
            
            <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>
 

 

실행 결과

 

위와 같이 TabStripPlacement 속성을 위용하여 좌, 우, 위, 아래를 설정할 수 있고, 그리고 Style 을 이용하여 항목들의 각도 설정까지 할 수 있습니다.

 

감사합니다.^^