Tugas PBKK 2 - Aplikasi "Hello World" di WPF .NET Framework

Maret 16, 2021

Tugas PBKK 2 - Aplikasi "Hello World" di WPF .NET Framework

Pada Tugas 2 PBKK, saya akan membuat aplikasi Hello World dan Profile dengan menggunakan .NET Framework. Untuk menggunakan framework ini pastikan terlebih dahulu telah melakukan instalasi Visual Studio. Bila belum pernah melakukan instalasi Visual Studio sebelumnya maka bisa terlebih dahulu untuk melakukan instalasi sesuai petunjuk pada laman Microsoft.

Instalasi .NET Desktop Development

Pada kasus ini saya sebelumnya sudah pernah menginstal Visual Studio 2019 namun karena instalasi sebelumnya ditujukan untuk membuat web menggunakan ASP .NET maka kali ini perlu melakukan instalasi ".NET desktop development" terlebih dahulu. Untuk instalasinya cukup mudah sebagai berikut.

Buka Visual Studio Installer, kemudian pilih modify sesuai gambar dibawah.

Kemudian pilih ".NET desktop development" dan klik modify.

Menggunakan WPF untuk membuat "Hello World"

Salah satu opsi yang ditawarkan .NET Framwork untuk membuat aplikasi GUI adalah dengan menggunakan Windows Presentation Foundation (WPF). WPF ini merupakan sebuah UI framework yang disematkan dalam .NET untuk membuat desktop client application. Pada WPF ini, XAML atau

Extensible Application Markup Language digunakan untuk mengatur layout yang akan digunakan. Untuk langkah pembuatannya sebagai berikut.

Membuat WPF project

Buat sebuah project baru, dan pilih WPS Application. Setelah itu lakukan konfigurasi yang diperlukan untuk project yang akan dibuat.

Membuat halaman "Hello World" dan profil.

Untuk membuat halaman baru, maka bisa dilakukan dengan klik kanan pada project di Solution Explorer - Add - Page (WPF).

Kemudian akan muncul sebuah window seperti dibawah ini. Beri nama dan klik "Add".

Source Code:

	<Page x:Class="ProfileApp.HelloWorld"
	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"
	xmlns:local="clr-namespace:ProfileApp"
	mc:Ignorable="d"
	d:DesignHeight="450" d:DesignWidth="800"
	Title="HelloWorld.">

	<Grid>
	<TextBlock FontSize="72" FontWeight="Bold" FontFamily="Brush Script MT" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,50,0">Hello World</TextBlock>
	</Grid>
	</Page>

view raw HelloWorld.xaml hosted with ❤ by GitHub

	<Page x:Class="ProfileApp.ProfilePage"
	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"
	xmlns:local="clr-namespace:ProfileApp"
	mc:Ignorable="d"
	d:DesignHeight="400" d:DesignWidth="800"
	Title="HelloWorld">

	<Grid>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*" MinWidth="160px"/>
	<ColumnDefinition Width="3*"/>
	<ColumnDefinition Width="40"/>
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
	<RowDefinition Height="30"/>
	<RowDefinition Height="*"/>
	</Grid.RowDefinitions>

	<Grid Grid.Row="1" Grid.Column="0">
	<Grid.RowDefinitions>
	<RowDefinition Height="50"/>
	<RowDefinition Height="200"/>
	<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<Image x:Name="profilepicture" Grid.Row="1" Margin="10,0" HorizontalAlignment="Center" VerticalAlignment="Top" Source="/profile-content-aware.jpg" Stretch="UniformToFill" />
	</Grid>

	<StackPanel Grid.Column="1" Grid.Row="1">
	<TextBlock Text="Profil Saya" HorizontalAlignment="Center" FontWeight="Bold" FontSize="24"/>

	<!--Nama-->
	<TextBlock Text="Nama Lengkap" Margin="0,10,0,0" FontWeight="Bold"/>
	<TextBox IsReadOnly="True" Text="Muhammad Ilham Bayhaqi" Margin="0,5,0,0" Visibility="Visible" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="#FFEAF5F7" FontSize="16" BorderBrush="#FFB5E2F7"/>

	<!--NRP-->
	<TextBlock Text="NRP" Margin="0,10,0,0" FontWeight="Bold"/>
	<TextBox IsReadOnly="True" Text="05111840000069" Margin="0,5,0,0" Visibility="Visible" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="#FFEAF5F7" FontSize="16" BorderBrush="#FFB5E2F7"/>

	<!--Kelas-->
	<TextBlock Text="Kelas" Margin="0,10,0,0" FontWeight="Bold"/>
	<TextBox IsReadOnly="True" Text="PBKK - B" Margin="0,5,0,0" Visibility="Visible" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="#FFEAF5F7" FontSize="16" BorderBrush="#FFB5E2F7"/>

	<!--Asal-->
	<TextBlock Text="Asal" Margin="0,10,0,0" FontWeight="Bold"/>
	<Grid>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="200"/>
	<ColumnDefinition Width="10"/>
	<ColumnDefinition Width="200"/>
	</Grid.ColumnDefinitions>
	<TextBox IsReadOnly="True" Grid.Column="0" Text="Sidoarjo" Margin="0,5,0,0" Visibility="Visible" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="#FFEAF5F7" FontSize="16" BorderBrush="#FFB5E2F7"/>
	<TextBox IsReadOnly="True" Grid.Column="2" Text="Jawa Timur" Margin="0,5,0,0" Visibility="Visible" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="#FFEAF5F7" FontSize="16" BorderBrush="#FFB5E2F7"/>
	</Grid>

	<!--Profil-->
	<TextBlock Text="Profil" Margin="0,10,0,0" FontWeight="Bold"/>
	<TextBox IsReadOnly="True" Height="60" HorizontalAlignment="Stretch" Margin="0,5,0,0" Visibility="Visible" Background="#FFEAF5F7" FontSize="16" BorderBrush="#FFB5E2F7" TextWrapping="Wrap">
	Seorang mahasiswa di Departemen Teknik Informatika Institut Teknologi Sepuluh Nopember.
	</TextBox>

	</StackPanel>

	</Grid>
	</Page>

