2016-05-16 2 views
0

Я использую MahApp, я создал следующие TabControl:Как изменить цвет TabItem, когда мышь закончилась?

<TabControl TabStripPlacement="Left" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0"> 
<TabItem> 
    <TabItem.Header> 
     <Image Source="Images/Icon.png"></Image> 
    </TabItem.Header> 
    <TabItem.Content> 
      <Grid> 
       <Controls:Scheduler x:Name="Scheduler"/> 
      </Grid> 
    </TabItem.Content> 
</TabItem> 
</TabControl> 

Как я могу справиться с MouseOver события и изменить цвет? На самом деле, если я пропустите мышь над TabItem, пользователь не поймет, доступен ли TabItem или нет. Заранее спасибо.

ответ

3

Вы можете добавить TabItem Стиль как часть TabControl. Style будет запускаться на основе MouseOver.

<TabControl TabStripPlacement="Left" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0"> 
    <TabControl.Resources> 
     <Style TargetType="{x:Type TabItem}"> 
      <Setter Property="Width" Value="Auto"/> 
      <Setter Property="Background" Value="Transparent" /> 
      <Setter Property="Height" Value="Auto"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="TabItem"> 
         <Border Name="Border" Background="Transparent"> 
          <ContentPresenter x:Name="ContentSite" 
           VerticalAlignment="Center" 
           HorizontalAlignment="Left" 
           ContentSource="Header" 
           Margin="10,2"/> 
         </Border> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsMouseOver" Value="True" SourceName="Border"> 
           <Setter TargetName="Border" Property="Background" Value="Blue" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </TabControl.Resources> 
    <TabItem> 
     <TabItem.Header> 
      <Image Source="Images/Icon.png"></Image> 
     </TabItem.Header> 
     <TabItem.Content> 
      <Grid> 

      </Grid> 
     </TabItem.Content> 
    </TabItem> 
</TabControl> 

Edit: Если вы хотите, чтобы цвет сохраняться при выборе TabItem, добавьте к этому ControlTemplate.Triggers

  <Trigger Property="IsSelected" Value="True"> 
       <Setter TargetName="Border" Property="Background" Value="Blue" /> 
      </Trigger> 
+0

Очень хороший ответ. Спасибо :) Только вопрос: возможно ли сохранить цвет при нажатии кнопки tabItem? – IlDrugo

+1

Да, см. Обновление –

Смежные вопросы