Tengo que desarrollar una ficha personalizado de control y decidió crear con WPF/XAML, porque tengo planeado aprender de todos modos. Se debe tener este aspecto cuando se termine:

WPF Personalizado TabControl

He hecho un buen progreso hasta el momento, pero hay dos problemas:

  1. Sólo el primer y último elemento de ficha debe tener una forma redondeada en la parte superior izquierda/inferior de la esquina izquierda. Es posible modificar el estilo de estos elementos, de forma similar a la manera en que lo hice con la ficha seleccionada elemento?
  2. La ficha seleccionada elemento no debe tener un borde en el lado derecho. Traté de hacerlo con z-index y la superposición, pero los resultados fueron más bien decepcionantes. ¿Hay alguna otra manera de hacerlo?

WPF Personalizado TabControl

XAML:

<Window x:Class="MyProject.TestWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TestWindow" Height="350" Width="500" Margin="5" Background="LightGray">
<Window.Resources>
<LinearGradientBrush x:Key="SelectedBorderBrush" StartPoint="0,0" EndPoint="1,0">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="Gray" Offset="0.965"/>
<GradientStop Color="WhiteSmoke" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<Style TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<DockPanel>
<Border
Panel.ZIndex="50"
Margin="0,100,-1,0" 
Background="#FFAAAAAA"
BorderBrush="Gray"
CornerRadius="7,0,0,7"
BorderThickness="1">
<TabPanel
Margin="0,0,0,0"
IsItemsHost="True" />
</Border>
<Border
Background="WhiteSmoke"
BorderBrush="Gray"
BorderThickness="1"
CornerRadius="7,7,7,0" >
<ContentPresenter 
ContentSource="SelectedContent" />
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" 
Background="#FFAAAAAA"
CornerRadius="7,0,0,0"
BorderBrush="Gray"
BorderThickness="0,0,0,1"
Panel.ZIndex="50"
Margin="0,0,0,0"
>
<ContentPresenter x:Name="ContentSite"             
VerticalAlignment="Center"
HorizontalAlignment="Left"
ContentSource="Header"
Margin="10,10,10,10"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter Property="Margin" Value="0,0,-2,0" />
<Setter TargetName="Border" 
Property="BorderBrush" 
Value="{StaticResource SelectedBorderBrush}"/>
<Setter TargetName="Border" 
Property="Background" 
Value="WhiteSmoke" />
<Setter TargetName="Border" 
Property="CornerRadius" 
Value="0,0,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl Name="_menuTabControl" TabStripPlacement="Left" Margin="5">
<TabItem Name="_tabItem1" Header="First Tab Item" ></TabItem>
<TabItem Name="_tabItem2" Header="Second Tab Item" >
<Grid />
</TabItem>
<TabItem Name="_tabItem3" Header="Third Tab Item" >
<Grid />
</TabItem>
</TabControl>
</Grid>

Edit: Gracias a Vlad, yo podría resolver el segundo problema con un gradiente de frontera pincel. Ver las actualizaciones de código XAML de la solución.

Edición: Vlad solucionado el primer problema.

OriginalEl autor xsl | 2010-04-14

1 Comentario

  1. 9

    Para el segundo problema, que tal vez debería intentar retire el recorte? Tenga cuidado sin embargo de la posibles problemas.

    Para el primer problema, usted debe tratar de estilo gatillo en propiedad IsSelected. (Edit: veo, lo están haciendo exactamente de esta forma.) Tener un vistazo de cómo se aplica esto en la plantilla predeterminada en MSDN. Tenga en cuenta que están utilizando ZIndex, demasiado.

    Editar:

    He encontrado una solución para su primera/última pestaña problema. Usted necesidad de utilizar las propiedades asociadas a designar a la primera/última ficha:

    En su TestWindow clase de definir la propiedad asociada:

    public static bool GetIsFirstTab(DependencyObject obj)
    {
    return (bool)obj.GetValue(IsFirstTabProperty);
    }
    public static void SetIsFirstTab(DependencyObject obj, bool value)
    {
    obj.SetValue(IsFirstTabProperty, value);
    }
    public static readonly DependencyProperty IsFirstTabProperty =
    DependencyProperty.RegisterAttached("IsFirstTab", typeof(bool),
    typeof(TestWindow), new UIPropertyMetadata(false));

    Entonces, en su primera ficha que establece esta propiedad:

    <Window x:Class="MyProject.TestWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MyProject"
    ...
    />
    ...
    <TabItem Name="_tabItem1" Header="First Tab Item"
    local:TestWindow.IsFirstTab="true">
    </TabItem>

    A continuación, debe definir un disparador para:

    <Trigger Property="IsSelected" Value="True">
    <Setter TargetName="Border" 
    Property="Background" 
    Value="WhiteSmoke" />
    </Trigger>
    <Trigger Property="local:Window1.IsFirstTab" Value="True">
    <Setter TargetName="Border" 
    Property="Background" 
    Value="Red" />
    </Trigger>

    Esto debe ayudar.

    El mismo truco que el trabajo con la última ficha. O usted puede tener un número en lugar de bool como propiedad adjunta.

    Gracias. Usted me ayudó mucho.
    usted es bienvenido!
    MUY buen uso de la adjunta props Vlad. Bien hecho de verdad!

    OriginalEl autor Vlad

Dejar respuesta

Please enter your comment!
Please enter your name here