이번 시간에는 아래 그림과 같이 가로(왼쪽 그림)로 쓰여져 있는 Tab Control의 Text를 90도 회전하여 세로(오른쪽 그림)로 표시되도록 해보겠습니다.
 |  |
소스코드는 아래와 같습니다.
|
<Window x:Class="RotateTab.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Window.Resources> <DataTemplate x:Key="TabItemHeaderTemplate"> <ContentPresenter Content="{TemplateBinding Content}" RenderTransformOrigin="0.5,0.5" > <ContentPresenter.LayoutTransform> <RotateTransform Angle="-90"/> </ContentPresenter.LayoutTransform> </ContentPresenter> </DataTemplate> </Window.Resources> <Grid x:Name="LayoutRoot"> <TabControl TabStripPlacement="Left"> <TabItem Header="Item1" HeaderTemplate="{DynamicResource TabItemHeaderTemplate}"/> <TabItem Header="Item2" HeaderTemplate="{DynamicResource TabItemHeaderTemplate}"/> <TabItem Header="Item3" HeaderTemplate="{DynamicResource TabItemHeaderTemplate}"/> <TabItem Header="Item4" HeaderTemplate="{DynamicResource TabItemHeaderTemplate}"/> </TabControl> </Grid> </Window> |
TabItem의 DataTemplate을 수정하여 회전 시켜 보았습니다. ContentPresenter를 사용하여 Content를 TemplteBinding하고, LayoutTransform에 RotateTransform을 적용해 -90만큼 회전 시켰습니다. RenderTransform을 사용하지 않은 이유는 우리가 회전 하려는 데이터가 실제 Layout에 영향을 미쳐야 함으로 LayoutTransform을 사용했습니다. 아래 그림은 Rendertransform을 사용했을 때의 그림입니다.
글자는 회전되었지만 레이아웃에는 영향을 주지 않았기 때문에 글자가 겹치는 현상을 확인 할 수 있습니다.
