F#
1: F # WPF-kod bakom applikation med FsXaml
Sök…
Introduktion
De flesta exempel som hittats för F # WPF-programmering verkar ta itu med MVVM-mönstret, och några med MVC, men det finns nästan ingen som visar ordentligt hur man kommer igång med "gamla gamla" koden bakom.
Koden bakom mönstret är väldigt lätt att använda för både undervisning och experiment. Det används i många introduktionsböcker och läromedel på webben. Det är därför.
Dessa exempel visar hur man skapar en kod bakom applikationen med fönster, kontroller, bilder och ikoner med mera.
Skapa en ny F # WPF-kod bakom applikationen.
Skapa en F # -konsolapplikation.
Ändra programmets utgångstyp till Windows-applikation .
Lägg till FsXaml NuGet-paketet.
Lägg till dessa fyra källfiler i den ordning som anges här.
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.
Ta bort filen Program.fs från projektet.
Ändra Build Action till Resource för de två xaml-filerna.
Lägg till en referens till .NET-montering UIAutomationTypes .
Kompilera och springa.
Du kan inte använda designern för att lägga till eventhanterare, men det är inte något problem alls. Lägg bara till dem manuellt i koden bakom, som du ser med de tre hanterarna i detta exempel, inklusive hanteraren för testknappen.
UPDATE: Ett alternativt och förmodligen mer elegant sätt att lägga till eventhanterare har lagts till i FsXaml. Du kan lägga till händelseshanteraren i XAML, samma som i C # men du måste göra det manuellt och sedan åsidosätta motsvarande medlem som dyker upp i din F # -typ. Jag rekommenderar detta.
3: Lägg till en ikon i ett fönster
Det är en bra idé att behålla alla ikoner och bilder i en eller flera mappar.
Högerklicka på projektet och använd F # Power Tools / New Folder för att skapa en mapp med namnet Images.
Placera din ikon i den nya mappen Bilder på disken.
Tillbaka i Visual Studio, högerklicka på Bilder och använd Lägg till / befintligt objekt , visa sedan Alla filer ( . ) ** för att se ikonfilen så att du kan välja den och sedan Lägg till den.
Välj ikonfilen och ställ in sin Build Action till Resource .
I MainWindow.xaml, använd ikonattributet så här. Omgivande linjer visas för sammanhang.
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="First Demo" Height="200" Width="300"
Icon="Images/MainWindow.ico">
<Canvas>
Innan du springer, gör en ombyggnad, och inte bara en Build. Detta beror på att Visual Studio inte alltid sätter ikonfilen i den körbara om du inte bygger om.
Det är fönstret och inte applikationen som nu har en ikon. Du kommer att se ikonen uppe till vänster i fönstret under körning och du kommer att se den i aktivitetsfältet. Uppgiftshanteraren och Windows File Explorer kommer inte att visa denna ikon, eftersom de visar applikationsikonen snarare än fönsterikonen.
4: Lägg till ikonen till applikationen
Skapa en textfil med namnet AppIcon.rc med följande innehåll.
1 ICON "AppIcon.ico"
Du behöver en ikonfil med namnet AppIcon.ico för att detta ska fungera, men naturligtvis kan du anpassa namnen till din smak.
Kör följande kommando.
"C:\Program Files (x86)\Windows Kits\10\bin\x64\rc.exe" /v AppIcon.rc
Om du inte hittar rc.exe på den här platsen, sök sedan efter det under C: \ Program Files (x86) \ Windows Kits . Om du fortfarande inte hittar det, ladda ner Windows SDK från Microsoft.
En fil med namnet AppIcon.res kommer att genereras.
Öppna projektegenskaperna i Visual Studio. Välj applikationssidan .
I textrutan med titeln Resource fil skriver AppIcon.res (eller bilder \ AppIcon.res om du lägger det där), och stäng sedan projektfastigheter för att spara.
Ett felmeddelande kommer att visas med uppgift om "Den inmatade resursfilen finns inte. Ignorera detta. Felmeddelandet visas inte igen.
Återuppbygga. Den körbara har sedan en applikationsikon, och den visas i File Explorer. När du kör kommer denna ikon också att visas i Aktivitetshanteraren.
2: Lägg till en kontroll
Lägg till dessa två filer i den här ordningen ovanför filerna för huvudfönstret.
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()
Build-åtgärden för MyControl.xaml måste vara inställd på Resource .
Du kommer naturligtvis senare att behöva lägga till "som detta" i förklaringen till MyControl, precis som för huvudfönstret.
Lägg till denna rad i filen MainWindow.xaml.fs i klassen för MainWindow
let myControl = MyControl()
och lägg till dessa två rader i do- sektionen för huvudfönsterklassen.
this.mainCanvas.Children.Add myControl |> ignore
myControl.btnMyTest.Content <- "We're in business!"
Det kan finnas mer än en do- avdelning i en klass, och du kommer troligtvis att behöva den när du skriver massor av kod bakom kod.
Kontrollen har fått en ljusgrön bakgrundsfärg, så att du enkelt kan se var den är.
Var medveten om att kontrollen kommer att blockera knappen i huvudfönstret från vyn. Det är utanför exemplen för dessa exempel att lära dig WPF i allmänhet, så vi fixar inte det här.
Hur man lägger till kontroller från tredjepartsbibliotek
Om du lägger till kontroller från tredjepartsbibliotek i ett C # WPF-projekt kommer XAML-filen normalt att ha rader som den här.
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Detta kommer kanske inte att fungera med FsXaml.
Konstruktören och kompilatorn accepterar den raden, men det kommer förmodligen att finnas ett undantag vid körning som klagar över att tredje partens typ inte hittades när man läser XAML.
Prova istället något liknande.
xmlns:xctk="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"
Detta är då ett exempel på en kontroll som beror på ovanstående.
<xctk:IntegerUpDown Name="tbInput" Increment="1" Maximum="10" Minimum="0" Canvas.Left="13" Canvas.Top="27" Width="270"/>
Biblioteket som används i det här exemplet är den utvidgade Wpf Toolkit, som är gratis tillgänglig via NuGet eller som installationsprogram. Om du laddar ner bibliotek via NuGet är kontrollerna inte tillgängliga i verktygslådan, men de visas fortfarande i designern om du lägger till dem manuellt i XAML, och egenskaperna är tillgängliga i fönstret Egenskaper.
