Question

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

显示TabItem标题的TextBlock
关闭标签的按钮（X）

现在我想只在选中TabItem或鼠标悬停在它上面时才能使“X”-Button可见。

到目前为止，这是我的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内部的触发器可以实现..但是：您必须将鼠标直接悬停在Label上才能显示按钮。所以基本上，单击按钮是不可能的，因为它会再次消失。

感谢您对这些WPF模板的任何帮助！

谢谢，Christian

Answer 1

看起来您的TabItem没有设置背景，因此它没有捕获MouseOverEvent。由于TextBlock具有前景集并具有文本，因此它捕获MouseOverEvent。尝试将Background的{{1}}子网格设置为DataTemplate，您应该会看到Transparent将被捕获并显示关闭按钮。

MouseOverEvent

Answer 2

如果设置不透明度而不是可见性，则可以正常工作。删除了对Visibility的所有引用，更改为Opacity：

您可能想检查我的代码编辑。不是100％肯定它与你所拥有的重复，但这个想法是有效的。为什么？不确定。 :)我猜测隐藏按钮吞下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>

WPF TabItem OnMouseOver将触发TabItem内Button的可见性

2 个答案: