Eliminar el estilo de relieve en un TabItem deshabilitado

Tengo lo siguiente TabItem (by saying "TabItem", I actually mean the button to activate the Tab):

<TabItem RequestBringIntoView="activateTab_Click" Name="tabImplantation" Width="270" Height="138" BorderBrush="{x:Null}" IsEnabled="False" Foreground="#FF075C81">
    <TabItem.Header>
        <StackPanel Orientation="Horizontal">
            <Image Width="148"  Margin="-5,0,0,0" VerticalAlignment="Stretch" Name="implantation_pic" Source="/project;component/Images/implantation_a.jpg" />
        </StackPanel>
    </TabItem.Header>
    ...
</TabItem>

As you see, it's a customized TabItem con una Image object in it. I've removed the border by setting BorderBrush="{x:Null}" y funciona bien.

However, if it's disabled (IsEnabled="False"), it renders some kind of an inner emboss shadow or something like that (could also be a border, I'm not sure about that).

How to render it without this border in case it's disabled? See also the pictures below. Thanks in advance!

Please note that I'm not a c# expert and I'm just doing some restyling. The development of the program itself was outsourced.

The TabItem is enabled and renders correctly

The TabItem is disabled and renders a border

preguntado el 28 de agosto de 12 a las 14:08

1 Respuestas

To achieve the look you want you'll have to edit the TabItem's ControlTemplate (this is easy to do using Blend).

There's no "inner emboss shadow" that's being rendered when the control's disabled, it maybe the border effect. Here's the edited version of the ControlTemplate that disables that border when IsEnabled = false (Add this to your Window.Resources or Application.Resources):

<Style x:Key="TabItemFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="3,3,3,1" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F3F3F3" Offset="0"/>
        <GradientStop Color="#EBEBEB" Offset="0.5"/>
        <GradientStop Color="#DDDDDD" Offset="0.5"/>
        <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#EAF6FD" Offset="0.15"/>
        <GradientStop Color="#D9F0FC" Offset=".5"/>
        <GradientStop Color="#BEE6FD" Offset=".5"/>
        <GradientStop Color="#A7D9F5" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
    <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
    <SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
    <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Padding" Value="6,1,6,1"/>
        <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid SnapsToDevicePixels="true">
                        <!--previous (default) border brush value was BorderBrush="{TemplateBinding BorderBrush}"-->
                        <Border x:Name="Bd" BorderBrush="{x:Null}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                            <ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="false"/>
                                <Condition Property="IsMouseOver" Value="true"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>

                        </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">
                            <!--previous (default) border brush value was BorderBrush="{StaticResource TabItemDisabledBorderBrush}"-->
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{x:Null}" />
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Here's how the control will look like after applying the style changes (Preview in Blend + SketchFlow for VS2012) :

Preview in Blend + SketchFlow for VS2012

Respondido 29 ago 12, 09:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.