F#
1: codice WPF F # dietro l'applicazione con FsXaml
Ricerca…
introduzione
La maggior parte degli esempi trovati per la programmazione F # WPF sembrano avere a che fare con il pattern MVVM, e alcuni con MVC, ma non c'è nessuno che mostri correttamente come rialzarsi e correre con il "buon vecchio" codice dietro.
Il codice dietro il pattern è molto facile da usare sia per l'insegnamento che per la sperimentazione. È utilizzato in numerosi libri introduttivi e materiale didattico sul web. Ecco perchè.
Questi esempi dimostreranno come creare un codice dietro l'applicazione con finestre, controlli, immagini e icone e altro ancora.
Creare un nuovo codice F # WPF dietro l'applicazione.
Creare un'applicazione console F #.
Cambia il tipo di output dell'applicazione nell'applicazione Windows .
Aggiungi il pacchetto FsXaml NuGet.
Aggiungi questi quattro file sorgente, nell'ordine elencato qui.
MainWindow.xaml
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="First Demo" Height="200" Width="300">
<Canvas>
<Button Name="btnTest" Content="Test" Canvas.Left="10" Canvas.Top="10" Height="28" Width="72"/>
</Canvas>
</Window>
MainWindow.xaml.fs
namespace FirstDemo
type MainWindowXaml = FsXaml.XAML<"MainWindow.xaml">
type MainWindow() as this =
inherit MainWindowXaml()
let whenLoaded _ =
()
let whenClosing _ =
()
let whenClosed _ =
()
let btnTestClick _ =
this.Title <- "Yup, it works!"
do
this.Loaded.Add whenLoaded
this.Closing.Add whenClosing
this.Closed.Add whenClosed
this.btnTest.Click.Add btnTestClick
App.xaml
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.Resources>
</Application.Resources>
</Application>
App.xaml.fs
namespace FirstDemo
open System
type App = FsXaml.XAML<"App.xaml">
module Main =
[<STAThread; EntryPoint>]
let main _ =
let app = App()
let mainWindow = new MainWindow()
app.Run(mainWindow) // Returns application's exit code.
Eliminare il file Program.fs dal progetto.
Modificare l' azione di compilazione in Risorsa per i due file xaml.
Aggiungi un riferimento all'assembly .NET UIAutomationTypes .
Compilare e correre.
Non è possibile utilizzare il designer per aggiungere gestori di eventi, ma non è affatto un problema. Basta aggiungerli manualmente nel codice sottostante, come si vede con i tre gestori in questo esempio, incluso il gestore per il pulsante di test.
AGGIORNAMENTO: è stato aggiunto a FsXaml un modo alternativo e probabilmente più elegante per aggiungere gestori di eventi. Puoi aggiungere il gestore di eventi in XAML, come in C # ma devi farlo manualmente, quindi sostituire il membro corrispondente che si trova nel tuo tipo F #. Lo raccomando.
3: aggiungi un'icona a una finestra
È una buona idea conservare tutte le icone e le immagini in una o più cartelle.
Fare clic con il tasto destro del mouse sul progetto e utilizzare F # Power Tools / New Folder per creare una cartella denominata Immagini.
Su disco, inserisci l'icona nella nuova cartella Immagini .
Tornando in Visual Studio, fai clic con il tasto destro del mouse su Immagini e utilizza Aggiungi / Esistente , quindi mostra Tutti i file ( . ) ** per vedere il file dell'icona in modo che tu possa selezionarlo e quindi aggiungerlo .
Seleziona il file dell'icona e imposta la sua azione Build su Risorsa .
In MainWindow.xaml, usa l'attributo Icon come questo. Le linee circostanti sono mostrate per il contesto.
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="First Demo" Height="200" Width="300"
Icon="Images/MainWindow.ico">
<Canvas>
Prima di eseguire, fai una ricostruzione e non solo una costruzione. Questo perché Visual Studio non inserisce sempre il file dell'icona nell'eseguibile a meno che non si ricostruisca.
È la finestra, e non l'applicazione, che ora ha un'icona. Vedrai l'icona in alto a sinistra della finestra in fase di esecuzione e la vedrai nella barra delle applicazioni. Task Manager e Windows File Explorer non mostreranno questa icona, poiché visualizzano l'icona dell'applicazione anziché l'icona della finestra.
4: Aggiungi icona all'applicazione
Creare un file di testo denominato AppIcon.rc, con il seguente contenuto.
1 ICON "AppIcon.ico"
Avrai bisogno di un file di icone chiamato AppIcon.ico perché funzioni, ma ovviamente puoi modificare i nomi a tuo piacimento.
Esegui il seguente comando.
"C:\Program Files (x86)\Windows Kits\10\bin\x64\rc.exe" /v AppIcon.rc
Se non riesci a trovare rc.exe in questa posizione, cercalo sotto C: \ Programmi (x86) \ Kit di Windows . Se ancora non riesci a trovarlo, scarica Windows SDK da Microsoft.
Verrà generato un file denominato AppIcon.res.
In Visual Studio, apri le proprietà del progetto. Seleziona la pagina dell'applicazione .
Nella casella di testo intitolata File di risorse , digitare AppIcon.res (o Images \ AppIcon.res se lo si inserisce lì), quindi chiudere le proprietà del progetto da salvare.
Apparirà un messaggio di errore, affermando "Il file di risorse inserito non esiste Ignora questo messaggio di errore non riappare.
Ricostruire. L'eseguibile avrà quindi un'icona di applicazione e questo viene visualizzato in Esplora file. Durante l'esecuzione, questa icona apparirà anche in Task Manager.
2: aggiungi un controllo
Aggiungi questi due file in questo ordine sopra i file per la finestra principale.
MyControl.xaml
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Height="50" Width="150">
<Canvas Background="LightGreen">
<Button Name="btnMyTest" Content="My Test" Canvas.Left="10" Canvas.Top="10" Height="28" Width="106"/>
</Canvas>
</UserControl>
MyControl.xaml.fs
namespace FirstDemo
type MyControlXaml = FsXaml.XAML<"MyControl.xaml">
type MyControl() =
inherit MyControlXaml()
L' azione di compilazione per MyControl.xaml deve essere impostata su Risorsa .
Ovviamente, in seguito, dovrai aggiungere "come questo" nella dichiarazione di MyControl, esattamente come fatto per la finestra principale.
Nel file MainWindow.xaml.fs , nella classe per MainWindow, aggiungere questa riga
let myControl = MyControl()
e aggiungi queste due linee nella sezione do della classe della finestra principale.
this.mainCanvas.Children.Add myControl |> ignore
myControl.btnMyTest.Content <- "We're in business!"
Non ci può essere più di un fare -sezione in una classe, e si rischia di averne bisogno quando si scrive un sacco di codice code-behind.
Al controllo è stato assegnato un colore di sfondo verde chiaro, in modo da poter vedere facilmente dove si trova.
Si noti che il controllo bloccherà il pulsante della finestra principale dalla vista. È oltre lo scopo di questi esempi insegnare il WPF in generale, quindi non lo risolveremo qui.
Come aggiungere controlli da librerie di terze parti
Se aggiungi controlli da librerie di terze parti in un progetto C # WPF, il file XAML avrà normalmente linee come questa.
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Questo forse non funzionerà con FsXaml.
Il progettista e il compilatore accettano tale riga, ma probabilmente durante l'esecuzione si verificherà un'eccezione a causa del mancato rilevamento del tipo di terze parti durante la lettura di XAML.
Prova invece qualcosa come il seguente.
xmlns:xctk="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"
Questo quindi è un esempio di un controllo che dipende da quanto sopra.
<xctk:IntegerUpDown Name="tbInput" Increment="1" Maximum="10" Minimum="0" Canvas.Left="13" Canvas.Top="27" Width="270"/>
La libreria utilizzata in questo esempio è Extended Wpf Toolkit, disponibile gratuitamente tramite NuGet o come programma di installazione. Se si scaricano le librerie tramite NuGet, i controlli non sono disponibili nella casella degli strumenti, ma vengono comunque visualizzati nella finestra di progettazione se li si aggiunge manualmente in XAML e le proprietà sono disponibili nel riquadro Proprietà.
