Vertikales MetroTabControl

    • XAML: WPF

    Es gibt 5 Antworten in diesem Thema. Der letzte Beitrag () ist von Gather.

      Vertikales MetroTabControl

      Hallo,
      hab vor einiger Zeit mal ein TabControl geschrieben und stelle es euch hier zur Verfügung, auf das es einem hilft :)
      Spoiler anzeigen

      XML-Quellcode

      1. <!-- Damit das TabControl die TabItems Links anzeigt -->
      2. <Style TargetType="{x:Type TabControl}">
      3. <Setter Property="TabStripPlacement" Value="Left"/>
      4. </Style>
      5. <!-- Der eigentliche Teil. Das TabItem -->
      6. <Style TargetType="{x:Type TabItem}">
      7. <Setter Property="Template">
      8. <Setter.Value>
      9. <ControlTemplate TargetType="{x:Type TabItem}">
      10. <!-- Erstmal ein paar Farben festlegen und auch gleich als Brushes anbieten -->
      11. <ControlTemplate.Resources >
      12. <!-- Um die Farbe des TabControls zu ändern, müsst ihr folgende Wert editieren: -->
      13. <Color x:Key="TabControlNormalColor">#2b579a</Color>
      14. <Color x:Key="TabControlHoverColor">#19478a</Color>
      15. <!-- Wir konvertieren die Farben einfach in Brushes. Hier nichts mehr verändern! -->
      16. <SolidColorBrush x:Key="TabControlBackBrush" Color="{StaticResource TabControlNormalColor}"/>
      17. <SolidColorBrush x:Key="TabControlHoverBrush" Color="{StaticResource TabControlHoverColor}"/>
      18. </ControlTemplate.Resources>
      19. <Grid Name="BG" Background="{StaticResource TabControlBackBrush}" Height="50" Width="150">
      20. <!-- Der kleine, weiße Pfeil, der aufpoppt, wenn die TabPage selektiert wird -->
      21. <Polygon x:Name="arrow" Points="8,0 0,5 8,10" Stroke="white" Fill="white" Height="12" Width="8" RenderOptions.EdgeMode="Unspecified" Visibility="Hidden" Margin="142,0,0,0" />
      22. <!-- Der Header-Text -->
      23. <TextBlock Text="{TemplateBinding Header}" TextAlignment="Center" HorizontalAlignment="Stretch" VerticalAlignment="Center" Foreground="White"/>
      24. <!-- Hier kommen die ganzen Animationen... -->
      25. <Grid.Triggers >
      26. <EventTrigger RoutedEvent="MouseEnter">
      27. <BeginStoryboard >
      28. <Storyboard >
      29. <ColorAnimation From="{StaticResource TabControlNormalColor}" To="{StaticResource TabControlHoverColor}" Duration="00:00:00.400" Storyboard.TargetName="BG" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"/>
      30. </Storyboard>
      31. </BeginStoryboard>
      32. </EventTrigger>
      33. <EventTrigger RoutedEvent="MouseLeave">
      34. <BeginStoryboard >
      35. <Storyboard>
      36. <ColorAnimation From="{StaticResource TabControlHoverColor}" To="{StaticResource TabControlNormalColor}" Duration="00:00:00.400" Storyboard.TargetName="BG" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"/>
      37. </Storyboard>
      38. </BeginStoryboard>
      39. </EventTrigger>
      40. </Grid.Triggers>
      41. </Grid>
      42. <ControlTemplate.Triggers>
      43. <Trigger Property="IsSelected" Value="True">
      44. <!-- Erstmal disablen wir das ganze, damit die Events nicht mehr aufgerufen werden -->
      45. <Setter Property="IsEnabled" Value="False" />
      46. <!-- Dann blenden wir den Pfeil ein... -->
      47. <Setter TargetName="arrow" Property="Visibility" Value="Visible"/>
      48. <Trigger.EnterActions >
      49. <BeginStoryboard >
      50. <Storyboard >
      51. <ThicknessAnimation From="150,0,0,0" To="142,0,0,0" Duration="00:00:00.100" Storyboard.TargetName="arrow" Storyboard.TargetProperty="Margin"/>
      52. </Storyboard>
      53. </BeginStoryboard>
      54. </Trigger.EnterActions>
      55. </Trigger>
      56. <Trigger Property="IsSelected" Value="False">
      57. <!-- Wir enablen das TabItem wieder, damit die Events empfangen werden. -->
      58. <Setter Property="IsEnabled" Value="True" />
      59. </Trigger>
      60. </ControlTemplate.Triggers>
      61. </ControlTemplate>
      62. </Setter.Value>
      63. </Setter>
      64. </Style>


      Ich hoffe, dass es ausreichend kommentiert ist. Jetzt müsst ihr nur noch ein TabControl mit TabItems erstellen und es sieht so aus wie auf dem Bild:

      (Dass es so flackert liegt am Bild ;))

      Ein Beispielprojekt ist im Anhang, glaube aber kaum, dass das jemand brauchen wird.
      Dateien
      Mfg
      Vincent

      Ja ist es. Man sollte jedoch nicht WPF und WinForms in solchen Elementen vermischen, das ist einfach ranz.

      Vergiss Windows Forms. Für einfache und rein funktionale GUIs sicherlich nicht schlecht, für spezielle Dinge wie Effekte, Animationen aber auch solche Sachen einfach nicht ausgelegt. WPF, etc. ist und bleibt die Zukunft.


      Opensource Audio-Bibliothek auf github: KLICK, im Showroom oder auf NuGet.

      Aja, ich verstehe das Problem jetzt nicht...
      [Release] MetroSuite [UPDATE 04.09.2013]- Holt euch den modernen Windows 8 Style. Kannst und war auch damals in dem genau selben Stil.
      Und dieser Stil widerrum ist hiervon abgekuckt:
      MS Office

    Facebook
    Telefonspende