WPF .Net mahapps.metro : applicare alle applicazioni WPF lo stile metro

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/programmazione/art_net-mahappsmetro-applicare-alle-applicaz_1552.aspx

Per tutti coloro che sviluppano applicazioni per ambiente Desktop, in particolare i progetti di tipo “Windows Presentation Foundation” e vogliono applicare lo stile Metro, ossia una grafica che si avvicina al nuovo sistema Windows, tramite il framework gratuito Mahapps.metro http://mahapps.com/ posso applicare lo stile alle varie finestre.

Creazione del progetto

Si crea un progetto per Desktop di tipo WPF, con il linguaggio di programmazione di proprio interesse.
Dopo aver creato il progetto dobbiamo aggiungere il Framework Mahapps al nostro progetto.
Dal menu Strumenti selezionare la voce “Gestione Pacchetti Nuget” e dal sottomenu selezionare la voce “Console di gestione pacchetti”.
Nella finestra che viene aperta, scriviamo la seguente istruzione che permetterà di installare i vari componenti e file.
Il comando da scrivere è il seguente:
“Install-Package MahApps.Metro”

A questo punto facciamo click sul pulsante enter, in modo che verrà installato il tutto. Scriviamo la seguente istruzione, che ci permetterà di installare anche le risorse “Install-Package MahApps.Metro.Resources” che serviranno per visualizzare le icone o altri aspetti grafici.
Adesso andiamo a modificare la finestra, con aspetti grafici oppure ad applicare ai vari controlli, che possono essere il pulsante o la casella di testo, stili tipici di metro.
Per applicare tali stile ed icone dobbiamo includere il riferimento alla risorsa installata.
Nel file App.xaml andranno inseriti i vari riferimenti che riportiamo qui di seguito nel file di tipo “XAML”

<Application x:Class="WpfApplication.App"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             StartupUri="MainWindow.xaml">

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

               

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

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

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

                <ResourceDictionary    Source="/Resources/icons.xaml" />

               

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

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

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Application.Resources>

   

</Application>

Nella pagina “MainWindow.xaml” scriviamo nella parte del markup il seguente tag, in modo che viene applicato alla finestra del Framework.

<Controls:MetroWindow

                      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

                      xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"

                      x:Class="MahApps.Metro.Simple.Demo.MainWindow"

                      Title="MainWindow"

                      Height="200"

                      Width="600"

 

                      BorderThickness="0"

                      GlowBrush="Black"

                      ResizeMode="CanResizeWithGrip"

 

                      WindowTransitionsEnabled="False"

                      WindowStartupLocation="CenterScreen">

   

    <Controls:MetroWindow.RightWindowCommands>

        <Controls:WindowCommands>

            <Button Content="Impostazioni" />

            <Button>

                <StackPanel Orientation="Horizontal">

                    <Rectangle Width="20"

                   Height="20"

                   Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">

                        <Rectangle.OpacityMask>

                            <VisualBrush Stretch="Fill"  Visual="{StaticResource  appbar_cupcake}" />

                           

                        </Rectangle.OpacityMask>

                    </Rectangle>

                    <TextBlock Margin="4 0 0 0"

                   VerticalAlignment="Center"

                   Text="Testo immagine" />

                </StackPanel>

            </Button>

        </Controls:WindowCommands>

    </Controls:MetroWindow.RightWindowCommands>

</Controls:MetroWindow>

Passiamo in visualizzazione codice e scriviamo le istruzioni per rendere effettive tale implementazioni.
Inseriamo lo spazio dei nomi che ci permetterà di gestire le classi di questo Framework.
In alto sopra ad ogni dichiarazione, scriviamo la seguente dichiarazione:

using MahApps.Metro.Controls;

Mentre la classe non deve ereditare da nessun altra e togliamo l’inizializzazione dei controlli, il tutto come mostrato qui di seguito.

using MahApps.Metro.Controls;

namespace WpfMetro

{

    ///

    /// Logica di interazione per MainWindow.xaml

    ///

    public partial class MainWindow 

    {

        public MainWindow()

        {

            //InitializeComponent();

        }

    }

}

Ritorniamo nella parte grafica, o meglio dove modificare il tag xaml, ed aggiungiamo un pulsante, con lo stile che lo rende ovale.
Qui di seguito un esempio di codice XAML.

<Button Content="Button" HorizontalAlignment="Left" Style="{DynamicResource   MetroCircleButtonStyle}" Margin="56,53,0,0" VerticalAlignment="Top" Width="102" Height="32"/>

 Se invece vogliamo applicare uno stile alla casella di testo riguardante la x per pulire la casella o una piccola filigrana di suggerimento nella casella per indicare cosa scrivere, il frammento di codice qui di seguito illustra tale tecnica.

<TextBox Controls:TextBoxHelper.Watermark="Testo descrittivo" Margin="154,73,0,0" Controls:TextBoxHelper.ClearTextButton="True" />

Conclusioni

L’articolo ha voluto fornire al lettore alcune tecniche di come applicare uno stile metro alle proprie applicazioni utilizzando framework gratuiti ed esistenti che semplificano lo sviluppo di applicazioni. Le potenzialità e gli stili forniti da questo Framework sono numerosi e lasciamo al lettore l’approfondimento e lo studio per rendere quel tocco speciale ai propri progetti. Con le nuove versioni di Visual Studio, in particolare dalla 2013 si possono aggiungere funzionalità importanti, ma soprattutto semplificare la scrittura di codice. I numerosi framework a disposizione permettono di estendere le applicazioni con grafiche e funzioni avanzate con semplici pochi passaggi.