F#
1: F # Kod WPF za aplikacją z FsXaml

Wprowadzenie

Utwórz nowy kod FF WPF za aplikacją.

Utwórz aplikację konsoli F #.

Zmień typ danych wyjściowych aplikacji na aplikację systemu Windows .

Dodaj pakiet FsXaml NuGet.

Dodaj te cztery pliki źródłowe, w kolejności podanej tutaj.

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.

Usuń plik Program.fs z projektu.

Zmień działanie kompilacji na Zasób dla dwóch plików xaml.

Dodaj odwołanie do zestawu .NET UIAutomationTypes .

Skompiluj i uruchom.

Nie można używać projektanta do dodawania procedur obsługi zdarzeń, ale to wcale nie jest problem. Po prostu dodaj je ręcznie w kodzie z tyłu, tak jak w przypadku trzech programów obsługi w tym przykładzie, w tym funkcji obsługi przycisku testowego.

AKTUALIZACJA: Do FsXaml dodano alternatywny i prawdopodobnie bardziej elegancki sposób dodawania procedur obsługi zdarzeń. Możesz dodać moduł obsługi zdarzeń w XAML, tak samo jak w C #, ale musisz to zrobić ręcznie, a następnie zastąpić odpowiedni element, który pojawia się w twoim typie F #. Polecam to.

3: Dodaj ikonę do okna

Dobrze jest przechowywać wszystkie ikony i obrazy w jednym lub kilku folderach.

Kliknij projekt prawym przyciskiem myszy i użyj F # Power Tools / New Folder, aby utworzyć folder o nazwie Obrazy.

Na dysku umieść ikonę w nowym folderze Obrazy .

Po powrocie do Visual Studio kliknij prawym przyciskiem myszy Obrazy i użyj polecenia Dodaj / istniejący element , a następnie pokaż wszystkie pliki ( . ) **, aby zobaczyć plik ikony, abyś mógł go wybrać, a następnie dodaj go.

Wybierz plik ikony i ustaw opcję Buduj akcję na Zasób .

W MainWindow.xaml użyj takiego atrybutu Ikona. Linie otaczające są pokazane dla kontekstu.

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

Przed uruchomieniem przebuduj, a nie tylko kompilację. Wynika to z faktu, że Visual Studio nie zawsze umieszcza plik ikony w pliku wykonywalnym, chyba że przebudujesz.

To okno, a nie aplikacja, ma teraz ikonę. W czasie wykonywania zobaczysz ikonę w lewym górnym rogu okna i zobaczysz ją na pasku zadań. Menedżer zadań i Eksplorator plików systemu Windows nie będą wyświetlać tej ikony, ponieważ wyświetlają ikonę aplikacji zamiast ikony okna.

4: Dodaj ikonę do aplikacji

Utwórz plik tekstowy o nazwie AppIcon.rc o następującej treści.

1 ICON "AppIcon.ico"

Aby to zadziałało, potrzebujesz pliku ikony o nazwie AppIcon.ico, ale oczywiście możesz dostosować nazwy do własnych upodobań.

Uruchom następujące polecenie.

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

Jeśli nie możesz znaleźć rc.exe w tej lokalizacji, wyszukaj go poniżej C: \ Program Files (x86) \ Windows Kits . Jeśli nadal nie możesz go znaleźć, pobierz Windows SDK od Microsoft.

Zostanie wygenerowany plik o nazwie AppIcon.res.

W Visual Studio otwórz właściwości projektu. Wybierz stronę aplikacji .

W polu tekstowym zatytułowanym Plik zasobów wpisz AppIcon.res (lub Images \ AppIcon.res, jeśli go tam umieścisz), a następnie zamknij właściwości projektu, aby zapisać.

Pojawi się komunikat o błędzie z informacją: „Wprowadzony plik zasobów nie istnieje. Zignoruj to. Komunikat o błędzie nie pojawi się ponownie.

Odbudować. Plik wykonywalny będzie wtedy miał ikonę aplikacji, która pojawia się w Eksploratorze plików. Podczas działania ta ikona pojawi się również w Menedżerze zadań.

2: Dodaj kontrolkę

Dodaj te dwa pliki w tej kolejności nad plikami w oknie głównym.

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

Akcja kompilacji dla MyControl.xaml musi być ustawiona na Zasób .

Oczywiście będziesz musiał później dodać „as this” w deklaracji MyControl, tak jak zrobiono to w oknie głównym.

W pliku MainWindow.xaml.fs , w klasie dla MainWindow, dodaj tę linię

let myControl = MyControl()

i dodaj te dwa wiersze w sekcji do -głównej klasy okna głównego.

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

Nie może być więcej niż jeden zrobić -section w klasie, i jest prawdopodobne, aby to potrzebne podczas pisania dużo kodu z opóźnieniem kodu.

Kontrolce nadano jasnozielony kolor tła, dzięki czemu można łatwo zobaczyć, gdzie jest.

Należy pamiętać, że formant zablokuje widok przycisku głównego okna. Nauczanie WPF w ogólności wykracza poza zakres tych przykładów, więc nie naprawimy tego tutaj.

Jak dodać kontrolki z bibliotek stron trzecich

Jeśli dodasz formanty z bibliotek stron trzecich w projekcie WPF w C #, plik XAML zwykle będzie miał linie takie jak ten.

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

Być może nie zadziała to z FsXaml.

Projektant i kompilator akceptują tę linię, ale prawdopodobnie w środowisku wykonawczym wystąpi wyjątek, w którym narzeka się, że podczas odczytu XAML nie znaleziono typu strony trzeciej.

Zamiast tego spróbuj czegoś takiego.

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

To jest przykład kontroli, która zależy od powyższego.

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

Biblioteką użytą w tym przykładzie jest Extended Wpf Toolkit, dostępny bezpłatnie przez NuGet lub jako instalator. Jeśli pobierzesz biblioteki przez NuGet, formanty nie będą dostępne w Przyborniku, ale nadal będą wyświetlane w projektancie, jeśli dodasz je ręcznie w XAML, a właściwości są dostępne w panelu Właściwości.