How do I change the MouseOver property on a TabControl?

Question

So I would like to disable the IsMouseOver effect that happends when you move your mouse over the control. This is what it looks like https://i.imgur.com/P22YCLD.gifv

How do I properly disable it?

XAML

<Menu DockPanel.Dock="Top">
            <TabControl Background="DarkGray" BorderThickness="0" Height="150" Width="1273" Style="{DynamicResource TabControlStyle}">
                <TabControl.Resources>
                    <Style TargetType="TabItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="TabItem">
                                    <Border Name="Border" Margin="-2,0,0,-1" BorderThickness="0">
                                        <ContentPresenter x:Name="ContentSite"
                                                          VerticalAlignment="Center"
                                                          HorizontalAlignment="Center"
                                                          ContentSource="Header"
                                                          Margin="30,5"/>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsSelected" Value="True">
                                            <Setter TargetName="Border" Property="Background" Value="DarkGray" />
                                        </Trigger>
                                        <Trigger Property="IsSelected" Value="False">
                                            <Setter TargetName="Border" Property="Background" Value="#4f4f4f" />
                                            <Setter Property="Foreground" Value="White" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </TabControl.Resources>
                <TabItem Header="Import">
                    <Button Background="Transparent" BorderThickness="0" Margin="10,16,1184,14">
                        <Grid>
                            <Image Source="Icons/file.png"/>
                        </Grid>
                    </Button>
                </TabItem>

                <TabItem Header="Export" />
                <TabItem Header="Extra" />
            </TabControl>
        </Menu>

score 0 · Answer 1 · answered Mar 10 '18 at 11:30

You can override the default template of MenuItem inside Menu to remove the default style

       <Menu.Resources>
            <Style TargetType="{x:Type MenuItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type MenuItem}">
                            <Border Background="{TemplateBinding Background}">
                                <ContentPresenter Content="{TemplateBinding Header}"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Menu.Resources>

Oh wow, I didnt even realize I had the Menu in there! I was trying to edit the template of the TabControl, oh wow.. Thank you! — Melissa, Mar 10 '18 at 11:32

How do I change the MouseOver property on a TabControl?

1 Answers1