模板中的触发器导致错误渲染
我正在实现我自己的假 TabControl
,使其看起来像 IE8-tabs (我知道 tabcontrol 的其他实现)。
我的 TabControl
派生自 Selector
,我的 TabItem
派生自 ContentControl
。 当选择一个选项卡时,我将 IsSelected (依赖属性)设置为 true。 我的 Trigger
如下所示:
<Trigger Property="IsSelected" Value="true">
<Setter Property="Margin" Value="0,0,0,0"/>
</Trigger>
我的 TabItem
的默认边距是 0,2,0,0。换句话说,未选定的 TabItem
应该与选定的有轻微的偏移。 我尝试过反向执行此操作,并使用高度代替。结果是所选的 TabItem
似乎被剪裁而不是改变边距。 当直接在标签上设置属性时,我得到了正确的视觉效果,即:
<local:TabItem IsSelected="true"/>
我尝试使我的 Arrange
、Visual
和 Measure
无效IsSelected
依赖属性没有取得太大成功。
我在这里缺少什么?
编辑:
这是 TabItem
的完整样式(该样式部分基于此项目:http://www.codeproject.com/KB/WPF/WpfTabControl.aspx):
<Style TargetType="{x:Type local:TabItem}">
<Setter Property="Background" Value="{Binding Path=TabItemNormalBackground, RelativeSource={RelativeSource Self}}"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Height" Value="26"/>
<Setter Property="Margin" Value="0,2,0,0"/>
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:TabItem}">
<Border CornerRadius="3,3,0,0"
Background="{TemplateBinding Background}"
BorderBrush="{StaticResource TabItemOuterBorderBrush}"
BorderThickness="1,1,1,0">
<Border CornerRadius="3,3,0,0"
Background="{TemplateBinding Background}"
BorderBrush="{StaticResource TabItemInnerBorderBrush}"
BorderThickness="1,1,1,0">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0" Content="{TemplateBinding Icon}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<ContentPresenter Grid.Column="1"
SnapsToDevicePixels="True"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
<Button x:Name="PART_CloseButton"
Grid.Column="2"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="5,0,5,0"
Style="{StaticResource CloseButtonStyle}"
Visibility="Collapsed"
/>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="{Binding Path=TabItemSelectedBackground, RelativeSource={RelativeSource Self}}"/>
<Setter Property="Margin" Value="0,0,0,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm implementing my own fake TabControl
to look like IE8-tabs (I'm aware of other implementations of tabcontrol).
My TabControl
derives from Selector
, and my TabItem
s derive from ContentControl
.
When a tab is selected I set IsSelected
(a dependencyproperty) to true.
My Trigger
looks like this:
<Trigger Property="IsSelected" Value="true">
<Setter Property="Margin" Value="0,0,0,0"/>
</Trigger>
The default margin for my TabItem
is 0,2,0,0. In other words, unselected TabItem
s should have a slight offset to the selected.
I've tried doing this in reverse, and using height instead. The result is that TabItem
s that are selected seems to be clipped instead of altering the margin.
I get the correct visual when the property is set on the tag directly, i.e.:
<local:TabItem IsSelected="true"/>
I've tried invalidating Arrange
, Visual
and Measure
in my IsSelected
dependency property without much success.
What am I missing here?
Edit:
Here's the complete style for the TabItem
(the style is partly based on this project: http://www.codeproject.com/KB/WPF/WpfTabControl.aspx):
<Style TargetType="{x:Type local:TabItem}">
<Setter Property="Background" Value="{Binding Path=TabItemNormalBackground, RelativeSource={RelativeSource Self}}"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Height" Value="26"/>
<Setter Property="Margin" Value="0,2,0,0"/>
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:TabItem}">
<Border CornerRadius="3,3,0,0"
Background="{TemplateBinding Background}"
BorderBrush="{StaticResource TabItemOuterBorderBrush}"
BorderThickness="1,1,1,0">
<Border CornerRadius="3,3,0,0"
Background="{TemplateBinding Background}"
BorderBrush="{StaticResource TabItemInnerBorderBrush}"
BorderThickness="1,1,1,0">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0" Content="{TemplateBinding Icon}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<ContentPresenter Grid.Column="1"
SnapsToDevicePixels="True"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
<Button x:Name="PART_CloseButton"
Grid.Column="2"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="5,0,5,0"
Style="{StaticResource CloseButtonStyle}"
Visibility="Collapsed"
/>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="{Binding Path=TabItemSelectedBackground, RelativeSource={RelativeSource Self}}"/>
<Setter Property="Margin" Value="0,0,0,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
没关系。我将 tabitemsdesiredsize 存储在 MeasureOverride 中,并忘记在后续调用中清除它们。
Nevermind. I stored the tabitems desiredsize in MeasureOverride, and forgot to clear them in subsequent calls.