[WPF]Syncfusion의 TabcontrolExt와 TabItemExt 사용

WPF 애플리케이션에서 Syncfusion의 TabControlExt를 사용하여 동적으로 탭(Tab)을 추가하거나 제거할 수 있는 UI를 구현합니다. 버튼을 클릭하여 탭을 추가하거나 제거할 수 있으며, TabControlExt와 TabItemExt를 사용하여 각 탭을 구성합니다.

작동 원리

1. UI 구성

DockPanel:
- DockPanel을 사용하여 화면을 구성합니다.
- 상단에는 탭 추가(Add Tab) 및 탭 제거(Remove Tab) 버튼을 배치하고, 아래에는 TabControlExt를 배치합니다.
TabControlExt와 TabItemExt:
- Syncfusion의 TabControlExt는 탭 컨트롤의 기본 컨테이너로, 탭을 표시하고 관리합니다.
- TabItemExt는 각 탭을 나타내며, Header로 탭의 이름, Content로 탭의 내용을 정의합니다.

2. C# 코드 – 버튼 이벤트

AddTab_Click:
- 버튼을 클릭하면 새로운 TabItemExt를 생성하여 TabControlExt에 추가합니다.
- 새 탭의 제목은 현재 탭 개수를 기준으로 동적으로 설정됩니다.
RemoveTab_Click:
- 선택된 탭(TabControlExt.SelectedItem)을 제거합니다.
- 만약 선택된 탭이 없다면 경고 메시지를 표시합니다.

실행 방법

1. Syncfusion 패키지 설치

Syncfusion 컨트롤을 사용하려면 프로젝트에 Syncfusion 패키지를 추가해야 합니다.

Install-Package Syncfusion.Tools.WPF

2. 프로젝트 구성

Visual Studio에서 WPF 프로젝트를 생성합니다.
위 코드를 프로젝트의 TabbedWindow.xaml과 TabbedWindow.xaml.cs 파일에 붙여넣습니다.
Syncfusion 라이센스 키를 등록합니다. (App.xaml.cs에 추가)

App.xaml.cs

using System.Windows;
using Syncfusion.Licensing;

namespace SynfusionWpfApp
{
    public partial class App : Application
    {
        public App()
        {
            // Syncfusion 라이센스 키 등록
            SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");
        }
    }
}

3. 프로젝트 빌드 및 실행

솔루션을 빌드합니다.
애플리케이션을 실행하고 창이 표시되면 Add Tab 버튼과 Remove Tab 버튼을 사용해 탭을 동적으로 추가하거나 제거할 수 있습니다.

동작 설명

애플리케이션 시작:
- 기본적으로 “Default Tab”이 포함된 TabControlExt가 표시됩니다.
탭 추가:
- Add Tab 버튼을 클릭하면 새로운 탭이 추가됩니다.
- 새 탭은 Header로 “Tab X” (X는 탭 번호)를 표시하며, 탭의 내용은 “Content of Tab X”로 설정됩니다.
탭 제거:
- Remove Tab 버튼을 클릭하면 현재 선택된 탭이 삭제됩니다.
- 선택된 탭이 없을 경우 경고 메시지가 표시됩니다.

주요 Syncfusion 컨트롤 설명

1. `TabControlExt`

Syncfusion에서 제공하는 탭 컨트롤입니다.
Items 속성을 통해 탭(TabItemExt)을 추가하거나 제거할 수 있습니다.

2. `TabItemExt`

각 탭의 구성 요소로 Header와 Content 속성을 제공합니다.
- Header: 탭의 제목을 나타냅니다.
- Content: 탭의 내부 내용을 나타냅니다.

코드 흐름

초기화:
- TabbedWindow.xaml에 정의된 DockPanel과 TabControlExt가 초기화됩니다.
- 기본적으로 “Default Tab” 탭이 추가된 상태입니다.
AddTab_Click:
- TabControlExt.Items 컬렉션에 새 TabItemExt를 추가합니다.
- 새 탭의 번호는 TabControl.Items.Count + 1로 설정됩니다.
RemoveTab_Click:
- TabControl.SelectedItem을 확인하여 현재 선택된 탭을 TabControl.Items에서 제거합니다.
- 선택된 탭이 없으면 경고 메시지를 표시합니다.

전체 코드

TabbedWindow.xaml.cs

using System.Windows;
using System.Windows.Controls;
using Syncfusion.Windows.Tools.Controls;

namespace SynfusionWpfApp
{
    public partial class TabbedWindow : Window
    {
        public TabbedWindow ()
        {
            InitializeComponent();
        }

        private void AddTab_Click (object sender, RoutedEventArgs e)
        {
            // 새로운 탭 추가
            var newTab = new TabItemExt
            {
                Header = $"Tab {TabControl.Items.Count + 1}",
                Content = new TextBlock
                {
                    Text = $"Content of Tab {TabControl.Items.Count + 1}",
                    Margin = new Thickness(10)
                }
            };
            TabControl.Items.Add(newTab);
        }

        private void RemoveTab_Click (object sender, RoutedEventArgs e)
        {
            // 선택된 탭 제거
            if (TabControl.SelectedItem != null)
            {
                TabControl.Items.Remove(TabControl.SelectedItem);
            }
            else
            {
                MessageBox.Show("No tab selected to remove.", "Warning", MessageBoxButton.OK, MessageBoxImage.Warning);
            }
        }
    }
}

TabbedWindow.xaml

<Window x:Class="SynfusionWpfApp.TabbedWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="Tabbed Window" Height="400" Width="600">
    <DockPanel>
        <!-- 버튼 영역 -->
        <StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Margin="10">
            <Button Content="Add Tab" Width="100" Margin="5" Click="AddTab_Click" />
            <Button Content="Remove Tab" Width="100" Margin="5" Click="RemoveTab_Click" />
        </StackPanel>

        <!-- Syncfusion TabControl -->
        <syncfusion:TabControlExt x:Name="TabControl" Margin="10">
            <syncfusion:TabItemExt Header="Default Tab">
                <TextBlock Text="This is the default tab." Margin="10" />
            </syncfusion:TabItemExt>
        </syncfusion:TabControlExt>
    </DockPanel>
</Window>

실행 화면

실행 후 초기 화면에는 하나의 탭(Default Tab)이 표시됩니다.
탭 추가 버튼 클릭 시 새로운 탭이 추가되며, 제목과 내용이 동적으로 생성됩니다.
탭 제거 버튼 클릭 시 선택된 탭이 제거됩니다.

소프트웨어