view raw Profile.xaml hosted with ❤ by GitHub

Menambahkan Frame dan konfigurasi pada MainWindow

Pada saat melakukan create project baru, secara otomatis akan dibuatkan file bernama "MainWindow.xaml". Untuk menghubungkan halaman "Hello World" dan halaman profile maka tambahkan sebuah Frame pada MainWindow sehingga kedua Pages tersebut dapat dipanggil.

Source Code :

	<Window x:Class="ProfileApp.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:local="clr-namespace:ProfileApp"
	mc:Ignorable="d"
	Title="Profile App" Height="550" Width="800"
	ResizeMode="CanMinimize">

	<Grid>
	<Image x:Name="bgpicture" Opacity="0.3" Width="800" Height="550" Source="/triangle-pattern.jpg" Stretch="UniformToFill"/>
	<Frame x:Name="MainFrame" NavigationUIVisibility="Hidden">

	</Frame>
	<Grid>
	<Grid.RowDefinitions>
	<RowDefinition Height="400"/>
	<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<Button x:Name="SwapPagesBtn" Grid.Row="1" Height="50" Width="200" FontSize="14" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="30" FontWeight="Bold" FontStyle="Normal" FontStretch="Normal" Foreground="White" BorderBrush="#FF2038A2" Click="SwapPages_Click">
	<Button.Background>
	<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
	<GradientStop Color="#FF725EF1"/>
	<GradientStop Color="#FF81C6FF" Offset="1"/>
	</LinearGradientBrush>
	</Button.Background>
	</Button>
	</Grid>
	</Grid>
	</Window>

view raw MainWindow.xaml hosted with ❤ by GitHub

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	using System.Windows;
	using System.Windows.Controls;
	using System.Windows.Data;
	using System.Windows.Documents;
	using System.Windows.Input;
	using System.Windows.Media;
	using System.Windows.Media.Imaging;
	using System.Windows.Navigation;
	using System.Windows.Shapes;

	namespace ProfileApp
	{
	/// <summary>
	/// Interaction logic for MainWindow.xaml
	/// </summary>
	public partial class MainWindow : Window
	{
	private String currentPages;
	public MainWindow()
	{
	InitializeComponent();
	currentPages = "profile";
	SwapPages();
	}

	private void SwapPages()
	{
	if (currentPages.Equals("hello"))
	{
	MainFrame.Content = new ProfilePage();
	SwapPagesBtn.Content = "Swap to Hello World";
	currentPages = "profile";
	}
	else if (currentPages.Equals("profile"))
	{
	MainFrame.Content = new HelloWorld();
	SwapPagesBtn.Content = "Swap to Profile";
	currentPages = "hello";
	}
	}

	private void SwapPages_Click(object sender, RoutedEventArgs e)
	{
	SwapPages();
	}
	}
	}

view raw MainWindow.xaml.cs hosted with ❤ by GitHub

Publish Aplikasi

Agar aplikasi dapat berjalan diluar Visual Studio, maka perlu dilakukan publish aplikasi. Publish aplikasi ini dilakukan dengan klik kanan di project yang dibuat pada Solution Explorer.