Как изменить внешний вид TabItems в прокручивающемся WPF TabControl?

У меня есть прокручиваемый TabControl с использованием ScrollViewer и StackPanel (с StackPanel, установленным как IsItemsHost = "true"). Для начала я работаю над решением, изначально изложенным здесь - Создание прокручиваемых вкладок с помощью WPF TabControl. На данный момент у него неработающие ссылки (Edit: я отследил один экземпляр его кода на форуме здесь - Как запретить TabControl выполнять несколько строк?), так что вот xaml для TabControl (выполняет не требуется никакого дополнительного кода):

<TabControl x:Name="TabControl2" Height="Auto" TabStripPlacement="Bottom" VerticalAlignment="Bottom" Template="{DynamicResource TabControlControlTemplate1}" IsSynchronizedWithCurrentItem="True">
  <TabControl.Resources>
    <Style x:Key="TabScrollerRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate>
            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Margin="1,0">
              <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding ContentControl.Content}"/>
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <ControlTemplate x:Key="TabControlControlTemplate1" TargetType="{x:Type TabControl}">
      <Grid x:Name="Grid" KeyboardNavigation.TabNavigation="Local">
        <Grid.ColumnDefinitions>
          <ColumnDefinition x:Name="ColumnDefinition0"/>
          <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
          <RowDefinition x:Name="RowDefinition1" Height="*"/>
        </Grid.RowDefinitions>
        <Border Grid.Row="1" Grid.Column="0" x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.DirectionalNavigation="Contained">
          <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
            <Border Background="{TemplateBinding Background}" x:Name="Border1">
              <ContentPresenter DataContext="{x:Null}" Margin="{TemplateBinding Padding}" x:Name="PART_SelectedContentHost" Content="{TemplateBinding SelectedContent}" ContentTemplate="{TemplateBinding SelectedContentTemplate}" ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}" ContentSource="SelectedContent"/>
            </Border>
          </Border>
        </Border>
        <ScrollViewer x:Name="HeaderPanel" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
          <ScrollViewer.Style>
            <Style TargetType="{x:Type ScrollViewer}">
              <Setter Property="Template">
                <Setter.Value>
                  <ControlTemplate>
                    <Grid Margin="0,0,0,0" Grid.Row="0" Grid.Column="0" x:Name="HeaderPanel">
                      <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20"/>
                        <ColumnDefinition Width="20"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="20"/>
                      </Grid.ColumnDefinitions>
                      <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                      </Grid.RowDefinitions>
                      <RepeatButton Grid.Column="1" Content="&lt;" Command="ScrollBar.LineLeftCommand" Style="{DynamicResource TabScrollerRepeatButtonStyle}" Visibility="{Binding Path=ComputedHorizontalScrollBarVisibility, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                      <ScrollContentPresenter Grid.Column="2" Content="{TemplateBinding ScrollViewer.Content}" />
                      <RepeatButton Grid.Column="3" Content="&gt;" Command="ScrollBar.LineRightCommand" Style="{DynamicResource TabScrollerRepeatButtonStyle}" Visibility="{Binding Path=ComputedHorizontalScrollBarVisibility, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </Grid>
                  </ControlTemplate>
                </Setter.Value>
              </Setter>
            </Style>
          </ScrollViewer.Style>
          <StackPanel IsItemsHost="true" Orientation="Horizontal" Background="{x:Null}" KeyboardNavigation.TabIndex="1"/>
        </ScrollViewer>
      </Grid>
    </ControlTemplate>
  </TabControl.Resources>
  <TabItem x:Name="TabItem1" Header="TabItem1"/>
  <TabItem x:Name="TabItem2" Header="TabItem2"/>
</TabControl>

Как мне настроить внешний вид каждого элемента TabItem? Например, я хотел бы разместить TextBox и TextBlock внутри каждого TabItem с помощью StackPanel, чтобы у меня были переименовываемые вкладки (при необходимости сворачивая одну или другую). Я также могу добавить кнопку закрытия на каждой вкладке. Обычно я бы использовал что-то вроде следующего:

                <TabControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Name="panel" Orientation="Horizontal">
                            <TextBox   Name="editHeader" Text="{Binding Header}" MaxWidth="250"/>
                            <TextBlock Name="textHeader" Text="{Binding Header}" />
                        </StackPanel>
                    </DataTemplate>
                </TabControl.ItemTemplate>

.. но это ни на что не влияет. Любые идеи были бы хорошы. Спасибо.

Изменить: я все еще пытаюсь понять это. Возможно ли, что решение может включать ContentPresenter и / или SelectedContentTemplate?

Изменить 2: (это не добавляет ценности моему вопросу) Я действительно, очень хочу, чтобы WPF включил что-то в этом роде из коробки. Я сбит с толку поведением TabControl по умолчанию и тем фактом, что через несколько лет нет прокручиваемого TabControl (и простого решения для его достижения).


person guesser    schedule 07.09.2010    source источник


Ответы (3)


Привет, догадчик. Я сделал нечто подобное, но я основал свое на этой серии

http://www.blogs.intuidev.com/post/2010/post/2010/01/25/TabControlStyling_PartOne.aspx

