WPF TabItem OnMouseOver 应触发 TabItem 内 Button 的可见性答案

【问题标题】：WPF TabItem OnMouseOver shall trigger the visibility of a Button inside the TabItemWPF TabItem OnMouseOver 应触发 TabItem 内 Button 的可见性
【发布时间】：2013-02-12 08:02:41
【问题描述】：

我有一个包含 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 模板有任何帮助，我将不胜感激！

谢谢，克里斯蒂安

【问题讨论】：

标签： wpf triggers datatemplate

【解决方案1】：

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

<TabControl x:Name="tabControl" ItemsSource="{Binding OpenedItems}">
    <TabControl.ItemTemplate>
        <DataTemplate>
             <Grid Name="grid" VerticalAlignment="Center" Background="Transparent">
                ...
             </Grid>
             ...
        </DataTemplate>
    </TabControl.ItemTemplate>
    ...
 </TabControl>

【讨论】：

像魅力一样工作！谢谢，我永远不会意识到这是问题所在......

【解决方案2】：

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

您可能想检查我的代码编辑。不是 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>

【讨论】：