自定义 TabControl TabItem 标题项的 HorizontalStretch

问题描述 投票:0回答:2

我有以下

TabControl
自定义
ItemTemplate
(添加
ScrollViewer
功能)。现在我想水平拉伸(绿色/红色)
Grid
以使用整个宽度。我已经在
HorizontalAlignment
HorizontalContentAlignment
Grid
中尝试了所有
ScrollViewer
TabPanel
属性。

但实际上我不知道如何解决它。

<TabControl Grid.Row="1" TabStripPlacement="Left" ItemsSource="{Binding ViewModel.Collection}" SelectedIndex="0">
    <!-- Vertical TabItems with ScrollViewer -->
    <TabControl.Template>
        <ControlTemplate TargetType="{x:Type TabControl}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <ScrollViewer Grid.Column="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible">
                    <TabPanel x:Name="HeaderPanel" IsItemsHost="True" Margin="0,4,0,0"/>
                </ScrollViewer>
                <ContentPresenter Grid.Column="1" x:Name="PART_SelectedContentHost" Margin="4" ContentSource="SelectedContent"/>
            </Grid>
        </ControlTemplate>
    </TabControl.Template>
    <!-- Define TabItem Header -->
    <TabControl.ItemTemplate>
        <DataTemplate>
            <Grid x:Name="Grid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Text="{Binding Path=Name}"/>
                <TextBlock Grid.Row="1">
                    <Run Text="{Binding Path=Header.Page}"/>
                    <Run Text="/"/>
                    <Run Text="{Binding Path=Header.PageEnd}"/>
                    <Run Text=" - "/>
                    <Run Text="{Binding Path=Header.ProjectNumber}"/>
                </TextBlock>
            </Grid>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=CheckResult.CheckStatus}" Value="{x:Static macros:ECheckStatus.Unchecked}">
                    <Setter TargetName="Grid" Property="Background" Value="Transparent"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=CheckResult.CheckStatus}" Value="{x:Static macros:ECheckStatus.Io}">
                    <Setter TargetName="Grid" Property="Background" Value="LightGreen"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=CheckResult.CheckStatus}" Value="{x:Static macros:ECheckStatus.Warning}">
                    <Setter TargetName="Grid" Property="Background" Value="Orange"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=CheckResult.CheckStatus}" Value="{x:Static macros:ECheckStatus.Error}">
                    <Setter TargetName="Grid" Property="Background" Value="Red"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>
c# wpf
2个回答
0
投票

您可以将

HorizontalAlignment
Grid
属性设置为
Stretch
。这是一个如何做的例子

<Grid x:Name="Grid" HorizontalAlignment="Stretch">

这应该水平拉伸网格以填充可用空间


0
投票

你的问题是你的目标是项目容器的内容而不是容器本身。

为了提高性能,您应该避免使用

Run
来定义
TextBlock
的文本。而是实施一个
IValueConverter
来组成
string
.

要解决此问题,您必须覆盖

TabItem
的模板并在
ControlTemplate
中实现触发器:

<TabControl>
  <TabControl.ItemContainerStyle>
    <Style TargetType="TabItem">
      <Setter Property="Template">
        <Setter.Value>

          <!-- The DataContext of the TabItem is the data item -->
          <ControlTemplate TargetType="TabItem">
            <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
              <ContentPresenter />
            </Border>

            <ControlTemplate.Triggers>
              <DataTrigger Binding="{Binding CheckResult.CheckStatus}" 
                           Value="{x:Static macros:ECheckStatus.Io}"> 
                <Setter Property="Background"
                        Value="LightGreen" />
              </DataTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </TabControl.ItemContainerStyle>
</TabControl>

如果您想避免覆盖

TabItem
控件的视觉状态,您可以考虑在
Style.Triggers
中实现触发器。请注意,这会限制可能性,因为这些触发器将被内部视觉状态管理器覆盖。通过覆盖上面示例中的默认模板,您可以获得最大的灵活性。

© www.soinside.com 2019 - 2024. All rights reserved.