F#
1: F # WPF-code achter toepassing met FsXaml

Invoering

Maak een nieuwe F # WPF-code achter de toepassing.

Maak een F # console-applicatie.

Wijzig het uitvoertype van de toepassing in Windows-toepassing .

Voeg het FsXaml NuGet-pakket toe.

Voeg deze vier bronbestanden toe in de hier vermelde volgorde.

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.

Verwijder het programma Program.fs uit het project.

Wijzig de Build-actie in Resource voor de twee xaml-bestanden.

Voeg een referentie toe aan de UIAutomationTypes van .NET assembly.

Compileren en uitvoeren.

Je kunt de ontwerper niet gebruiken om event-handlers toe te voegen, maar dat is helemaal geen probleem. Voeg ze gewoon handmatig toe in de code erachter, zoals je ziet met de drie handlers in dit voorbeeld, inclusief de handler voor de testknop.

UPDATE: Een alternatieve en waarschijnlijk elegantere manier om event handlers toe te voegen is toegevoegd aan FsXaml. U kunt de gebeurtenishandler toevoegen in XAML, hetzelfde als in C #, maar u moet dit handmatig doen en vervolgens het overeenkomstige lid overschrijven dat verschijnt in uw F # -type. Ik raad dit aan.

3: Voeg een pictogram toe aan een venster

Het is een goed idee om alle pictogrammen en afbeeldingen in een of meer mappen te bewaren.

Klik met de rechtermuisknop op het project en gebruik F # Power Tools / Nieuwe map om een map met de naam Afbeeldingen te maken.

Plaats uw pictogram op schijf in de nieuwe map Afbeeldingen .

Terug in Visual Studio, klik met de rechtermuisknop op Afbeeldingen en gebruik Toevoegen / Bestaand item en toon vervolgens Alle bestanden ( . ) ** om het pictogrambestand te zien zodat u het kunt selecteren en vervolgens toevoegen .

Selecteer het pictogrambestand en stel de Build-actie in op Resource .

Gebruik in MainWindow.xaml het kenmerk Icon als volgt. Omliggende lijnen worden getoond voor context.

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

Voordat je gaat rennen, moet je een rebuild uitvoeren en niet alleen een build. Dit komt omdat Visual Studio het pictogrambestand niet altijd in het uitvoerbare bestand plaatst, tenzij u het opnieuw opbouwt.

Het is het venster en niet de toepassing die nu een pictogram heeft. U ziet het pictogram linksboven in het venster tijdens runtime en u ziet het in de taakbalk. Taakbeheer en Windows Bestandsverkenner geven dit pictogram niet weer, omdat ze het toepassingspictogram in plaats van het vensterpictogram weergeven.

4: pictogram toevoegen aan toepassing

Maak een tekstbestand met de naam AppIcon.rc, met de volgende inhoud.

1 ICON "AppIcon.ico"

U hebt hiervoor een pictogrambestand met de naam AppIcon.ico nodig, maar u kunt natuurlijk de namen naar wens aanpassen.

Voer de volgende opdracht uit.

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

Als u rc.exe op deze locatie niet kunt vinden, zoek het dan hieronder op C: \ Program Files (x86) \ Windows Kits . Als u het nog steeds niet kunt vinden, download dan Windows SDK van Microsoft.

Er wordt een bestand met de naam AppIcon.res gegenereerd.

Open de projecteigenschappen in Visual Studio. Selecteer de applicatiepagina .

In het tekstvak met de titel Resource File type AppIcon.res (of Images \ AppIcon.res als je het daar) en sluit het project eigenschappen op te slaan.

Er verschijnt een foutbericht met de melding "Het ingevoerde bronbestand bestaat niet. Negeer dit. Het foutbericht verschijnt niet opnieuw."

Herbouwen. Het uitvoerbare bestand heeft dan een toepassingspictogram en dit wordt weergegeven in Verkenner. Wanneer het wordt uitgevoerd, verschijnt dit pictogram ook in Taakbeheer.

2: Voeg een besturingselement toe

Voeg deze twee bestanden in deze volgorde toe boven de bestanden voor het hoofdvenster.

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()

De actie Build voor MyControl.xaml moet zijn ingesteld op Resource .

Natuurlijk moet u later "als dit" toevoegen in de verklaring van MyControl, net zoals gedaan voor het hoofdvenster.

Voeg in het bestand MainWindow.xaml.fs , in de klasse voor MainWindow, deze regel toe

let myControl = MyControl()

en voeg deze twee regels toe aan de do -sectie van de hoofdvensterklasse.

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

Er kan meer dan één do -sectie in een klasse zijn, en je hebt het waarschijnlijk nodig als je veel code achter de code schrijft.

Het besturingselement heeft een lichtgroene achtergrondkleur gekregen, zodat u gemakkelijk kunt zien waar het zich bevindt.

Houd er rekening mee dat de besturing de knop van het hoofdvenster uit het zicht blokkeert. Het valt buiten het bereik van deze voorbeelden om u WPF in het algemeen te leren, dus dat zullen we hier niet oplossen.

Besturingselementen van externe bibliotheken toevoegen

Als u besturingselementen van externe bibliotheken in een C # WPF-project toevoegt, heeft het XAML-bestand normaal gesproken regels zoals deze.

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

Dit zal misschien niet werken met FsXaml.

De ontwerper en de compiler accepteren die regel, maar tijdens runtime zal er waarschijnlijk een uitzondering zijn over het feit dat het type van de derde partij niet wordt gevonden bij het lezen van de XAML.

Probeer in plaats daarvan zoiets als het volgende.

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

Dit is dan een voorbeeld van een besturing die afhankelijk is van het bovenstaande.

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

De bibliotheek die in dit voorbeeld wordt gebruikt, is de Extended Wpf Toolkit, gratis beschikbaar via NuGet of als installatieprogramma. Als u bibliotheken downloadt via NuGet, zijn de besturingselementen niet beschikbaar in de Toolbox, maar worden ze nog steeds weergegeven in de ontwerper als u ze handmatig toevoegt in XAML en de eigenschappen beschikbaar zijn in het deelvenster Eigenschappen.