-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ead37a8
commit 0c0f020
Showing
11 changed files
with
231 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| # Hello World Gtk Tutorial | ||
|
|
||
| In this hello world tutorial you will learn how to build a basic C# Gtk Application with a single Gtk Button widget inside it. | ||
|
|
||
| We will begin by creating a `GtkTutorials` directory to contain the Gtk tutorials you do and create the HelloWorld project using the command line. | ||
|
|
||
| ``` | ||
| mkdir GtkTutorials | ||
| cd GtkTutorials | ||
| dotnet new console -f net8.0 -o HelloWorld | ||
| dotnet new gitignore | ||
| dotnet new sln | ||
| dotnet sln add HelloWorld/ | ||
| ``` | ||
|
|
||
| The above commands will create a new console project, a gitignore file and a solution file for the project with the HelloWorld project added to the solution file so that people using ide's can open the project easily. As you follow more Gtk tutorials you can create the projects in the `GtkTutorials` directory by using `dotnet new console -f net8.0 -o NewProject` and add the projects to the solution file by using `dotnet sln add NewProject` to have multiple projects in the same solution file. | ||
|
|
||
| Next we will download the GirCore.Gtk-4.0 nuget package into the project. | ||
|
|
||
| > [!TIP] | ||
| > You can check for newer versions by visiting the nuget website at [https://www.nuget.org/packages/GirCore.Gtk-4.0/#versions-body-tab](https://www.nuget.org/packages/GirCore.Gtk-4.0/#versions-body-tab). | ||
| ``` | ||
| cd HelloWorld | ||
| dotnet add package GirCore.Gtk-4.0 --version 0.5.0 | ||
| ``` | ||
|
|
||
| The above commands will change to the HelloWorld directory then add the `GirCore.Gtk-4.0` package to the `HelloWorld.csproj` file. | ||
|
|
||
| We will now create a new class file to use to make the HelloWorld window in Gtk. This will later be loaded from the `Program.cs` file. | ||
|
|
||
| ``` | ||
| dotnet new class -n HelloWorld | ||
| ``` | ||
|
|
||
| Next open the `HelloWorld` directory in your favourite code editor or ide so we can edit the `HelloWorld.cs` and `Program.cs` files. | ||
|
|
||
| > [!NOTE] | ||
| > The code is commented to tell you what is happening. In addition to these comments the highlighted lines will be discussed further after the code block to give you more information. | ||
| **Filename: HelloWorld.cs** | ||
| [!code-csharp[](src/HelloWorld/HelloWorld.cs?highlight=37)] | ||
|
|
||
| **Line 37:** | ||
|
|
||
| On line 37 you set the `Child` of the `HelloWorld Gtk.Window` to be the `HelloWorld Gtk.Button`. | ||
|
|
||
| It may be easier to understand visually by looking at the diagram below. | ||
|
|
||
| ```mermaid | ||
| graph TB | ||
| parent[HelloWorld Gtk.Window] | ||
| subgraph parent [HelloWorld Gtk.Window] | ||
| n1[helloButton Gtk.Button] | ||
| end | ||
| ``` | ||
|
|
||
| As you can see the window is entirely made up of the `helloButton Gtk.Button` widget. In a real application you will use a `Layout Widget` like the `Gtk.Box` widget to have multiple widgets inside the window. | ||
|
|
||
| **Filename: Program.cs** | ||
| [!code-csharp[](src/HelloWorld/Program.cs)] | ||
|
|
||
| **Run the HelloWorld Application:** | ||
|
|
||
| Now we have completed the code for the hello world tutorial we can run the project. | ||
|
|
||
| ``` | ||
| dotnet run | ||
| ``` | ||
|
|
||
| If you have entered the code correctly and have the Gtk 4 runtime libraries installed correctly on your computer then you will see the Hello World application window appear on the screen. | ||
|
|
||
| > [!TIP] | ||
| > Try resizing the window to see that the `helloButton Gtk.Button` widget takes up the entire window with a 10 pixel margin around it. | ||
| # [Linux](#tab/linux) | ||
|  | ||
|
|
||
| # [Windows](#tab/windows) | ||
|  | ||
|
|
||
| # [MacOS](#tab/mac) | ||
|  |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| # Gtk Tutorial | ||
|
|
||
| When learning GUI frameworks like GTK, QT and wxWidgets it is common to teach the basics using code to make the learning experience easier. In a real life GTK application you will probably want to create a ui file using either [GTK Builder XML](https://docs.gtk.org/gtk4/class.Builder.html) or [Blueprint](https://jwestman.pages.gitlab.gnome.org/blueprint-compiler/) to build the UI. | ||
|
|
||
| On the internet you will often see Glade mentioned for building GUIs in a user friendly wysiwyg editor. Glade does not work with Gtk 4 however there is a new project [Cambalache](https://gitlab.gnome.org/jpu/cambalache) which will build GUIs in a similar way to the old Glade project that was used in GTK 2/3. | ||
|
|
||
| If you want to use Blueprint to build your UI then you can use [Workbench](https://apps.gnome.org/en-GB/Workbench/) to see a preview as you write the blueprint. | ||
|
|
||
| ## Tutorials | ||
| - [Hello World](hello_world.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| namespace HelloWorld | ||
| { | ||
| // Define a class named HelloWorld that extends Gtk.Window. | ||
| // Gtk.Window represents a top-level window in a GTK application. | ||
| public class HelloWorld : Gtk.Window | ||
| { | ||
| // Constructor for the HelloWorld class. | ||
| // This method sets up the window and its contents. | ||
| public HelloWorld() | ||
| { | ||
| // Set the title of the window. | ||
| Title = "Hello World App"; | ||
|
|
||
| // Set the default size of the window to 300 pixels wide and 30 pixels tall. | ||
| // This is the initial size when the window is first displayed. | ||
| SetDefaultSize(300, 30); | ||
|
|
||
| // Create a new button widget. | ||
| // Gtk.Button is a clickable UI element. | ||
| var helloButton = Gtk.Button.New(); | ||
|
|
||
| // Set the text label displayed on the button. | ||
| helloButton.Label = "Say Hello"; | ||
|
|
||
| // Add margins around the button to create spacing from the edges of the window. | ||
| // Margins are specified in pixels. | ||
| helloButton.SetMarginStart(10); // Left margin | ||
| helloButton.SetMarginEnd(10); // Right margin | ||
| helloButton.SetMarginTop(10); // Top margin | ||
| helloButton.SetMarginBottom(10); // Bottom margin | ||
|
|
||
| // Add the button to the window. | ||
| // The `Child` property represents the main widget contained in the window. | ||
| // Here, we set the button as the only child of the window. | ||
| // In a real application you would set the child to be one of the Gtk Layout widgets | ||
| // so you can have multiple widgets in the window. | ||
| Child = helloButton; | ||
|
|
||
| // Attach an event handler to the button's "OnClicked" event. | ||
| // This event is triggered when the user clicks the button. | ||
| helloButton.OnClicked += (_, _) => | ||
| { | ||
| // Print "Hello World!" to the console when the button is clicked. | ||
| Console.WriteLine("Hello World!\n"); | ||
| }; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <Project Sdk="Microsoft.NET.Sdk"> | ||
|
|
||
| <PropertyGroup> | ||
| <OutputType>Exe</OutputType> | ||
| <TargetFramework>net8.0</TargetFramework> | ||
| <ImplicitUsings>enable</ImplicitUsings> | ||
| <Nullable>enable</Nullable> | ||
| </PropertyGroup> | ||
|
|
||
| <ItemGroup> | ||
| <PackageReference Include="gircore.gtk-4.0" Version="0.5.0" /> | ||
| </ItemGroup> | ||
|
|
||
| </Project> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| // Create a new GTK application instance. | ||
| // "com.example.helloworld" is the unique application ID used to identify the app. | ||
| // The application ID should be a domain name you control. | ||
| // If you don't own a domain name you can use a project specific domain such as github pages. | ||
| // e.g. io.github.projectname | ||
| // Gio.ApplicationFlags.FlagsNone indicates no special flags are being used. | ||
| var application = Gtk.Application.New("com.example.helloworld", Gio.ApplicationFlags.FlagsNone); | ||
|
|
||
| // Attach an event handler to the application's "OnActivate" event. | ||
| // This event is triggered when the application is started or activated. | ||
| application.OnActivate += (sender, args) => | ||
| { | ||
| // Create a new instance of the main application window. | ||
| var window = new HelloWorld.HelloWorld(); | ||
|
|
||
| // Set the "Application" property of the window to the current application instance. | ||
| // This links the window to the application, allowing them to work together. | ||
| window.Application = (Gtk.Application) sender; | ||
|
|
||
| // Show the window on the screen. | ||
| // This makes the window visible to the user. | ||
| window.Show(); | ||
| }; | ||
|
|
||
| // Start the application's event loop and process user interactions. | ||
| // RunWithSynchronizationContext ensures proper thread synchronization for GTK. | ||
| // The "null" parameter takes the arguments from the commandline. As there are no arguments | ||
| // supported in this tutorial the parameter is not filled and thus null. | ||
| return application.RunWithSynchronizationContext(null); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters