C#/WPF

WPF tutorial - Using the WPF TabControl

광그로 2017. 7. 2. 15:49

http://www.wpf-tutorial.com/tabcontrol/using-the-tabcontrol/


WPF TabControl은 인터페이스를다른 영역으로 쪼갤 수 있습니다.

Tab Header를 통하여 구분하며, Tab Header에는 Image나 TextBlock 등으로 꾸밀 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<Grid>
        <TabControl>
            <TabItem>
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="..." Height="30" Width="30"/>
                        <TextBlock Text="Tab Header 2" Foreground="Red" VerticalAlignment="Center"/>
                    </StackPanel>
                </TabItem.Header>
                <Label>Content</Label>
            </TabItem>
            <TabItem Header="Tab Header 2"/>
            <TabItem Header="Tab Header 3"/>
        </TabControl>
    </Grid>
cs



Controlling the TabControl


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<DockPanel>
        <StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" Margin="2,5">
            <Button Name="btnPreviousTab" Click="BtnPreviousTab_Click">Prev.</Button>
            <Button Name="btnNextTab" Click="BtnNextTab_Click">Next</Button>
            <Button Name="btnSelectedTab" Click="BtnSelectedTab_Click">Selected</Button>
        </StackPanel>
        <TabControl Name="tcSample">
            <TabItem Header="General">
                <Label Content="Content goes here..." />
            </TabItem>
            <TabItem Header="Security" />
            <TabItem Header="Details" />
        </TabControl>
 
    </DockPanel>
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
 private void BtnPreviousTab_Click(object sender, RoutedEventArgs e)
        {
            int current_Index = tcSample.SelectedIndex - 1;
            if(current_Index < 0)
            {
                current_Index = tcSample.Items.Count - 1;
            }
 
            tcSample.SelectedIndex = current_Index;
        }
 
        private void BtnNextTab_Click(object sender, RoutedEventArgs e)
        {
            int current_Index = tcSample.SelectedIndex + 1;
            if(current_Index > tcSample.Items.Count)
            {
                current_Index = 0;
            }
 
            tcSample.SelectedIndex = current_Index;
        }
 
        private void BtnSelectedTab_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("selected tab : " + (tcSample.SelectedItem as TabItem).Header);
        }
cs



Tab Poistion

1
2
<TabControl TabStripPlacement="Bottom">
 
cs


TabStripPlacement속성 중 left, top, bottom, right 등을 이용하여 Tab의 위치를 결정할 수 있습니다.