Как я могу получить кнопку закрытия на шаблонном TabItem в WPF?

Question

У меня есть TabControl, где TabItem s DataTemplat ed. Кажется, шаблон работает правильно, пользовательский элемент управления, который я хочу показать в TabItem, отображается правильно.

В чем я не уверен, так это в том, как заставить "x" отображаться в TabItem, чтобы я мог закрыть каждую вкладку, так как они динамически генерируются с помощью шаблона.

Будучи довольно новичком в WPF, я начинаю понимать многие концепции, но TabControl доставил мне немало хлопот, поэтому я вполне могу иметь работоспособный, но не поддерживаемый шаблон.

Это то, что у меня есть, и я хотел бы иметь возможность закрыть каждый TabControl. Мне также нужно будет иметь возможность запускать пользовательское событие, когда это TabControl закрыто.

<UserControl x:Class="Russound.Windows.UI.UserControls.CallLog.CaseReaderWpf"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:CallLog="clr-namespace:Russound.Windows.UI.UserControls.CallLog"
    Height="637" Width="505">

    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Russound.Windows;component/UI/RussoundDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

    <TabControl x:Name="tabCases" >
        <TabControl.ItemTemplate>
            <DataTemplate DataType="{x:Type TabItem}">
                <StackPanel>
                    <TextBlock Text="{Binding Path=Id}" />
                </StackPanel>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate DataType="{x:Type TabItem}">
                <CallLog:CaseReadOnlyDisplay DataContext="{Binding}" />
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</UserControl>

Answer 1

Ознакомьтесь с этой статьей MSDN Джоша Смита. Это отличное решение для вашего вопроса.

Приложения WPF с шаблоном проектирования Model-View-ViewModel

http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

<!-- 
This template explains how to render 
a tab item with a close button.
-->
<DataTemplate x:Key="ClosableTabItemTemplate">
<DockPanel Width="120">
  <Button 
    Command="{Binding Path=CloseCommand}"
    Content="X"
    Cursor="Hand"
    DockPanel.Dock="Right"
    Focusable="False"
    FontFamily="Courier" 
    FontSize="9"
    FontWeight="Bold"  
    Margin="0,1,0,0"
    Padding="0"
    VerticalContentAlignment="Bottom"
    Width="16" Height="16" 
    />
  <ContentPresenter 
    Content="{Binding Path=DisplayName}" 
    VerticalAlignment="Center" 
    />
</DockPanel>
</DataTemplate>

<!--
This template explains how to render the 'Workspace' content area in the main window.
-->
<DataTemplate x:Key="WorkspacesTemplate">
<TabControl 
  IsSynchronizedWithCurrentItem="True" 
  ItemsSource="{Binding}" 
  ItemTemplate="{StaticResource ClosableTabItemTemplate}"
  Margin="4"
  />
</DataTemplate>

Answer 2

Просто столкнулся с этим. Я делаю MVVM, но было бы очень удобно использовать события формы. В любом случае я использовал параметр ItemContainerStyle и указал его на стиль с квалификатором типа данных, например:

  <Style x:Key="TabHeader" TargetType="TabItem">
        <Setter Property="FieldLayoutSettings">
            <Setter.Value>
                <StackPanel Orientation="Horizontial">
                    <TextBlock Text="{Binding HeaderText}"/>
                    <!-- MVVM style -->
                    <Button Content="X" Command="{Binding [ICommandHere]}" />
                    <!--or... Forms style -->    
                    <Button Content="X" Click="EventHandlerHere" />
             </StackPanel>
            </Setter.Value>
            </Setter> 
    </Style>

<TabControl ItemsSource="{Binding Workspaces}"
            ItemContainerStyle="{StaticResource TabHeader}"/>

Answer 3

Джош Смит написал статью для MSDN Magazine с рабочим примером элементов вкладок с кнопками закрытия. Код основан на шаблоне MVVM, но вы должны быть в состоянии извлечь соответствующие фрагменты из шаблона элемента управления вкладки.

У меня нет логина OpenID, поэтому я не могу опубликовать URL напрямую. Поиск в Google по запросу "josh smith mvvm demo app".

Answer 4

Не для того, чтобы похитить поток, но вы можете подумать о том, как уродливо выглядит, когда на каждой вкладке есть кнопка закрытия. Если вместо этого вы предпочитаете одну кнопку закрытия (а-ля Visual Studio), встроенную в саму TabControl, вы можете взглянуть на этот пост в блоге , который я сделал, и это делается как часть примера (но не в центре внимания поста).

Answer 5

вам придется получить свой собственный вкладку управления. поиск в Google показывает много результатов, многие из которых имеют источник, поэтому вам не нужно заново создавать колесо.