Как сделать так, чтобы кнопка отображалась в заголовке элемента WPF TabItem с использованием привязок?

Question

Я создаю пользовательский интерфейс, в котором TabControl имеет серию стандартных TabItem с обычными элементами управления WPF в качестве содержимого. Заголовки просто отображают обычные строки как обычно. Однако я хочу, чтобы заголовок последнего элемента содержал Button вместо обычной строки.

Позвольте мне подчеркнуть, что Я уже знаю, как это сделать без привязок. Я хочу сделать это с привязками. В частности, TabControl привязан к массиву UserControl с, за исключением последнего объекта, который является Button. Именно этот Button я хочу отображать в заголовке, а не как содержимое последнего TabItem. (Честно говоря, мне все равно, что является содержимым последнего TabItem. Только заголовок.)

Я понимаю DataTemplateSelector с и StyleSelector с. Я не могу понять, какая комбинация стилей и шаблонов сделает это для меня. В частности, мне нужно знать, как должны выглядеть Style и DataTemplate для последнего элемента, чтобы я мог выбрать их соответствующим образом. Никакой другой код не требуется.

Answer 1

Я понял это сам. Я новичок в WPF / XAML, и понимание, которое я только что получил, заключается в том, что в случае ItemsControl, такого как TabControl, DataTemplate выкладывает content каждого элемента, но ничего не говорит об общем макете самого элемента, который управляется его ControlTemplate. Теперь я понимаю, что мне совсем не нужен DataTemplateSelector, просто стиль для последнего элемента, например:

            <Style x:Key="buttonStyle" TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Border>
                                <ContentPresenter
                                    Margin="4,1,0,1"
                                    Content="{Binding}"
                                    ContentSource="Header">
                                </ContentPresenter>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Answer 2

Есть еще один способ сделать это, еще приятнее.

<TabControl>
    <TabControl.ItemsSource>
        <CompositeCollection>
        <CollectionContainer Collection="{StaticResource items}" />
            <TabItem>
            <TabItem.Template>
                    <ControlTemplate>
                        <Border Name="PART_Header" Margin="4,0,1,1">                                    
                            <Button Click="AddTicket">Add Ticket</Button>
                    </Border>
                </ControlTemplate>
                </TabItem.Template>
            </TabItem>
        </CompositeCollection>
    </TabControl.ItemsSource>
</TabControl>

(Обратите внимание, что вышеупомянутое было сделано полностью из памяти. Я использую Mac и не хотел загружаться в свою ВМ только для этого. Это должно быть довольно точно.)

Answer 3

Первое, что я бы попробовал, это установить стиль последнего TabItem . В стиле, если вы связываете свойство Header со свойством Content , которое должно заставить кнопку появляться в заголовке TabItems. Тогда вам понадобится DataTemplate, который невидим для элемента, чтобы вы не видели его в области содержимого вкладки.

Если это не сработает, возможно, вам потребуется создать новый шаблон ControlTemplate для элемента вкладки. Шаблон по умолчанию выглядит следующим образом:

<Grid SnapsToDevicePixels="true">
<Border Name="Bd" Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="1,1,1,0">
    <ContentPresenter Name="Content" 
            ContentSource="Header" 
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
            RecognizesAccessKey="true" 
            HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
                VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
</Border>

Единственное, что вам нужно изменить, - это ContentSource с Header до Content . Вы должны создать копию оригинала, чтобы сделать это, хотя, в противном случае вы пропустите все соответствующие триггеры. Вы можете найти оригинал, используя расширение для просмотра BAML для Reflector. Или вы можете получить оригинал в Blend, если он у вас есть.