1

我有一个包含 TabItems 的 TabControl。我覆盖了他们的 ItemTemplate 以包含：

  • 显示 TabItem 标题的 TextBlock
  • 关闭选项卡的按钮 (X)

现在我想让“X”按钮仅在选择 TabItem 或鼠标悬停时可见。

到目前为止，这是我的 XAML 代码...

<TabControl x:Name="tabControl" 
                    ItemsSource="{Binding OpenedItems}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <Grid Name="grid" VerticalAlignment="Center">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding TabCaption}"  
                                   Grid.Column="0"
                                   Foreground="White"
                                   HorizontalAlignment="Left" 
                                   Margin="3" 
                                   Name="label_TabTitle" 
                                   VerticalAlignment="Center" />
                        <Button Content="X"  
                                Grid.Column="1"
                                Foreground="White"
                                HorizontalAlignment="Right" 
                                Margin="3" 
                                Name="button_close" 
                                VerticalAlignment="Center" 
                                Width="20" 
                                Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" 
                                Visibility="Hidden" 
                                Click="button_close_Click_1">
                        </Button>
                    </Grid>

                    <DataTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True" >
                            <Setter TargetName="button_close" Property="Visibility" Value="Visible"/>
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="Background" Value="#1C1C1C" />
                    <Setter Property="Content" Value="{Binding TabContentView}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TabItem}">
                                <Grid Name="Grid"
                              Background="{StaticResource GrayBrush}">
                                    <ContentPresenter x:Name="ContentSite"
                                                  VerticalAlignment="Center"
                                                  HorizontalAlignment="Center"
                                                  ContentSource="Header"
                                                  RecognizesAccessKey="True">
                                    </ContentPresenter>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Grid" Property="Background" Value="{StaticResource BlueBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="Grid" Property="Background" Value="{StaticResource LightBlueBrush}" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.ItemContainerStyle>
        </TabControl>

使用 DataTemplate 中的触发器，它有点工作.. 但是：您必须将鼠标直接悬停在标签上才能显示按钮。所以基本上，不可能点击按钮，因为它又消失了。

对于这些 WPF 模板，我将不胜感激！

谢谢，克里斯蒂安

4

2 回答 2

2

看起来好像您的 TabItem 没有设置背景，所以它没有捕捉到MouseOverEvent. 由于 TextBlock 具有前景集并具有文本，因此它会捕获 MouseOverEvent。尝试设置to的Background子网格，您应该会看到将被捕获并显示关闭按钮。DataTemplateTransparentMouseOverEvent

<TabControl x:Name="tabControl" ItemsSource="{Binding OpenedItems}">
    <TabControl.ItemTemplate>
        <DataTemplate>
             <Grid Name="grid" VerticalAlignment="Center" Background="Transparent">
                ...
             </Grid>
             ...
        </DataTemplate>
    </TabControl.ItemTemplate>
    ...
 </TabControl>
于 2013-02-12T00:02:41.180 回答
1

如果您设置不透明度而不是可见性，它会起作用。删除了对可见性的所有引用，更改为不透明度：

您可能想检查我的代码编辑。不是 100% 肯定它是你所拥有的东西的副本，但这个想法是有效的。为什么？没有把握。:) 我猜 Hidden-Button 正在吞噬 MouseEnter 事件，但拒绝传递它们，因为它是隐藏的。

<TabControl x:Name="tabControl" 
                    ItemsSource="{Binding OpenedItems}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <Grid Name="grid" VerticalAlignment="Center">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding TabCaption}"  
                                   Grid.Column="0"
                                   Foreground="White"
                                   HorizontalAlignment="Left" 
                                   Margin="3" 
                                   Name="label_TabTitle" 
                                   VerticalAlignment="Center" />
                        <Button Content="X"  
                                Grid.Column="1"
                                Foreground="White"
                                HorizontalAlignment="Right" 
                                Margin="3" 
                                Name="button_close" 
                                VerticalAlignment="Center" 
                                Width="20" 
                                Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" 
                                Opacity="0"
                                Click="button_close_Click_1">
                        </Button>
                    </Grid>

                    <DataTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True" >
                            <Setter TargetName="button_close" Property="Opacity" Value="1"/>
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="Background" Value="#1C1C1C" />
                    <Setter Property="Content" Value="{Binding TabContentView}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TabItem}">
                                <Grid Name="Grid"
                              Background="{StaticResource GrayBrush}">
                                    <ContentPresenter x:Name="ContentSite"
                                                  VerticalAlignment="Center"
                                                  HorizontalAlignment="Center"
                                                  ContentSource="Header"
                                                  RecognizesAccessKey="True">
                                    </ContentPresenter>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Grid" Property="Background" Value="{StaticResource BlueBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="Grid" Property="Background" Value="{StaticResource LightBlueBrush}" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.ItemContainerStyle>
        </TabControl>
于 2013-02-11T23:57:14.143 回答