마우스 오버 문제를 통한 탭 머리글 배경색 변경

Question

XAML을 처음 사용하고 중첩 탭 컨트롤이 포함 된 응용 프로그램을 디자인하고 있습니다. 최근 마우스 오버 및 선택된 트리거 (selected = green, mouse-over = blue)로 탭 머리글을 변경하는 방법을 찾았습니다. 하지만 두 가지 문제가 있습니다.

1. 내가 중첩 된 탭을 가지고 내부 탭은 또한 외부 TabControl.Resource을 따르고있다 (이것은 나를 위해 괜찮아, 그것은 나를 탭 연합 제공).

2. 이 문제는 마우스 오버 트리거와 관련이 있습니다. 탭을 선택하면 선택한 후 녹색으로 바뀌고 마우스를 놓을 때마다 컨트롤에 마우스를 올려 놓으면 TabHeader이 선택됩니다. 녹색)이 마우스 오버 트리거를 따라 파란색으로 바뀝니다.

이

내 XAML입니다 :

<TabControl Margin="0,0,0,0.2" TabStripPlacement="Left" Background="{x:Null}" BorderBrush="Gainsboro"> 
         <!-- ******outter TAB*******--> 

         <TabControl.Resources> 
          <Style TargetType="TabItem"> 
           <Setter Property="Template"> 
            <Setter.Value> 
             <ControlTemplate TargetType="TabItem"> 
              <Grid Name="TnrT1"> 
               <ContentPresenter x:Name="ContentSite" 
                    VerticalAlignment="Center" 
                    HorizontalAlignment="Center" 
                    ContentSource="Header" 
                    Margin="10,2"/> 

              </Grid> 

              <ControlTemplate.Triggers> 

               <Trigger Property="IsSelected" Value="True"> 
                <Setter TargetName="TnrT1" Property="Background" Value="#FF7AB945"/> 
               </Trigger> 

               <Trigger Property="IsMouseOver" Value="True"> 
                <Setter TargetName="TnrT1" Property="Background" Value="#CC119EDA"/> 
               </Trigger> 


              </ControlTemplate.Triggers> 

             </ControlTemplate> 
            </Setter.Value> 
           </Setter> 
          </Style> 
         </TabControl.Resources> 



         <TabItem x:Name="TnrMng" Height="136" VerticalAlignment="Top" HorizontalAlignment="Left" Width="105" Background="White"> 
          <TabItem.Header> 
           <StackPanel HorizontalAlignment="Center" Width="94" Height="116" VerticalAlignment="Center" Margin="0,1,-0.4,21.4"> 
            <Image Source="Resource/mngp.png" Height="90" Margin="-2,0,-5.6,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="102" /> 
            <TextBlock Height="28" RenderTransformOrigin="0.498,0.913" VerticalAlignment="Center" HorizontalAlignment="Center" Width="84" FontWeight="Normal" FontSize="16" Margin="10,0,0.4,0" FontFamily="Tw Cen MT Condensed Extra Bold">مدیرت استاد</TextBlock> 
           </StackPanel> 
          </TabItem.Header> 
          <Grid> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition/> 
           </Grid.ColumnDefinitions> 
           <TextBox x:Name="inst_inst_search_txt_Copy" Margin="10,58,0,0" TextWrapping="Wrap" FontWeight="Normal" VerticalContentAlignment="Center" Height="22" Controls:TextBoxHelper.Watermark="جستجو استاد" VerticalAlignment="Top" HorizontalAlignment="Left" Width="153" HorizontalContentAlignment="Center"/> 

           <Image x:Name="inst_search_png_Copy" Margin="168,58,0,0" Stretch="Fill" FlowDirection="RightToLeft" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="29"> 
            <Image.Source> 
             <BitmapImage UriSource="Resource/search.png"/> 
            </Image.Source> 
           </Image> 
           <ComboBox x:Name="tnr_search_filter_combo" HorizontalAlignment="Left" Margin="77,10,0,0" VerticalAlignment="Top" Width="86" FontSize="8" Height="22"> 
            <ComboBoxItem Content="همه موارد"/> 
            <ComboBoxItem Content="کد شناسه"/> 
            <ComboBoxItem Content="نام"/> 
            <ComboBoxItem Content="شماره ملی"/> 
            <ComboBoxItem Content="شماره تماس"/> 
            <ComboBoxItem Content="آدرس"/> 
            <ComboBoxItem Content="پست الکترونیک"/> 
           </ComboBox> 
           <ListView x:Name="tnr_tnr_search_lst" HorizontalAlignment="Left" Margin="10,113,0,24.4" Width="175"> 
            <ListView.View> 
             <GridView> 
              <GridViewColumn Header="استاد" HeaderStringFormat="" Width="160"/> 
             </GridView> 
            </ListView.View> 
           </ListView> 

           <!-- ******inner TAB*****--> 
           <TabControl Margin="190,10,0.2,0.4"> 
            <TabItem Header="TabItem"> 
             <Grid Background="#FFE5E5E5"/> 
            </TabItem> 
            <TabItem Header="TabItem"> 
             <Grid Background="#FFE5E5E5"/> 
            </TabItem> 
           </TabControl> 
           <!-- ***inner TAB***--> 

          </Grid> 
         </TabItem> 
         <TabItem Margin="0,7,-0.4,-66.4" Width="105" Height="136"> 
          <TabItem.Header> 
           <StackPanel HorizontalAlignment="Center" Width="94" Height="116" VerticalAlignment="Center" Margin="0,1,-0.4,21.4"> 
            <Image Source="Resource/addp.png" Height="90" Margin="-2,0,-5.6,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="102" /> 
            <TextBlock Height="28" RenderTransformOrigin="0.498,0.913" VerticalAlignment="Center" HorizontalAlignment="Center" Width="84" FontWeight="Normal" FontSize="16" Margin="10,0,0.4,0" FontFamily="Tw Cen MT Condensed Extra Bold">ثبت استاد</TextBlock> 
           </StackPanel> 
          </TabItem.Header> 
          <Grid> 
           <ListBox HorizontalAlignment="Left" Height="366" Margin="49,99,0,0" VerticalAlignment="Top" Width="533"/> 
          </Grid> 
         </TabItem> 
        </TabControl> 
        <!--******Outter TAB*****--> 

