Tag Archives: application bar

Membuat Application Bar pada Aplikasi Metro Style

Pada artikel kali ini adalah bagian yang mudah akan tetapi jika kalian melewatkan bagian yang satu ini, akan sangat sulit atau bahkan aplikasi anda tidak dapat ter-publish di Windows Store. Untuk para developer yang sudah biasa mendevelop aplikasi di Windows Store pastinya sudah sangat tidak aneh dengan artikel kali ini. 🙂

Oke tidak berlama-lama, langsung saja kita membuat aplikasi metro style dengan application bar.

 

 

Pembuatan Aplikasi

Buatlah blank app (XAML) dengan nama : ContohAppBar

Aplikasi AppBar 1

Setelah halaman blank page terbuka, kalian bukalah MainPage.xaml kemudian tulislah code berikut di bagian grid :

<Grid Background=”#FF082746″>
<Image x:Name=”WallpaperImg” HorizontalAlignment=”Left” Height=”768″ VerticalAlignment=”Top” Width=”1366″/>

</Grid>

Sehingga tampilan aplikasi ContohAppBar menjadi seperti berikut :

Aplikasi AppBar 2

 

Oke, sekarang di atas bagian grid tuliskan code berikut :

<Page.BottomAppBar>
<AppBar x:Name=”bottomAppBar” IsSticky=”True”>
<Grid>
<StackPanel x:Name=”rightPanel”
Orientation=”Horizontal” HorizontalAlignment=”Right”>
<Button
AutomationProperties.Name=”Cari Gambar”
AutomationProperties.AutomationId=”SortButton”
Click=”cariGambar” Style=”{StaticResource SearchAppBarButtonStyle}” />
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>

Dan sekarang aplikasi kalian sudah memiliki sebuah application bar yang berisi satu button “Cari Gambar”.

Aplikasi AppBar 3

Tekan “F7” untuk masuk ke dalam MainPage.xaml.cs.

Tuliskan code berikut di bawah constructor :

private async void cariGambar(object sender, RoutedEventArgs e)
{
Windows.Storage.Pickers.FileOpenPicker openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Add(“.jpg”);

Windows.Storage.StorageFile file = await openPicker.PickSingleFileAsync();

if (file != null)
{
// Ensure the stream is disposed once the image is loaded
using (Windows.Storage.Streams.IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
// Set the image source to the selected bitmap
Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage = new Windows.UI.Xaml.Media.Imaging.BitmapImage();

await bitmapImage.SetSourceAsync(fileStream);
WallpaperImg.Source = bitmapImage;
WallpaperImg.Stretch = Stretch.Fill;
}
}
}

 

 

Jalankan Aplikasi

Waktunya menjalankan aplikasi! Sekarang run project kalian dan setelah aplikasi kalian tereksekusi klik kanan di sembarang tempat.

Aplikasi AppBar 4

Wah, application bar kalian terpop-up ke atas! Tekan button “Cari Gambar” dan kalian akan masuk ke directory PC anda lalu pilihlah gambar dari PC kalian.

Aplikasi AppBar 5

Kemudian tekan open. Dan aplikasi kalian pun akan menampilkan gambar yang kalian pilih tadi.

Aplikasi AppBar 6

Mudah sekali bukan untuk menambahkan application bar ke aplikasi metro style kalian. Wajib mencoba ya.