Поиск…


Вступление

Большинство примеров, найденных для программирования F # WPF, похоже, имеют отношение к шаблону MVVM, а некоторые из них - MVC, но рядом нет ни одного, который правильно показывает, как встать и работать с «старым старым» кодом.

Код за рисунком очень прост в использовании для обучения, а также экспериментов. Он используется в многочисленных вводных книгах и учебных материалах в Интернете. Вот почему.

Эти примеры продемонстрируют, как создать код за приложением с окнами, элементами управления, изображениями и значками и т. Д.

Создайте новый код WPF F # для приложения.

Создайте консольное приложение F #.

Измените тип вывода приложения на приложение Windows .

Добавьте пакет FsXaml NuGet.

Добавьте эти четыре исходных файла в порядке, указанном здесь.

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.

Удалите файл Program.fs из проекта.

Измените действие сборки на ресурс для двух файлов xaml.

Добавьте ссылку на сборку UIAutomationTypes сборки .NET.

Скомпилируйте и запустите.

Вы не можете использовать конструктор для добавления обработчиков событий, но это совсем не проблема. Просто добавьте их вручную в код позади, как вы видите с тремя обработчиками в этом примере, включая обработчик тестовой кнопки.

UPDATE: в FsXaml добавлен альтернативный и, возможно, более элегантный способ добавления обработчиков событий. Вы можете добавить обработчик событий в XAML, как и в C #, но вы должны сделать это вручную, а затем переопределить соответствующий член, который появляется в вашем F #. Я рекомендую это.

3: добавление значка в окно

Рекомендуется сохранять все значки и изображения в одной или нескольких папках.

Щелкните правой кнопкой мыши по проекту и используйте F # Power Tools / New Folder для создания папки с именем «Изображения».

На диске поместите значок в папку «Новые изображения ».

Вернитесь в Visual Studio, щелкните правой кнопкой мыши по изображению и используйте « Добавить / существующий элемент» , а затем отобразите « Все файлы» ( . ) **, чтобы увидеть файл значка, чтобы его можно было выбрать, а затем « Добавить» .

Выберите файл значка и установите его действие «Построение» в « Ресурс» .

В MainWindow.xaml используйте атрибут Icon как это. Окружающие линии показаны для контекста.

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

Перед тем, как запустить, выполните перестройку, а не просто сборку. Это связано с тем, что Visual Studio не всегда помещает файл значка в исполняемый файл, если вы не перестраиваете его.

Это окно, а не приложение, которое теперь имеет значок. Вы увидите значок в левом верхнем углу окна во время выполнения, и вы увидите его на панели задач. Диспетчер задач и Проводник Windows не будут показывать этот значок, потому что они отображают значок приложения, а не значок окна.

4: Добавить значок в приложение

Создайте текстовый файл с именем AppIcon.rc со следующим содержимым.

1 ICON "AppIcon.ico"

Для этого вам понадобится файл значков с именем AppIcon.ico, но, конечно, вы можете настроить имена по своему вкусу.

Выполните следующую команду.

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

Если вы не можете найти rc.exe в этом месте, найдите его ниже C: \ Program Files (x86) \ Windows Kits . Если вы все еще не можете найти его, загрузите Windows SDK из Microsoft.

Будет создан файл с именем AppIcon.res.

В Visual Studio откройте свойства проекта. Выберите страницу приложения .

В текстовом поле « Файл ресурсов» введите AppIcon.res (или Images \ AppIcon.res, если вы положили его там), а затем закройте свойства проекта для сохранения.

Появится сообщение об ошибке: «Введенный файл ресурсов не существует. Игнорируйте это. Сообщение об ошибке не появится снова.

Перестроить. Затем исполняемый файл имеет значок приложения, и это отображается в Проводнике. При запуске этот значок также появится в диспетчере задач.

2: Добавить элемент управления

Добавьте эти два файла в этом порядке над файлами для главного окна.

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

Для Action для MyControl.xaml должен быть установлен ресурс .

Вы, конечно, позже должны добавить «как это» в объявление MyControl, как это сделано для главного окна.

В файле MainWindow.xaml.fs в классе для MainWindow добавьте эту строку

let myControl = MyControl()

и добавьте эти две строки в do- section основного класса окна.

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

Там может быть более чем один сделать -сече- в классе, и вы, вероятно, понадобится при написании много кода за кодом.

Элемент управления получил светло-зеленый цвет фона, так что вы можете легко увидеть, где он находится.

Имейте в виду, что элемент управления заблокирует кнопку главного окна из представления. Это не входит в объем этих примеров, чтобы научить вас WPF в целом, поэтому мы не будем это исправлять здесь.

Как добавить элементы управления из сторонних библиотек

Если вы добавите элементы управления из сторонних библиотек в проект C # WPF, в файле XAML обычно будут такие строки, как этот.

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

Возможно, это не с FsXaml.

Дизайнер и компилятор принимают эту строку, но, скорее всего, во время выполнения, вероятно, будет исключение, жалуясь на тип третьей стороны, который не будет найден при чтении XAML.

Вместо этого попробуйте следующее.

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

Тогда это пример элемента управления, который зависит от вышесказанного.

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

Библиотека, используемая в этом примере, - это расширенный набор инструментов Wpf, доступный бесплатно через NuGet или установщик. Если вы загружаете библиотеки через NuGet, элементы управления недоступны в панели инструментов, но они все еще отображаются в дизайнере, если вы добавите их вручную в XAML, а свойства доступны на панели «Свойства».



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow