F#
1: Código F # WPF detrás de la aplicación con FsXaml

Introducción

Cree un nuevo código F # WPF detrás de la aplicación.

Crear una aplicación de consola F #.

Cambie el tipo de salida de la aplicación a la aplicación de Windows .

Agregue el paquete FsXaml NuGet.

Agregue estos cuatro archivos de origen, en el orden listado aquí.

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.

Eliminar el archivo Program.fs del proyecto.

Cambie la acción de compilación a recurso para los dos archivos xaml.

Agregue una referencia al ensamblado .NET UIAutomationTypes .

Compilar y ejecutar.

No puede usar el diseñador para agregar controladores de eventos, pero eso no es un problema en absoluto. Simplemente agréguelos manualmente en el código que se encuentra detrás, como se ve con los tres controladores en este ejemplo, incluido el controlador para el botón de prueba.

ACTUALIZACIÓN: Se ha agregado una forma alternativa y probablemente más elegante de agregar controladores de eventos a FsXaml. Puede agregar el controlador de eventos en XAML, igual que en C # pero debe hacerlo manualmente, y luego anular el miembro correspondiente que aparece en su tipo F #. Yo recomiendo esto

3: Añadir un icono a una ventana

Es una buena idea mantener todos los íconos e imágenes en una o más carpetas.

Haga clic derecho en el proyecto, y use F # Power Tools / New Folder para crear una carpeta llamada Images.

En el disco, coloque su icono en la nueva carpeta Imágenes .

De vuelta en Visual Studio, haga clic con el botón derecho en Imágenes y use Agregar / Elemento existente , luego muestre Todos los archivos ( . ) ** para ver el archivo del icono para que pueda seleccionarlo y luego agregarlo .

Seleccione el archivo de icono y establezca su Acción de creación en Recurso .

En MainWindow.xaml, use el atributo Icono como este. Las líneas circundantes se muestran para el contexto.

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

Antes de ejecutar, realice una reconstrucción y no solo una compilación. Esto se debe a que Visual Studio no siempre coloca el archivo de icono en el ejecutable a menos que lo reconstruya.

Es la ventana, y no la aplicación, la que ahora tiene un icono. Verá el icono en la parte superior izquierda de la ventana en tiempo de ejecución, y lo verá en la barra de tareas. El Administrador de tareas y el Explorador de archivos de Windows no mostrarán este icono, ya que muestran el icono de la aplicación en lugar del icono de la ventana.

4: Añadir icono a la aplicación

Cree un archivo de texto llamado AppIcon.rc, con el siguiente contenido.

1 ICON "AppIcon.ico"

Necesitará un archivo de icono llamado AppIcon.ico para que esto funcione, pero por supuesto puede ajustar los nombres a su gusto.

Ejecute el siguiente comando.

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

Si no puede encontrar rc.exe en esta ubicación, búsquelo debajo de C: \ Archivos de programa (x86) \ Windows Kits . Si aún no puede encontrarlo, descargue Windows SDK de Microsoft.

Se generará un archivo llamado AppIcon.res.

En Visual Studio, abra las propiedades del proyecto. Seleccione la página de la aplicación .

En el cuadro de texto titulado Archivo de recursos , escriba AppIcon.res (o Images \ AppIcon.res si lo coloca allí) y luego cierre las propiedades del proyecto para guardar.

Aparecerá un mensaje de error que indica "El archivo de recursos ingresado no existe. Ignórelo. El mensaje de error no volverá a aparecer.

Reconstruir. El ejecutable tendrá un icono de aplicación, y esto se muestra en el Explorador de archivos. Cuando se ejecuta, este icono también aparecerá en el Administrador de tareas.

2: Añadir un control

Agregue estos dos archivos en este orden sobre los archivos de la ventana principal.

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

La acción de creación para MyControl.xaml se debe establecer en Recurso .

Por supuesto, más tarde deberá agregar "as this" en la declaración de MyControl, tal como se hizo para la ventana principal.

En el archivo MainWindow.xaml.fs , en la clase para MainWindow, agregue esta línea

let myControl = MyControl()

y añadir estas dos líneas en la DO -section de la clase de la ventana principal.

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

No puede haber más de un -section hacer en una clase, y es probable que se necesite al escribir un montón de código de código subyacente.

Al control se le ha dado un color de fondo verde claro, para que pueda ver fácilmente dónde está.

Tenga en cuenta que el control bloqueará la visualización del botón de la ventana principal. Está más allá del alcance de estos ejemplos enseñarle WPF en general, así que no lo arreglaremos aquí.

Cómo agregar controles desde bibliotecas de terceros

Si agrega controles de bibliotecas de terceros en un proyecto WPF de C #, el archivo XAML normalmente tendrá líneas como esta.

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

Esto quizás no funcione con FsXaml.

El diseñador y el compilador aceptan esa línea, pero probablemente habrá una excepción en el tiempo de ejecución quejándose de que no se encontró el tipo de tercero al leer el XAML.

Intente algo como lo siguiente en su lugar.

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

Este es entonces un ejemplo de un control que depende de lo anterior.

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

La biblioteca utilizada en este ejemplo es el kit de herramientas Extended Wpf, disponible de forma gratuita a través de NuGet o como instalador. Si descarga bibliotecas a través de NuGet, entonces los controles no están disponibles en la Caja de herramientas, pero aún se muestran en el diseñador si los agrega manualmente en XAML, y las propiedades están disponibles en el panel Propiedades.