HTML GUI in Windows Forms Applications

Realizzare la GUI in html per un'applicazione Winform

  • Winform with HTML GUI Winform with HTML GUI
    Winform with HTML GUI
  • Open dialog from html Open dialog from html
    Open dialog from html
  • Changed html page Changed html page
    Changed html page
  • Changed html page Changed html page
    Changed html page



Come "modernizzare" le nostre winform apps dando un look diverso da quello predefinito ?


Naturalmente possiamo acquistare i tools di terze parti oppure creare da soli un nuovo look&feel per le nostre "datate" winforms; tuttavia dato che oramai tutti sanno utilizzare il browser internet, possiamo facilmente creare delle GUI in html che non si discostino dal funzionamento di un qualunque sito web. Gli users delle nostre applicazioni avranno meno diffidenza e potranno godere della miglior "user experience" possibile.

    Prima di tutto:
  • creiamo un progetto Windows Forms Application
  • drag&drop di un controllo WebBrowser (proprietà Doc:Fill)
  • creiamo quindi uno o più file html che inseriremo come "embedded resource". Questi file, caricati a runtime, saranno la nostra GUI.

Load html resources at runtime

I file html dovranno essere caricati a runtime dalle risorse del nostro exe (volendo da una DLL) e quindi visualizzati nel controllo webbrowser.
In .Net questo è facilmente realizzabile utilizzando la funzione:


       Assembly.GetManifestResourceStream(resourceName))
        
che troviamo nel namespace:
        
        using System.Reflection
        
Si tratta in pratica di caricare dalle risorse tutto il file ed assegnarlo ad una variabile stringa, la quale sarà a sua volta assegnata alla proprietà DocumentText del controllo webbrowser. Il file html verrà così interpretato dal controllo.

Possiamo creare una funzione che carica il file dalle risorse del nostro eseguibile a runtime e lo assegna ad una stringa:

            
            private string LoadMainMenu(string resource) {
            
             string tmpresult="" ;
             
             var assembly = Assembly.GetExecutingAssembly();
             
             var resourcename = resource;
            
             using (stream stream = assembly.GetManifestResourceStream(resourceName))
             
             using (streamreader reader = new streamreader(stream))
             {
             string result=reader.ReadToEnd();
            
               if (result !=String.Empty)
                     tmpresult=result;
             }
             
             return tmpresult;
             
             }
    

Come conoscere il nome dei file una volta che sono stati inseriti come risorsa

Il nome di un file embedded resource è composto da : namespace.nomefile.estensionefile.

Per esempio se il namespace è TutorialHTMLGUI ed il nome del file è main_menu.html, allora il nome completo della risorsa sarà : TutorialHTMLGUI.main_menu.html.

Ora che abbiamo l'intero file assegnato ad una stringa possiamo assegnare quest'ultima alla proprietà DocumentText del controllo webbrowser:

        
         webBrowser1.DocumentText = LoadMainMenu(embeddedResource[0]);
        

dove embeddedResource è una array di stringhe che contiene i nomi dei nostri file html embedded.

    
            private string[] embeddedResource = null;   
            this.embeddedResource = new string[3];
           
            embeddedResource[0] = "TutorialHTMLGUI.main_menu.html";
            embeddedResource[1] = "TutorialHTMLGUI.info.html";
            embeddedResource[2] = "TutorialHTMLGUI.guide.html";  
       
    

Comunicazione tra risorsa html e winform

Per consentire all'applicazione di catturare gli eventi generati dagli scripts del file html contenuto nel controllo webbrowser, dobbiamo assegnare la proprietà ObjectForScripting dello stesso:


        this.webBrowser1.ObjectForScripting = this;
    

Questo attiva la funzionalità :
window.external

Attenzione, è necessario inoltre che la nostra applicazione sia visibile a COM.

Ora è possibile intercettare dalla nostra winform gli eventi generati dagli elementi del file html.

   
             <a href="#" onclick="window.external.GetHTMLIndex(-2)"> Home </a>                 
   

Dove la funzione GetHTMLIndex(...) è una funzione creata da noi nel sorgente C#

        public void GetHTMLIndex(int index)
        {
            
            switch (index)
            {
                case -1: Exit(); break;
                 case -2: webBrowser1.DocumentText = LoadMainMenu(embeddedResource[0]); break;
                  case -3: webBrowser1.DocumentText = LoadMainMenu(embeddedResource[1]); break;
                   case -4: webBrowser1.DocumentText = LoadMainMenu(embeddedResource[2]); break;
                    case 0: 
                     case 1: 
                      case 2: LoadForm(index); break;
                       default: MessageBox.Show("This form is not implemented yet !"); break;
            }
        }
   
   

Giuseppe Pischedda Aprile 2015.


Se il post ti è piaciuto puoi fare una donazione all'autore, l'importo è a tua libera scelta.

Grazie