Используемый метод - просто стилизовать шаблон tabitems. например:

<TabControl.Resources>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                <!-- your custom template goes here -->

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TabControl.Resources>

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

Надеюсь, поможет.

person Val    schedule 07.09.2010
comment
Я еще не получил TabItems, привязанные к заголовку (используя Text = {Binding Header} - он не работает по какой-либо причине), но он оказывает видимое влияние на стиль TabItems, так что это может быть многообещающим угол. Есть идеи, почему не удалась привязка к заголовку? - person guesser; 07.09.2010
comment
Теперь я понимаю, что вы имеете в виду, когда говорите, что мне придется переопределить способ отображения элементов табуляции (т.е. когда я помещаю туда только TextBlock, я получаю только TextBlock, а не содержащее его поле). Я надеюсь избежать написания этого и изменения поведения, если это вообще возможно. - person guesser; 07.09.2010
comment
Не уверен, почему привязка не удалась, но попробуйте добавить привязку к установщику над установщиком шаблона. ‹Setter Property = Header Value = {Binding ...} /› И посмотрите, работает ли это. Может быть способ получше, но, по крайней мере, теперь у вас есть запасной вариант;) - person Val; 07.09.2010

Просто мысль,

вы пробовали просто добавить текстовый блок в TabItem.Header? Если вы сделаете это вместо шаблона, это может сработать. Имеет для меня в прошлом

person TerrorAustralis    schedule 07.09.2010
comment
Это идея, и я уже играл с ней раньше. Я не мог найти способ сделать это, не всегда явно устанавливая TextBox и TextBlock Text в подходящее время ... но мне было бы очень интересно, есть ли способ использовать эту идею без необходимости делать это. (например, какой-то способ сделать это в xaml с привязкой к значению) - person guesser; 07.09.2010
comment
У вас есть какой-нибудь объект за вкладками, к которому вы можете привязаться? например, список строк или что-то в этом роде? Потому что, если вы попытаетесь привязаться к заголовку, когда вы используете свойство header, он будет набит. Кстати, есть способ использовать привязку между одноуровневыми элементами. Просто назовите элемент (например, Name = "MyControl", затем вы можете привязать его, используя Binding ElementName=MyControl, Path=PropertyToBindTo. В противном случае вы можете использовать Binding RelativeSource={RelativeSource, Mode=FindAncestor, AncestorType=TypeOfParentYouWantToBindTo} - person TerrorAustralis; 07.09.2010
comment
Спасибо. Эта информация о привязке между братьями и сестрами может пригодиться для работы с видимостью. На данный момент у меня есть невидимый ToggleButton в ContentPresenter TabItem (модификация моего решения этого вопроса), и я привязываю видимость к его свойству IsChecked с помощью вашей подсказки. Я не уверен, смогу ли я получить к нему доступ из моего кода, но попробовать стоит. - person guesser; 07.09.2010
comment
Зависит от того, как вы хотите, чтобы текстовое поле стало редактируемым. Вы можете просто использовать DataTriggers, чтобы при выборе вкладки заголовок стал редактируемым, просто используйте триггер данных, привязанный к свойству IsSelected (или тому, что есть в шаблонах вкладок). Если вы хотите, я готов переписываться с вами по этому поводу, потому что, если вы добавляете столько логики в свой пользовательский интерфейс, модель просмотра, вероятно, будет подходящим вариантом :) - person TerrorAustralis; 07.09.2010
comment
Я удалил невидимую кнопку ToggleButton и теперь установил привязку ItemsSource моего элемента управления TabControl к списку объектов. Объекты содержат дополнительное значение, отражающее, происходит ли редактирование, и теперь я привязываю к нему видимость. Я совершенно не знаком с моделями просмотра. Переписка может быть хорошей идеей :) - person guesser; 07.09.2010
comment
kk, если вы хотите, вы можете связаться со мной по адресу [email protected] У меня есть несколько примеров использования ViewModel, которые идеально подходят для вашей ситуации - person TerrorAustralis; 07.09.2010

Я думаю, что у меня это есть (хотя все еще немного скрещивает пальцы - я еще не имел дело с видимостью TextBlock и TextBox для переименования).

Это похоже на решение Val в том, что я работаю в TabControl.Resources над его TabItem, но это свойство HeaderTemplate, и я просто переопределяю ContentPresenter в DataTemplate. (меры по предотвращению замены \ уничтожения большого количества хороших поведений, которые предоставляются бесплатно с TabControl)

<TabControl.Resources>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <ContentPresenter>
                        <ContentPresenter.Content>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{TemplateBinding Content}"/>
                                <TextBox Text="{TemplateBinding Content}"/>
                            </StackPanel>
                        </ContentPresenter.Content>
                    </ContentPresenter>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TabControl.Resources>

Я в некоторой степени новичок в WPF, так что это в основном результат постоянных экспериментов с тем, что я мог найти в Google. Тем, кто заинтересован, эта ссылка (на StackOverflow) в конечном итоге помогла мне больше всего - Стиль заголовка вкладки WPF

person guesser    schedule 07.09.2010