탭 컨트롤 마우스 위로

Question

Google의 부엌 싱크대 같은 스타일로 탭 컨트롤을 만들려고합니다. 마우스가 탭 위로 이동하면 해당 색상을 변경할 수 있고 해당 탭을 클릭하면 내용 배경색이 변경되어 탭이 변경됩니다. 그러나 탭을 클릭하지 않고 마우스를 움직이면 원래 색상으로 되돌아 가고 싶습니다. 나는 서로 다른 색깔의 탭을 원한다. 내가 지금 무엇을 가지고

내가

인트로 탭 내용 "소개에 대한 내용"위에 마우스를 올려 때입니다 빨간색 콘텐츠 글꼴 변경. 나는 그것이 작동하고있는 것을 볼 수 있도록 전경으로 바꿔야했습니다. 나는 xaml과 wpf에 대해 아주 새로운 것을 염두에 두라. 나는 나 자신을 가르치려고 노력하고있다. 그리고 내가 가지고있는 책에는 스타일에 관한 아주 작은 부분이있다.

여기 Google의 부엌 죄책감 모자를 달성하기 위해 노력하고 있습니다. http://gwt.google.com/samples/KitchenSink/KitchenSink.html

도움을 주시면 감사하겠습니다.

<Window x:Class="WpfApplication2.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <SolidColorBrush x:Key="mouseOverColor" 
      Color="Red" /> 
     <Style x:Key="myStyle" TargetType="TabItem"> 
      <Setter Property="BorderThickness" Value="3"/> 
      <Setter Property="BorderBrush" Value="Red"/> 
      <Setter Property="Background" Value="LightBlue"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="TabItem"> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsMouseOver" 
            Value="True"> 
           <Setter Property="Foreground" 
             Value="{StaticResource mouseOverColor}" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 
         <ContentPresenter /> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <TabControl Background="AliceBlue" Grid.Column="1" 
      Grid.ColumnSpan="2" Margin="92,40,37,80" 
      Grid.Row="2"> 
      <TabItem Header="Intro" > 
       <TabItem Style="{StaticResource myStyle}" > 
        Content for intro 
       </TabItem> 
      </TabItem> 
      <TabItem Header="Widgets"> 
       Content for widget 
      </TabItem> 
      <TabItem Header="Panels"> 
       content for panel 
      </TabItem> 
     </TabControl> 
    </Grid> 
</Window> 

Answer 1

기본적으로 선택한 탭의 배경색이 무색이기 때문에 약간 복잡합니다. 따라서 컨트롤 템플릿을 재정의해야합니다. 그것은 당신이 어떤 경우에 매우 상세하다, 다시 시작 할 필요가 없습니다 기본 스타일을 수정하는 것이 좋습니다 :

<ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}"> 
    <Grid SnapsToDevicePixels="True"> 
     <Border x:Name="Bd" BorderBrush="White" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}"> 
      <Border.Style> 
       <Style TargetType="{x:Type Border}"> 
        <Setter Property="Background" Value="Gray"/> 
        <Style.Triggers> 
         <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}" Value="True"> 
          <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" /> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMouseOver}" Value="True"> 
          <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" /> 
         </DataTrigger> 
        </Style.Triggers> 
       </Style> 
      </Border.Style> 
      <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/> 
     </Border> 
    </Grid> 
    <ControlTemplate.Triggers> 
     <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="IsSelected" Value="False"/> 
       <Condition Property="IsMouseOver" Value="True"/> 
      </MultiTrigger.Conditions> 
      <Setter Property="BorderBrush" TargetName="Bd" Value="#FF3C7FB1"/> 
     </MultiTrigger> 
     <Trigger Property="TabStripPlacement" Value="Bottom"> 
      <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/> 
     </Trigger> 
     <Trigger Property="TabStripPlacement" Value="Left"> 
      <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/> 
     </Trigger> 
     <Trigger Property="TabStripPlacement" Value="Right"> 
      <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/> 
     </Trigger> 
     <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="IsSelected" Value="True"/> 
       <Condition Property="TabStripPlacement" Value="Top"/> 
      </MultiTrigger.Conditions> 
      <Setter Property="Margin" Value="-2,-2,-2,-1"/> 
      <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/> 
     </MultiTrigger> 
     <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="IsSelected" Value="True"/> 
       <Condition Property="TabStripPlacement" Value="Bottom"/> 
      </MultiTrigger.Conditions> 
      <Setter Property="Margin" Value="-2,-1,-2,-2"/> 
      <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/> 
     </MultiTrigger> 
     <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="IsSelected" Value="True"/> 
       <Condition Property="TabStripPlacement" Value="Left"/> 
      </MultiTrigger.Conditions> 
      <Setter Property="Margin" Value="-2,-2,-1,-2"/> 
      <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/> 
     </MultiTrigger> 
     <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="IsSelected" Value="True"/> 
       <Condition Property="TabStripPlacement" Value="Right"/> 
      </MultiTrigger.Conditions> 
      <Setter Property="Margin" Value="-1,-2,-2,-2"/> 
      <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/> 
     </MultiTrigger> 
     <Trigger Property="IsEnabled" Value="False"> 
      <Setter Property="Background" TargetName="Bd" Value="#FFF4F4F4"/> 
      <Setter Property="BorderBrush" TargetName="Bd" Value="#FFC9C7BA"/> 
      <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

당신이 기본 색상을 변경하도록 지정 국경에 세터를 변경하려면 배경은 회색이어야합니다.

또한 콘텐츠 부분을 탭과 동일한 색으로 만들려면 TabControl의 추가 바인딩이 필요합니다. 또한이 컨트롤 템플릿이 자동 스타일이나 직접 참조를 통해 하나의 항목에 적용 할 필요가있다 :

<TabControl x:Name="MyControl" Height="200" 
      Background="{Binding RelativeSource={RelativeSource Self}, Path=SelectedItem.Background}"> 
    <TabItem Header="tab1" Background="Red" Template="{DynamicResource TabItemControlTemplate}"/> 
    <TabItem Header="tab2" Background="Green" Template="{DynamicResource TabItemControlTemplate}"/> 
    <TabItem Header="tab3" Background="Blue" Template="{DynamicResource TabItemControlTemplate}"/> 
</TabControl> 

첫 번째 탭을 선택, 마지막 탭 위에 마우스를 올려 :

---

사용 주석 :

<Window ...> 
    <Window.Resources> 
     <ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}"> 
      ... 
     </ControlTemplate> 
    </Window.Resources> 
    <Grid> 
     <!-- You can reference the template anywhere inside the visual tree 
      of the Window if it has been declared in the Resources of the 
      window, most XML elemnts that are children of the Window element 
      are inside its visual tree --> 
     <TabControl ...> 
      <TabItem Template="{StaticResource TabItemControlTemplate}" .../> 
     </TabControl> 
    </Grid> 
</Window>