탭 항목이 사용자 정의 컨트롤 인 닫을 수있는 탭

Question

저는 C# WPF 프로젝트에서 작업하고 있습니다. 탭 컨테이너가 있고 사용자가 필요로하는 탭 컨테이너에 다른 유형의 탭을 동적으로로드하려고합니다. 나는 다음과 같은 일을 오전 예를 들어 :

tabContainer.Items.Add(new MyUserControl()); 

을 나는 사용자가 더 이상을 필요로하는 경우 탭이 컨테이너를 제거 할 수 없습니다 있도록 각 탭 닫기 버튼을 갖고 싶어.

나는 this code project example을 찾았지만 탭 콘텐트가 아닌 xaml을 포함하는 사용자 정의 컨트롤을로드하고 있거나 누락 된 것을 볼 수 있습니다.

내 사용자 정의 컨트롤에서 탭 컨테이너로로드 할 수 있지만 탭을 닫을 수있는 방법. 얻을 수있는 {; 세트에서 얻을 수

내 사용자 컨트롤은 다음`공공 문자열 TabHeader을 가지고

<TabControl x:Name="tabContainer" Grid.Column="2" Margin="10,45,0,0" RenderTransformOrigin="0.5,0.55" Grid.ColumnSpan="3"> 
      <TabControl.Resources> 
       <Style TargetType="{x:Type TabItem}"> 
        <Setter Property="Header" Value="{Binding TabHeader}" /> 
       </Style> 
      </TabControl.Resources> 
     </TabControl> 

:

현재 내가있는로드하고있는 탭은 다음을 사용하여 탭 제목을 설정하는 일부 정적 바인딩을 사용 내 사용자 정의 컨트롤의 생성자가 사용되는 방법에 따라 생성자에서 설정됩니다.

Answer 1

: 여기에 방법 당신이있는 TabControl을 채우는하고 헤더의 내용으로 작동하는 최소 버전입니다.

<TabControl x:Name="tabContainer"> 
    <TabControl.Resources> 
     <Style TargetType="{x:Type TabItem}"> 
      <Setter Property="Header" Value="{Binding TabHeader}" /> 
      <Setter Property="HeaderTemplate"> 
       <Setter.Value> 
        <DataTemplate> 
         <StackPanel Orientation="Horizontal"> 
          <TextBlock Text="{Binding}" /> 
          <Button Content="x" Click="Button_Click_2" 
              Tag="{Binding DataContext, RelativeSource={RelativeSource AncestorType=TabItem}}"/> 
         </StackPanel> 
        </DataTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </TabControl.Resources> 
</TabControl> 

Tag 속성이처럼 Button의 클릭 이벤트 핸들러에서 제거 할 수 있습니다 Items 컬렉션의 UserControl에 바인딩 : 당신은 예를 들어 TabItem의 HeaderTemplate에서이 작업을 수행 할 수

public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
     InitializeComponent(); 
     tabContainer.Items.Add(new MyUserControl()); 
    } 

    private void Button_Click_2(object sender, RoutedEventArgs e) 
    { 
     Button button = sender as Button; 
     tabContainer.Items.Remove(button.Tag); 
    } 
} 

Answer 2

각 탭에 닫기 버튼을 추가하려면 TabItem 스타일의 ControlTemplate을 사용하십시오. 일반적으로 콘텐츠에 데이터 문맥 (콘텐츠를 구동하는 데이터 만)을 지정한 다음 ContentTemplate에 모양을 지정합니다. 콘텐츠가 UserControl 인 경우 UserControl 자체를 그리는 방법을 알고 있으므로 ContentTemplate을 지정하지 마십시오.

Answer 3

제 죄의 경우 WPF TabControl에 가까운 탭 단추를 추가했습니다. 나는 ItemTemplate에 닫기 버튼을 두는 것을 끝내었다. 당신은 가까운 Button 스스로를 정의해야합니다

<TabControl 
    > 
    <TabControl.Resources> 
     <Style TargetType="{x:Type TabItem}"> 
      <Setter Property="Header" Value="{Binding TabHeader}" /> 
     </Style> 
    </TabControl.Resources> 
    <TabControl.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="Auto" /> 
       </Grid.ColumnDefinitions> 
       <Label 
        Content="{Binding}" 
        Grid.Column="0" 
        /> 
       <Button 
        VerticalAlignment="Center" 
        Grid.Column="1"> 
        <Path 
         Data="M 0, 0 L 12, 12 M 12,0 L 0,12" 
         Stroke="Red" 
         StrokeThickness="2" 
         Width="12" 
         Height="12" 
         /> 
       </Button> 
      </Grid> 
     </DataTemplate> 
    </TabControl.ItemTemplate> 
    <local:UserControl1 TabHeader="First Item" /> 
    <local:UserControl1 TabHeader="Second Item" /> 
</TabControl>