F#
1: F # Code WPF derrière l'application avec FsXaml

Introduction

Créez un nouveau code F # WPF derrière l'application.

Créez une application console F #.

Modifiez le type de sortie de l'application en application Windows .

Ajoutez le package FsXaml NuGet.

Ajoutez ces quatre fichiers source, dans l'ordre indiqué ici.

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.

Supprimez le fichier Program.fs du projet.

Modifiez l' action de génération en ressource pour les deux fichiers xaml.

Ajoutez une référence à l'assembly .NET UIAutomationTypes .

Compiler et exécuter

Vous ne pouvez pas utiliser le concepteur pour ajouter des gestionnaires d'événements, mais ce n'est pas un problème du tout. Ajoutez-les simplement manuellement dans le code derrière, comme vous le voyez avec les trois gestionnaires de cet exemple, y compris le gestionnaire du bouton de test.

UPDATE: Une manière alternative et probablement plus élégante d'ajouter des gestionnaires d'événements a été ajoutée à FsXaml. Vous pouvez ajouter le gestionnaire d'événements dans XAML, comme dans C #, mais vous devez le faire manuellement, puis remplacer le membre correspondant qui apparaît dans votre type F #. Je recommande ceci

3: Ajouter une icône à une fenêtre

C'est une bonne idée de conserver toutes les icônes et images dans un ou plusieurs dossiers.

Cliquez avec le bouton droit sur le projet et utilisez F # Power Tools / New Folder pour créer un dossier nommé Images.

Sur le disque, placez votre icône dans le nouveau dossier Images .

De retour dans Visual Studio, cliquez avec le bouton droit sur Images et utilisez Ajouter / Élément existant , puis affichez Tous les fichiers ( . ) ** pour afficher le fichier d'icône afin de pouvoir le sélectionner, puis ajoutez- le.

Sélectionnez le fichier d'icône et définissez son action de génération sur ressource .

Dans MainWindow.xaml, utilisez l'attribut Icon comme ceci. Les lignes environnantes sont affichées pour le contexte.

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="First Demo" Height="200" Width="300"
    Icon="Images/MainWindow.ico">
<Canvas>

Avant de vous lancer, effectuez une reconstruction, et pas seulement une génération. En effet, Visual Studio ne met pas toujours le fichier d'icône dans l'exécutable, sauf si vous le reconstruisez.

C'est la fenêtre, et non l'application, qui a maintenant une icône. Vous verrez l'icône en haut à gauche de la fenêtre à l'exécution et vous la verrez dans la barre des tâches. Le Gestionnaire des tâches et l'Explorateur de fichiers Windows n'afficheront pas cette icône, car ils affichent l'icône de l'application plutôt que l'icône de la fenêtre.

4: Ajouter une icône à l'application

Créez un fichier texte nommé AppIcon.rc avec le contenu suivant.

1 ICON "AppIcon.ico"

Vous aurez besoin d'un fichier icône nommé AppIcon.ico pour que cela fonctionne, mais vous pouvez bien sûr ajuster les noms à votre convenance.

Exécutez la commande suivante.

"C:\Program Files (x86)\Windows Kits\10\bin\x64\rc.exe" /v AppIcon.rc

Si vous ne trouvez pas rc.exe à cet emplacement, recherchez-le sous C: \ Program Files (x86) \ Windows Kits . Si vous ne le trouvez toujours pas, téléchargez Windows SDK de Microsoft.

Un fichier nommé AppIcon.res sera généré.

Dans Visual Studio, ouvrez les propriétés du projet. Sélectionnez la page de l' application .

Dans la zone de texte intitulée Fichier de ressources , tapez AppIcon.res (ou Images \ AppIcon.res si vous le placez), puis fermez les propriétés du projet à enregistrer.

Un message d'erreur apparaîtra, indiquant "Le fichier de ressources entré n'existe pas. Ignorez-le. Le message d'erreur ne réapparaîtra pas.

Reconstruire. L'exécutable aura alors une icône d'application, et cela apparaît dans l'Explorateur de fichiers. En cours d'exécution, cette icône apparaîtra également dans le Gestionnaire des tâches.

2: Ajouter un contrôle

Ajoutez ces deux fichiers dans cet ordre au-dessus des fichiers de la fenêtre 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' action de génération pour MyControl.xaml doit être définie sur Resource .

Vous devrez bien sûr ajouter plus tard "as this" dans la déclaration de MyControl, comme pour la fenêtre principale.

Dans le fichier MainWindow.xaml.fs , dans la classe pour MainWindow, ajoutez cette ligne

let myControl = MyControl()

et ajoutez ces deux lignes dans la do -section de la classe de la fenêtre principale.

    this.mainCanvas.Children.Add myControl |> ignore
    myControl.btnMyTest.Content <- "We're in business!"

Il peut y avoir plus d'une do-section dans une classe et vous en aurez probablement besoin lorsque vous écrirez beaucoup de code code-behind.

Une couleur de fond vert clair a été attribuée au contrôle pour que vous puissiez facilement voir où il se trouve.

Sachez que le contrôle bloquera le bouton de la fenêtre principale de la vue. Il est hors de la portée de ces exemples de vous apprendre WPF en général, nous ne pourrons donc pas résoudre ce problème ici.

Comment ajouter des contrôles à partir de bibliothèques tierces

Si vous ajoutez des contrôles de bibliothèques tierces dans un projet C # WPF, le fichier XAML aura normalement des lignes comme celle-ci.

xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"

Cela ne fonctionnera peut-être pas avec FsXaml.

Le concepteur et le compilateur acceptent cette ligne, mais il y aura probablement une exception au moment de l'exécution pour se plaindre du fait que le type tiers n'est pas trouvé lors de la lecture du fichier XAML.

Essayez plutôt quelque chose comme ce qui suit.

xmlns:xctk="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"

Ceci est un exemple de contrôle qui dépend de ce qui précède.

<xctk:IntegerUpDown Name="tbInput" Increment="1" Maximum="10" Minimum="0" Canvas.Left="13" Canvas.Top="27" Width="270"/>

La bibliothèque utilisée dans cet exemple est Extended Toolkit Wpf, disponible gratuitement via NuGet ou en tant qu'installateur. Si vous téléchargez des bibliothèques via NuGet, les contrôles ne sont pas disponibles dans la boîte à outils, mais ils s'affichent toujours dans le concepteur si vous les ajoutez manuellement dans XAML et que les propriétés sont disponibles dans le volet Propriétés.