WPF的TabItem的onmouseover將觸發一個按鈕的可見性的TabItem

Question

裏面我有一個包含的TabItems一個TabControl。我重寫了他們的ItemTemplate包含：

• 一個TextBlock顯示的TabItem
• 的按鈕（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模板的任何幫助！

謝謝，基督教

Answer 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> 

Answer 2

如果設置不透明度，而不是它的作品的知名度。刪除了所有對可見性的引用，更改爲不透明度：

您可能需要檢查我的代碼編輯。不是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>