그리고 이들은 2 문제를 보여주는 이미지입니다 :

Answer 1

이 날 두 번째 문제부터 시작하자. TabItem에 대한 스타일이 정의되는 방식으로, 마우스가 TabItem (TabItem의 머리글과 내용을 모두 포함) 위에있을 때 배경이 파란색으로 바뀝니다. 그게 당신과 같은 문제가되지 않습니다 (

<MultiTrigger> 
    <MultiTrigger.Conditions> 
     <Condition Property="IsMouseOver" Value="True"/> 
     <Condition Property="IsSelected" Value="False"/> 
    </MultiTrigger.Conditions> 
    <Setter TargetName="TnrT1" Property="Background" Value="#CC119EDA"/> 
</MultiTrigger> 

이제

첫 번째 문제 : MultiTrigger와

<Trigger Property="IsMouseOver" Value="True"> 
    <Setter TargetName="TnrT1" Property="Background" Value="#CC119EDA"/> 
</Trigger> 

: 당신이 항목을 선택하지 않은 경우에만 실행 변경을 원하는 경우에 따라서,이 트리거를 교체 슬프지만 여전히). TabItem 스타일이 (TabControl의 리소스에서) 정의되는 방식으로, 해당 TabControl 내의 모든 TabItem에 적용됩니다 (중첩 TabControls 내의 TabItems - 코드 주석의 내부 TAB 포함). 에는 명시적인 키이 없으므로 TabItem 유형의 모든 컨트롤에 적용됩니다. 이것을 피하려면 스타일을 키 x:Key="MyTabItemStyle"으로 지정하십시오. 그런 다음 해당 스타일을 원하는 TabItem에만 적용하십시오. 따라서 외부 TabItem에 대해서는 Style="{StaticResource MyTabItemStyle}"을 설정할 수 있습니다.