Metro Style für WPF Anwendungen

    • WPF

    Es gibt 14 Antworten in diesem Thema. Der letzte Beitrag () ist von phil.

      Metro Style für WPF Anwendungen

      Hallo,
      es kommt ziemlich häufig vor, dass ein Programm im Showroom WinForms + Metro Style benutzt. Ich denke, dass zeugt aus der Vorstellung, dass es in WPF (noch) schwieriger sei. Also will ich in diesem kleinen Tutorial vom Gegenteil überzeugen. Ihr schafft es mit wenigen Zeilen Code, alle Controls Metro-Stylisch aussehen zu lassen. Ich werde in diesem "Tutorial" zwei Vorgehensweisen nennen und 3 Metro Stiles vorstellen. Aber von vorne. Warum ist WPF für einen anderen Style besser geeignet als WinForms?:
      • Ihr braucht keine neuen Controls.
      • Ihr könnt ständig den Style wechseln oder rausnehmen
      • Animationen sehen wesentlich besser aus

      Okay, also werde ich jetzt Schritt für Schritt erklären, wie ihr an den ersten Stile, den ich vorstellen will, kommt:

      MahApps.Metro
      Homepage

      1. Ihr öffnet Visual Studio und legt ein neues WPF Projekt an.
      2. Ihr geht auf "Projekt" > "NuGet-Pakete verwalten..."
      3. Ihr gebt oben Rechts bei Suchen "mahapps" ein.
      4. Ihr installiert das Paket MahApps.Metro


      5. Nach der erfolgreichen Installation öffnet ihr in eurem Projektmappen Explorer die "Application.xaml" und trag folgendes ein zwischen <Application.Resources> und </Application.Resources>:
      Spoiler anzeigen

      XML-Quellcode

      1. <ResourceDictionary>
      2. <ResourceDictionary.MergedDictionaries>
      3. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
      4. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
      5. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
      6. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
      7. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
      8. </ResourceDictionary.MergedDictionaries>
      9. </ResourceDictionary>

      Bei euch müsste es dann so aussehen:
      Spoiler anzeigen

      XML-Quellcode

      1. <Application x:Class="Application"
      2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      4. StartupUri="MainWindow.xaml">
      5. <Application.Resources>
      6. <ResourceDictionary>
      7. <ResourceDictionary.MergedDictionaries>
      8. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
      9. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
      10. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
      11. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
      12. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
      13. </ResourceDictionary.MergedDictionaries>
      14. </ResourceDictionary>
      15. </Application.Resources>
      16. </Application>



      Herzlichen Glückwunsch, alle Controls wurden dem MetroStyle angepasst.
      Allerdings ist das Fenster immer noch "normal". Dass wollen wir nun ändern. Ihr geht auf eure Form in die XAML Ansicht und schreibt zwischen die anderen xmlns folgendes: (Importiert folgenden Namespace)

      XML-Quellcode

      1. xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"


      Anschließend schreibt ihr ganz oben statt <Window... folgendes: <Controls:MetroWindow
      Das gleiche muss dann auch noch am Ende des XAML Codes geändert werden. Der Code müsste jetzt ungefähr so aussehen:
      Spoiler anzeigen

      XML-Quellcode

      1. <Controls:MetroWindow x:Class="MainWindow"
      2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      4. xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
      5. Title="MainWindow" Height="350" Width="525">
      6. <Grid>
      8. </Grid>
      9. </Controls:MetroWindow >




      OK, wenn ihr nun ein paar Controls erstellt, sieht das ganze so aus:




      Elysium
      Homepage

      Erstmal müsst ihr euch Elysium hierdownloaden und ggf. installieren.
      Danach müssen wir einen Verweis hinzufügen. Wenn ihr das SDK installiert habt, ist der Ordner hier: C:\Program Files\Elysium SDK\.NET Framework 4.5\2.0
      Ein Verweis auf die Elysium.dll reicht aus. Anschließend gehen wir wieder in unsere Application.xaml und geben dort folgendes ein:

      XML-Quellcode

      1. <ResourceDictionary>
      2. <ResourceDictionary.MergedDictionaries>
      3. <ResourceDictionary Source="/Elysium;component/Themes/Generic.xaml"/>
      4. </ResourceDictionary.MergedDictionaries>
      5. </ResourceDictionary>

      (das kommt zwischen Application.Resources)

      Insgesamt sollte es dann so aussehen:
      Spoiler anzeigen

      XML-Quellcode

      1. <Application x:Class="Application"
      2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      4. StartupUri="MainWindow.xaml">
      5. <Application.Resources>
      6. <ResourceDictionary>
      7. <ResourceDictionary.MergedDictionaries>
      8. <ResourceDictionary Source="/Elysium;component/Themes/Generic.xaml"/>
      9. </ResourceDictionary.MergedDictionaries>
      10. </ResourceDictionary>
      11. </Application.Resources>
      12. </Application>



      Wir sind eigentlich schon fertig, wir müssen nur noch Controls erstellen.


      Modern UI for WPF
      Homepage

      Als erstes müsst ihr M:UI downloaden und auf die DLL Dateien Microsoft.Windows.Shell.dll und FirstFloor.ModernUI.dll verweisen. Anschließend tragt ihr folgendes in eure Application.xaml ein: (zwischen Application.Resources)

      XML-Quellcode

      1. <ResourceDictionary>
      2. <ResourceDictionary.MergedDictionaries>
      3. <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
      4. <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
      5. </ResourceDictionary.MergedDictionaries>
      6. </ResourceDictionary>


      So müsste es dann insgesamt aussehen:
      Spoiler anzeigen

      XML-Quellcode

      1. <Application x:Class="Application"
      2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      4. StartupUri="MainWindow.xaml">
      5. <Application.Resources>
      6. <ResourceDictionary>
      7. <ResourceDictionary.MergedDictionaries>
      8. <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
      9. <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
      10. </ResourceDictionary.MergedDictionaries>
      11. </ResourceDictionary>
      12. </Application.Resources>
      13. </Application>


      Wenn ihr nun Controls auf eurer Form erstellt, sehen die sehr nach Metro aus :) :



      Ich hoffe, ich konnte jemanden umstimmen, WinForms + MetroStlye weiterhin zu benutzten.
      Mfg
      Vincent

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „VincentTB“ ()

      @VincentTB:

      Wie ändere ich die Farbe der Progressbar im Metro Style? Die Progressbar verwendet standartisiert einen Giftgrün zu blau Verlauf und das sieht sehr seltsam aus. Ich habe schon mehrere Male die Online-Dokumentation gewältzt aber ich habe nich herausgefunden welche Property verstellt werden muss.
      Bilder

      • Unbenannt.JPG

        8,87 kB, 202×26, 4.663 mal angesehen

      8-) faxe1008 8-)

      @faxe1008

      So wie es ausschaut verwendest du MahApps.Metro. Bei diesem Theme ist das Verändern der Farben einer Progressbar nicht ganz einfach.

      Der XAML-Code einer normalen Progressbar im MahApss.Metro Style:

      XML-Quellcode

      1. <ProgressBar HorizontalAlignment="Left" Height="16" Margin="75,231,0,0" Grid.Row="1" VerticalAlignment="Top" Width="190" Value="50"/>

      Um die Farben zu verändern musst du folgenden XAML-Code statt dem oberen Code verwenden:

      XML-Quellcode

      1. <Controls:MetroProgressBar HorizontalAlignment="Left" Margin="75,189,0,0" VerticalAlignment="Top" Width="190" Height="16" Value="60" RenderTransformOrigin="0.5,0.5" Background="#FFB9B9B9" Grid.Row="1">
      2. <Controls:MetroProgressBar.Foreground>
      3. <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
      4. <GradientStop Color="Pink" Offset="0"/>
      5. <GradientStop Color="Purple" Offset="1"/>
      6. </LinearGradientBrush>
      7. </Controls:MetroProgressBar.Foreground>
      8. </Controls:MetroProgressBar>

      Dann hat man einen Farbverlauf. Statt Pink und Purple kann natürlich jede beliebige Farbe verwendet werden.

      Wenn man keinen Farbverlauf will, sondern nur eine einfärbige Progressbar, dann kommt folgender Code zum Einsatz:

      XML-Quellcode

      1. <Controls:MetroProgressBar HorizontalAlignment="Left" Margin="75,189,0,0" VerticalAlignment="Top" Width="190" Height="16" Value="60" RenderTransformOrigin="0.5,0.5" Background="#FFB9B9B9" Grid.Row="1">
      2. <Controls:MetroProgressBar.Foreground>
      3. <SolidColorBrush Color="Black"/>
      4. </Controls:MetroProgressBar.Foreground>
      5. </Controls:MetroProgressBar>


      Gruß
      Switcherlapp97
      Bilder

      • progressbar.png

        2,32 kB, 207×71, 4.659 mal angesehen
      RubiksCubeSolver


      Jetzt im Showroom

      Zwei Styles in einem Fenster verwenden

      Hallo @VincentTB
      Ich habe in meinem Project folgende Resource Dictionaries hinzugefügt:

      XML-Quellcode

      1. <Window.Resources>
      2. <ResourceDictionary>
      4. <ResourceDictionary.MergedDictionaries>
      5. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/>
      6. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml"/>
      7. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml"/>
      8. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml"/>
      9. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml"/>
      10. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml"/>
      11. <ResourceDictionary Source="/Elysium;component/Themes/Generic.xaml"/>
      12. </ResourceDictionary.MergedDictionaries>
      14. </ResourceDictionary>
      15. </Window.Resources>


      Ich habe ein TabControl in meinem Fenster, dass den Style von Elysium besitzt, aber möchte, dass der Style von Mahapps Metro verwendet wird.

      Ich habe außerdem einen Button, der standardweise den Style von Elysium hat, wenn ich jedoch folgende Property hinzufüge, verwendet er den ButtonStyle von Mahapps.

      XML-Quellcode

      1. Style="{StaticResource MetroButton}"


      Geht das auch mit dem TabControl, TextBox oder mit anderen Controls, bzw. welche "StaticResource" muss ich dafür verwenden? :)

      Danke im Vorraus

      @VincentTB

      Danke für die Antwort, jedoch steht beim AnimatedTabControl nur folgender Code.

      XML-Quellcode

      1. <Style TargetType="{x:Type TabControl}">


      Da hier kein "x:key" angegeben ist,kann ich keinen Style angeben und so wird in meinem Projekt dass TabControl von Elysium benutzt. Ich habe bereits folgende StaticResource probiert, es hat sich jedoch nichts geändert:

      XML-Quellcode

      1. <TabControl Style="{StaticResource MetroTabControl}">


      Ich wäre sehr dankbar für deine Antwort, da ich dieses Problem bei mehreren Controls habe, zb. auch bei der Combobox von Elysium.

      Was ist nuget und kostet das Irgendwas mit den NuGet ? :rolleyes:

      Hy, wollte mal fragen wenn ich das Packet über nuget installiert habe dann auch in anderen Projekten verwenden kann oder muss ich das dan neu Installieren ?

      Edit by ~blaze~:
      *Beiträge zusammengefügt*
      Meine Projekte Genesis Game Engine | GFX | smartli.me - Der smarte URL shortener

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „~blaze~“ ()

      Du musst dir Nuget wie ein Downloader vorstellen (eig. wie apt-get, wenn du das kennst). Nuget downloadet die "packages" und setzt alle Verweise. Ja, du musst jedes package für jedes Projekt einzeln downloaden. Weitere Informationen findest du hier:
      nuget.org/
      Mfg
      Vincent

      @Sonderzeichen
      Das liegt nicht an VS 2013, sondern an der neuen MahApps.Metro Version. Füge einfach das bei den Attributen des MetroWindows ein:

      XML-Quellcode

      1. GlowBrush="LightBlue"

      Jetzt sollte der Schatten in der Farbe zu sehen sein.
      Mfg
      Vincent

      Bei mir wird bei den Resourcen genau eine Zeile als Fehler angezeigt: (MahApps.Metro)

      XML-Quellcode

      1. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />

      Die anderen (ähnlichen) Zeilen sind alle fehlerlos.

      Könnte das an einer neuen Version liegen?

      Meine zweite Frage:
      Wie verändere ich die Hintergrundfarbe der Schließen/Minimieren/Maximieren - Buttons (Bei mir sind sie Grau und heben sich ganz hässlich von der Taskleiste ab.)