F#
1: F # WPF-Code hinter der Anwendung mit FsXaml
Suche…
Einführung
Die meisten Beispiele, die für die F # WPF-Programmierung gefunden wurden, scheinen sich mit dem MVVM-Muster und einigen wenigen mit MVC zu befassen, aber es gibt so gut wie keine, die richtig zeigt, wie man mit "gutem, altem" Code hinter sich lässt.
Der Code hinter dem Muster ist sehr einfach für das Lehren und Experimentieren zu verwenden. Es wird in zahlreichen Einführungsbüchern und Lernmaterialien im Web verwendet. Deshalb.
In diesen Beispielen wird veranschaulicht, wie ein Code hinter einer Anwendung mit Fenstern, Steuerelementen, Bildern und Symbolen usw. erstellt wird.
Erstellen Sie einen neuen F # WPF-Code hinter der Anwendung.
Erstellen Sie eine F # -Konsolenanwendung.
Ändern Sie den Ausgabetyp der Anwendung in Windows-Anwendung .
Fügen Sie das FsXaml NuGet-Paket hinzu.
Fügen Sie diese vier Quelldateien in der hier angegebenen Reihenfolge hinzu.
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.
Löschen Sie die Program.fs- Datei aus dem Projekt.
Ändern Sie die Build-Aktion in Ressource für die beiden XAML-Dateien.
Fügen Sie einen Verweis auf die .NET-Assembly- UIAutomationTypes hinzu .
Kompilieren und ausführen
Sie können den Designer nicht zum Hinzufügen von Ereignishandlern verwenden, aber das ist überhaupt kein Problem. Fügen Sie sie einfach manuell in den nachstehenden Code ein, wie Sie es in diesem Beispiel mit den drei Handlern sehen, einschließlich des Handlers für die Test-Schaltfläche.
UPDATE: FsXaml wurde um eine alternative und wahrscheinlich elegantere Methode zum Hinzufügen von Ereignishandlern erweitert. Sie können den Ereignishandler in XAML hinzufügen, genau wie in C #. Sie müssen dies jedoch manuell tun und das entsprechende Member überschreiben, das in Ihrem F # -Typ angezeigt wird. Ich empfehle das.
3: Hinzufügen eines Symbols zu einem Fenster
Es ist eine gute Idee, alle Symbole und Bilder in einem oder mehreren Ordnern aufzubewahren.
Klicken Sie mit der rechten Maustaste auf das Projekt und erstellen Sie mit F # Power Tools / New Folder einen Ordner mit dem Namen Images.
Auf der Festplatte, legen Sie Ihr Symbol in den neuen Ordner Bilder.
Klicken Sie in Visual Studio mit der rechten Maustaste auf Images , verwenden Sie Add / Existing Item , und zeigen Sie All Files ( . ) ** an, um die Symboldatei anzuzeigen, sodass Sie sie auswählen können, und fügen Sie sie hinzu.
Wählen Sie die Symboldatei aus, und legen Sie ihre Build-Aktion auf Ressource fest .
Verwenden Sie in MainWindow.xaml das Icon-Attribut wie folgt. Umliegende Linien werden für den Kontext angezeigt.
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="First Demo" Height="200" Width="300"
Icon="Images/MainWindow.ico">
<Canvas>
Führen Sie vor dem Ausführen eine Neuerstellung durch und nicht nur einen Build. Dies liegt daran, dass Visual Studio die Symboldatei nicht immer in der ausführbaren Datei ablegt, wenn Sie nicht neu erstellen.
Es ist das Fenster und nicht die Anwendung, die jetzt ein Symbol hat. Sie sehen das Symbol zur Laufzeit oben links im Fenster und in der Taskleiste. Der Task-Manager und der Windows-Datei-Explorer zeigen dieses Symbol nicht an, da sie das Anwendungssymbol anstelle des Fenstersymbols anzeigen.
4: Symbol zur Anwendung hinzufügen
Erstellen Sie eine Textdatei mit dem Namen AppIcon.rc mit folgendem Inhalt.
1 ICON "AppIcon.ico"
Dazu benötigen Sie eine Icon-Datei mit dem Namen AppIcon.ico, aber Sie können die Namen natürlich nach Ihren Wünschen anpassen.
Führen Sie den folgenden Befehl aus.
"C:\Program Files (x86)\Windows Kits\10\bin\x64\rc.exe" /v AppIcon.rc
Wenn Sie die Datei rc.exe an diesem Ort nicht finden können, suchen Sie sie unter C: \ Programme (x86) \ Windows Kits . Wenn Sie es immer noch nicht finden können, laden Sie Windows SDK von Microsoft herunter.
Eine Datei mit dem Namen AppIcon.res wird generiert.
Öffnen Sie in Visual Studio die Projekteigenschaften. Wählen Sie die Anwendungsseite aus .
Geben Sie im Textfeld Ressourcendatei AppIcon.res (oder Images \ AppIcon.res, wenn Sie es dort ablegen ) ein, und schließen Sie die Projekteigenschaften, um sie zu speichern.
Es erscheint eine Fehlermeldung, die besagt "Die eingegebene Ressourcendatei ist nicht vorhanden. Ignorieren Sie diese. Die Fehlermeldung wird nicht erneut angezeigt.
Wiederaufbau Die ausführbare Datei hat dann ein Anwendungssymbol, das im Datei-Explorer angezeigt wird. Während der Ausführung wird dieses Symbol auch im Task-Manager angezeigt.
2: Fügen Sie ein Steuerelement hinzu
Fügen Sie diese beiden Dateien in dieser Reihenfolge über den Dateien für das Hauptfenster hinzu.
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()
Die Build-Aktion für MyControl.xaml muss auf Resource gesetzt sein .
Natürlich müssen Sie später in der Deklaration von MyControl "as this" hinzufügen, genau wie im Hauptfenster.
Fügen Sie in der Datei MainWindow.xaml.fs in der Klasse für MainWindow diese Zeile hinzu
let myControl = MyControl()
und fügen Sie diese beiden Zeilen im do- Bereich der Hauptfensterklasse hinzu.
this.mainCanvas.Children.Add myControl |> ignore
myControl.btnMyTest.Content <- "We're in business!"
Es kann mehr als eine do- Sektion in einer Klasse geben, und Sie benötigen sie wahrscheinlich, wenn Sie Code-Behind-Code schreiben.
Das Steuerelement wurde mit einer hellgrünen Hintergrundfarbe versehen, sodass Sie leicht erkennen können, wo es sich befindet.
Beachten Sie, dass das Steuerelement die Schaltfläche des Hauptfensters blockiert. Es liegt nicht im Rahmen dieser Beispiele, Ihnen WPF allgemein beizubringen, daher werden wir das hier nicht beheben.
So fügen Sie Steuerelemente aus Drittanbieter-Bibliotheken hinzu
Wenn Sie Steuerelemente aus Bibliotheken von Drittanbietern in einem C # WPF-Projekt hinzufügen, enthält die XAML-Datei normalerweise solche Zeilen.
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Dies funktioniert vielleicht nicht mit FsXaml.
Der Designer und der Compiler akzeptieren diese Zeile, es wird jedoch wahrscheinlich zur Laufzeit eine Ausnahme geben, die besagt, dass der Drittanbieter-Typ beim Lesen der XAML nicht gefunden wurde.
Versuchen Sie stattdessen etwas wie das Folgende.
xmlns:xctk="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"
Dies ist dann ein Beispiel für ein Steuerelement, das von den oben genannten abhängig ist.
<xctk:IntegerUpDown Name="tbInput" Increment="1" Maximum="10" Minimum="0" Canvas.Left="13" Canvas.Top="27" Width="270"/>
Die in diesem Beispiel verwendete Bibliothek ist das Extended Wpf Toolkit, das kostenlos über NuGet oder als Installationsprogramm verfügbar ist. Wenn Sie Bibliotheken über NuGet herunterladen, sind die Steuerelemente nicht in der Toolbox verfügbar. Sie werden jedoch im Designer angezeigt, wenn Sie sie manuell in XAML hinzufügen. Die Eigenschaften sind im Bereich Eigenschaften verfügbar.