我有以下
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>
您可以将
HorizontalAlignment
的Grid
属性设置为Stretch
。这是一个如何做的例子
<Grid x:Name="Grid" HorizontalAlignment="Stretch">
这应该水平拉伸网格以填充可用空间
你的问题是你的目标是项目容器的内容而不是容器本身。
为了提高性能,您应该避免使用
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
中实现触发器。请注意,这会限制可能性,因为这些触发器将被内部视觉状态管理器覆盖。通过覆盖上面示例中的默认模板,您可以获得最大的灵活性。