El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Creació d'Aplicacions d'Escriptori amb Avalonia

Següent ►
►

Introducció

Avalonia és un framework multiplataforma per a la creació d'aplicacions d'escriptori amb F#. Aquest framework permet desenvolupar aplicacions que funcionen en Windows, macOS i Linux amb una única base de codi. En aquest tema, aprendrem a configurar un projecte Avalonia, crear una interfície d'usuari bàsica i gestionar esdeveniments.

Configuració de l'Entorn

Requisits Previs

Abans de començar, assegura't de tenir instal·lats els següents components:

  • .NET SDK (versió 5.0 o superior)
  • Un editor de codi com Visual Studio Code o Visual Studio

Creació d'un Nou Projecte Avalonia

  1. Obre una terminal i executa el següent comandament per crear un nou projecte Avalonia:

    dotnet new avalonia.app -n MyAvaloniaApp

  2. Canvia al directori del projecte:

    cd MyAvaloniaApp

  3. Restaura les dependències del projecte:

    dotnet restore

  4. Obre el projecte en el teu editor de codi preferit.

Estructura del Projecte

Un projecte Avalonia típic té la següent estructura:

MyAvaloniaApp/
├── Assets/
├── bin/
├── obj/
├── App.xaml
├── App.xaml.fs
├── MainWindow.xaml
├── MainWindow.xaml.fs
├── MyAvaloniaApp.fsproj
└── Program.fs

Fitxers Clau

  • App.xaml i App.xaml.fs: Defineixen l'aplicació i la seva configuració inicial.
  • MainWindow.xaml i MainWindow.xaml.fs: Defineixen la finestra principal de l'aplicació.
  • Program.fs: Conté el punt d'entrada de l'aplicació.

Creació d'una Interfície d'Usuari Bàsica

Definició de la Finestra Principal

Obre el fitxer MainWindow.xaml i afegeix el següent codi per definir una interfície d'usuari bàsica amb un botó i una etiqueta:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="MyAvaloniaApp.MainWindow"
        Title="My Avalonia App"
        Width="400" Height="200">
    <StackPanel>
        <TextBlock Name="greetingText" Text="Hello, Avalonia!" Margin="10"/>
        <Button Name="clickMeButton" Content="Click Me" Margin="10" Click="OnButtonClick"/>
    </StackPanel>
</Window>

Gestió d'Esdeveniments

Obre el fitxer MainWindow.xaml.fs i afegeix el següent codi per gestionar l'esdeveniment de clic del botó:

namespace MyAvaloniaApp

open Avalonia
open Avalonia.Controls
open Avalonia.Markup.Xaml

type MainWindow() as this =
    inherit Window()

    do
        this.InitializeComponent()
        this.AttachDevTools()

    member private this.InitializeComponent() =
        AvaloniaXamlLoader.Load(this)

    member this.OnButtonClick(sender: obj, e: RoutedEventArgs) =
        let greetingText = this.FindControl<TextBlock>("greetingText")
        greetingText.Text <- "Button Clicked!"

Executar l'Aplicació

Per executar l'aplicació, torna a la terminal i executa el següent comandament:

dotnet run

Hauries de veure una finestra amb un botó i una etiqueta. Quan facis clic al botó, el text de l'etiqueta canviarà a "Button Clicked!".

Exercicis Pràctics

Exercici 1: Afegir un Camp de Text

Afegeix un camp de text a la interfície d'usuari i actualitza el text de l'etiqueta amb el contingut del camp de text quan es faci clic al botó.

Solució

Actualitza el fitxer MainWindow.xaml:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="MyAvaloniaApp.MainWindow"
        Title="My Avalonia App"
        Width="400" Height="200">
    <StackPanel>
        <TextBox Name="inputTextBox" Margin="10"/>
        <TextBlock Name="greetingText" Text="Hello, Avalonia!" Margin="10"/>
        <Button Name="clickMeButton" Content="Click Me" Margin="10" Click="OnButtonClick"/>
    </StackPanel>
</Window>

Actualitza el fitxer MainWindow.xaml.fs:

namespace MyAvaloniaApp

open Avalonia
open Avalonia.Controls
open Avalonia.Markup.Xaml

type MainWindow() as this =
    inherit Window()

    do
        this.InitializeComponent()
        this.AttachDevTools()

    member private this.InitializeComponent() =
        AvaloniaXamlLoader.Load(this)

    member this.OnButtonClick(sender: obj, e: RoutedEventArgs) =
        let inputTextBox = this.FindControl<TextBox>("inputTextBox")
        let greetingText = this.FindControl<TextBlock>("greetingText")
        greetingText.Text <- inputTextBox.Text

Exercici 2: Afegir un Selector de Color

Afegeix un selector de color a la interfície d'usuari i canvia el color del text de l'etiqueta segons el color seleccionat.

Solució

Actualitza el fitxer MainWindow.xaml:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="MyAvaloniaApp.MainWindow"
        Title="My Avalonia App"
        Width="400" Height="200">
    <StackPanel>
        <TextBox Name="inputTextBox" Margin="10"/>
        <TextBlock Name="greetingText" Text="Hello, Avalonia!" Margin="10"/>
        <Button Name="clickMeButton" Content="Click Me" Margin="10" Click="OnButtonClick"/>
        <ColorPicker Name="colorPicker" Margin="10" SelectedColorChanged="OnColorChanged"/>
    </StackPanel>
</Window>

Actualitza el fitxer MainWindow.xaml.fs:

namespace MyAvaloniaApp

open Avalonia
open Avalonia.Controls
open Avalonia.Markup.Xaml
open Avalonia.Media

type MainWindow() as this =
    inherit Window()

    do
        this.InitializeComponent()
        this.AttachDevTools()

    member private this.InitializeComponent() =
        AvaloniaXamlLoader.Load(this)

    member this.OnButtonClick(sender: obj, e: RoutedEventArgs) =
        let inputTextBox = this.FindControl<TextBox>("inputTextBox")
        let greetingText = this.FindControl<TextBlock>("greetingText")
        greetingText.Text <- inputTextBox.Text

    member this.OnColorChanged(sender: obj, e: RoutedEventArgs) =
        let colorPicker = this.FindControl<ColorPicker>("colorPicker")
        let greetingText = this.FindControl<TextBlock>("greetingText")
        greetingText.Foreground <- SolidColorBrush(colorPicker.SelectedColor)

Conclusió

En aquest tema, hem après a configurar un projecte Avalonia, crear una interfície d'usuari bàsica i gestionar esdeveniments. Avalonia és un framework potent i flexible que permet crear aplicacions d'escriptori multiplataforma amb facilitat. Amb els coneixements adquirits, estàs preparat per explorar més funcionalitats d'Avalonia i crear aplicacions d'escriptori més complexes.

En el següent tema, explorarem com desenvolupar jocs amb F#.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats