WPF-tabcontrol-styling

Habe ich eine Benutzeroberfläche, die eine ziemlich standard-look and feel. Es hat eine Spalte der Symbole auf der linken Seite, die, wenn geklickt haben, öffnen Sie einen anderen Benutzer-Steuerelement auf der rechten Seite. Derzeit bin ich mit separaten Steuerelementen für die Auswahl-icons und die usercontrol-containment. Ich bin mit seltsamen Fokus-Probleme, ich bin müde zu versuchen zu entschärfen, und Frage mich, wenn ich könnte Stil ein tabcontrol zu schauen, wie meine Benutzeroberfläche (unter der Annahme, dass ein tabcontrol würde keine Fokus-Probleme bei der Navigation tabs).

Hier ist ein screenshot der basic UI. Das styling ist meist darüber, wie man die tabcontrols Seite die Auswahl zu schauen, wie meine Spalte von Symbolen. Wer will werfen Ihren Hut in den ring, wie könnte ich dies erreichen mit ein tabcontrol? Mein xaml ist ziemlich schwach in diesem Punkt.

alt-text http://img413.imageshack.us/img413/8399/directoru.png

  • Oder es könnte mir fast eine Woche Zeit zu finden, um hinzuzufügen ein Beispiel. Ich hoffe, es hilft.
  • Es war BrentRobi, dass aus dem ursprünglichen post und hätte die Bild. Das Beispiel, das ich Rede ist in der Bearbeitung der akzeptierten Antworten unten.
  • Tut mir Leid - du hast Recht. Ich tippte '@B' und akzeptierte den ersten Eintrag ohne Prüfung.
  • Imageshack Bild nicht mehr aktiv. Jede chance, es kann eingebettet werden?
  • Sorry, ich habe längst den überblick verloren, das Bild und auch der app war es aus. Nett zu sehen, das immer noch relevant, 7 Jahre später aber...
InformationsquelleAutor BrettRobi | 2010-03-25
  1. 18
    <TabControl TabStripPlacement="Left">
    ...
</TabControl>

    Dann setzen Sie die Symbole in der Header-Eigenschaft des TabItems und die Benutzersteuerelemente in der Content-Eigenschaft. Zu bekommen, die Sie etwa auf halbem Weg gibt. Wenn Sie möchten, dass die genaue gleiche Aussehen, die Sie benötigen, um retemplate das TabControl und TabItem durch kopieren der aktuellen Vorlage (Mischung verwenden oder ShowMeTheTemplate zum kopieren der aktuellen Vorlage) und ändern Sie ihn nach Bedarf. Aber gerade die änderung dieser Eigenschaften können Sie testen, ob ein TabControl entledigt sich Ihrer Schwerpunkte.

    Edit: Hier ein Beispiel-template, das sollte ziemlich nah an deinem screenshot

    <Style TargetType="{x:Type TabItem}">
    <Setter Property="Background" Value="Transparent" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">

                <Border x:Name="PART_Border" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="LightGray" Margin="2">
                    <ContentPresenter ContentSource="Header" Margin="2" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="PART_Border" Property="BorderBrush" Value="Black" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type TabControl}">
    <Setter Property="TabStripPlacement" Value="Left" />
    <Setter Property="Margin" Value="2" />
    <Setter Property="Padding" Value="2"    />
    <Setter Property="Background" Value="White" />


    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Name="ColumnDefinition0" />
                        <ColumnDefinition Width="0" Name="ColumnDefinition1" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" Name="RowDefinition0" />
                        <RowDefinition Height="*" Name="RowDefinition1" />
                    </Grid.RowDefinitions>

                    <Border x:Name="HeaderBorder" 
                            BorderBrush="Black" 
                            BorderThickness="1" 
                            CornerRadius="5" 
                            Background="#FAFAFA"
                            Margin="0,0,0,5">
                        <TabPanel IsItemsHost="True"
                                  Name="HeaderPanel" 
                                  Panel.ZIndex="1" 
                                  KeyboardNavigation.TabIndex="1"
                                  Grid.Column="0" 
                                  Grid.Row="0" 
                         />
                    </Border>

                    <Grid Name="ContentPanel" 
                          KeyboardNavigation.TabIndex="2" 
                          KeyboardNavigation.TabNavigation="Local" 
                          KeyboardNavigation.DirectionalNavigation="Contained" 
                          Grid.Column="0" 
                          Grid.Row="1">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="5">
                            <ContentPresenter Content="{TemplateBinding SelectedContent}" 
                                              ContentTemplate="{TemplateBinding SelectedContentTemplate}" 
                                              ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" 
                                              ContentSource="SelectedContent" 
                                              Name="PART_SelectedContentHost" 
                                              Margin="2" 
                                              SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" 
                            />
                        </Border>
                    </Grid>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="TabControl.TabStripPlacement" Value="Bottom">
                        <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="1" />
                        <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                        <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="Auto" />
                        <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="0,5,0,0" />
                    </Trigger>
                    <Trigger Property="TabControl.TabStripPlacement" Value="Left">
                        <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="HeaderPanel" Property="Grid.Column" Value="0" />
                        <Setter TargetName="ContentPanel" Property="Grid.Column" Value="1" />
                        <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width" Value="Auto" />
                        <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width" Value="*" />
                        <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                        <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="0" />
                        <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="0,0,5,0" />
                    </Trigger>
                    <Trigger Property="TabControl.TabStripPlacement" Value="Right">
                        <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="HeaderPanel" Property="Grid.Column" Value="1" />
                        <Setter TargetName="ContentPanel" Property="Grid.Column" Value="0" />
                        <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width" Value="*" />
                        <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width" Value="Auto" />
                        <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                        <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="0" />
                        <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="5,0,0,0" />
                    </Trigger>
                    <Trigger Property="UIElement.IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

    Es ist im Grunde eine Kopie von der normalen TabControl mit einigen Grenzen Hinzugefügt und entfernt werden. Hoffe, das hilft.

    • Danke für die Antwort. Es ist wirklich die retemplating, ich bin auf der Suche nach Rat auf. Es ist der Teil ich wirklich denken blockieren könnte dies eine geeignete Lösung.
    • Ich poste ein Beispiel, wenn ich nach Hause komme in ein paar Stunden.
    • Brett, ich erwarte, dass Sie werden feststellen, dass retemplating wird nicht so schlimm sein. Es klingt beängstigend, aber wenn man einmal in es ist ein bisschen Spaß. Plus, dass die alte Vorlage wiederherstellen bedeutet, Sie können immer von vorne beginnen, wenn schlimmsten comes zu schlimmsten Fall.
    • Vielen Dank für das Beispiel Bryan. Ich nehme einen genaueren Blick auf Sie in den nächsten Tagen.
    InformationsquelleAutor Bryan Anderson
  2. 1

    Wie etwa temlating das TabControl-Steuerelement mit einem DockPanel, und die Bindung des DockPanel.Dock des TabPanel der ursprünglichen TabStripPlacement Eigenschaft ?.. wie gezeigt

    xaml
<Style  TargetType="{x:Type TabControl}" >
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <DockPanel KeyboardNavigation.TabNavigation="Local" LastChildFill="True">
                        <TabPanel DockPanel.Dock="{TemplateBinding TabStripPlacement}"
                            Name="HeaderPanel"
                            Grid.Row="0"
                            Panel.ZIndex="1" 
                            Margin="0,0,4,1" 
                            IsItemsHost="True"
                            KeyboardNavigation.TabIndex="1"
                            Background="Transparent" />
                        <Border 
                            Name="Border" 
                            Background="Transparent" 
                            BorderBrush="Black" 
                            BorderThickness="1" 
                            CornerRadius="2" >
                            <ContentPresenter 
                                ContentSource="SelectedContent" />
                        </Border>
                    </DockPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="Black" />
                            <Setter TargetName="Border" Property="BorderBrush" Value="DarkGray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    InformationsquelleAutor Michael Sutton
Schreibe einen Kommentar