Recap kembali, sebelumnya kita telah selesai mendesign Main Page, kemudian mendesign Game Page, dan juga mengatur game logic di Game Page serta menampilkan data pertanyaannya, selanjutnya pada pembahasan kali ini kita akan kembali mendesign, yaitu mendesign Highscore Page.
Highscore page akan kita gunakan untuk melihat daftar pemain dan juga score kita ketika bermain.

Jadi, langkah awal seperti biasa kita Add New Item, lalu pilih saja Basic Page dan namakan menjadi HighscorePage.xaml

Kita atur background menjadi sama seperti Main Page dan Game Page kita
<Grid Background="#FFABD1FF">

Tambahkan efek transisi ketika masuk ke Highscore Page

<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>

Kita layouting  seperti pada Game Page, namun kali kita akan buat Grid menjadi 2 baris, yaitu untuk nama aplikasi dan juga grid untuk memperlihatkan data score.

<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

Untuk nama aplikasi kita buat grid seperti berikut ini:

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Click="backButton_Click"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40">
<Run Text="ABC 5 DASAR" FontSize="70" Foreground="{StaticResource ForegroundBrush}"/>
</TextBlock>
</Grid>

Title untuk Highscore page

Lalu kita buat grid kedua untuk mendisplay control untuk mensubmit score ke highscore table, dan juga menampilkan semua score yang ada.

Kita letakan Grid untuk menampilkan highscore di baris 1 pada Grid utama kita, dan kita layout grid untuk menampilkan highscore menjadi 2 kolom

<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
</Grid>

Kita gunakan control GridView sebagai layout untuk menampilkan highscore dan juga submit score. Masukan syntax berikut ke dalam Grid sebelumnya.

<GridView Name="HighscoresGridView" ScrollViewer.HorizontalScrollBarVisibility="Hidden" Height="500" Grid.ColumnSpan="2" SelectionMode="None" VerticalAlignment="Center" VerticalContentAlignment="Top">
<GridView>

Pada GridView kita buat Grid untuk submit score,

<GridView.Header>
<GridViewItem VerticalAlignment="Top" Name="SubmitScoreItem">
<Grid Opacity="0.8" Width="600" Height="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="15" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>

Tambahkan control progress ring sebagai animasi ketika menambahkan data highscore

<ProgressRing Name="SubmitProgressRing" Grid.Column="0" HorizontalAlignment="Center" Margin="0,75,0,0" VerticalAlignment="Top" />

Kita masukan StackPanel yang berisi text untuk mengisi username dan juga menampilkan score dari user.

<StackPanel Grid.Column="0" Grid.Row="0" Background="White" Opacity="0.8">
<TextBlock HorizontalAlignment="Center" Text="Congratulations" Foreground="#3B3838" FontSize="50" Margin="0,15,0,5" />
<TextBlock Name="TextBlockScore" HorizontalAlignment="Center" Text="You scored 50 points!" Foreground="#595959" FontWeight="SemiLight" FontSize="35" />
<TextBlock HorizontalAlignment="Center" Text="Username" Foreground="#595959" FontWeight="SemiLight" FontSize="35" Margin="-200,40,0,0" />
<TextBox FontSize="28" VerticalContentAlignment="Center" Width="350" Height="50" BorderBrush="#595959" Name="TextBoxName" />
</StackPanel>

Selanjutnya tambahkan button untuk submit dan juga share score.

<Grid Grid.Column="2" Grid.Row="0">
<Button Grid.Column="0" BorderBrush="Transparent" Padding="0,0,0,0" BorderThickness="0" Background="#FF72ABDE" Width="150" Height="150" HorizontalAlignment="Center" VerticalAlignment="Top" Opacity="0.8" Name="Submit" Click="Submit_Click">
<Button.Content>
<Grid Width="130" Height="130">
<Border BorderThickness="3" BorderBrush="#FF72ABDE" Width="55" Height="55" CornerRadius="60">
<TextBlock FontFamily="Segoe UI Symbol" Text="" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" />
</Border>
<TextBlock Text="Submit" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="White"/>
</Grid>
</Button.Content>
</Button>


<Button Grid.Column="0" BorderBrush="Transparent" Padding="0,0,0,0" BorderThickness="0" Background="#FF72ABDE" Width="150" Height="150" HorizontalAlignment="Center" VerticalAlignment="Bottom" Opacity="0.8" Name="Share" Click="Share_Click">
<Button.Content>
<Grid Width="130" Height="130">
<Border BorderThickness="3" BorderBrush="#FF72ABDE" Width="55" Height="55" CornerRadius="60">
<TextBlock FontFamily="Segoe UI Symbol" Text="" FontSize="45" Foreground="{StaticResource ForegroundBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<TextBlock Text="Share" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="{StaticResource ForegroundBrush}"/>
</Grid>
</Button.Content>
</Button>
</Grid> 

Maka tampilannya akan seperti berikut ini:

Highscore Page
Highscore Page

Selanjutnya kita perlu membuat Grid kedua untuk menampilkan data-data highscorenya dalam bentuk no, nama dan juga score. Pada grid ini tidak terlihat atau hidden dalam workspace design page kita.

<GridView.ItemTemplate>
<DataTemplate>
<Border Background="#FF72ABDE">
<ListView ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionMode="None" Width="450" Height="300" ItemsSource="{Binding Value}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="400" Margin="10,0,10,13">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Id, Converter={StaticResource RowNumberConverter}, UpdateSourceTrigger=PropertyChanged}" FontWeight="Light" Grid.Column="0" HorizontalAlignment="Center" FontSize="29" Foreground="White"/>
<TextBlock Text="{Binding Name}" Grid.Column="1" HorizontalAlignment="Left" FontSize="29" FontWeight="Light" Foreground="White"/>
<TextBlock Text="{Binding Score}" Grid.Column="2" HorizontalAlignment="Right" FontSize="29" FontWeight="Light" Foreground="White"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Border>
</DataTemplate>
</GridView.ItemTemplate>

Pada syntax:
<TextBlock Text="{Binding Id, Converter={StaticResource RowNumberConverter}, UpdateSourceTrigger=PropertyChanged}" FontWeight="Light" Grid.Column="0" HorizontalAlignment="Center" FontSize="29" Foreground="White"/>
<TextBlock Text="{Binding Name}" Grid.Column="1" HorizontalAlignment="Left" FontSize="29" FontWeight="Light" Foreground="White"/>
<TextBlock Text="{Binding Score}" Grid.Column="2" HorizontalAlignment="Right" FontSize="29" FontWeight="Light" Foreground="White"/>

Kita akan  melakukan data binding dari highscore manager class, dimana kita menghandle highscore. Sedangkan pada Id kita akan melakukan binding dengan menggunakan RowNumberConverter.cs yaitu class untuk mendapatkan nomer id pada highscore table. Pada folder Common kita tambahkan class file dengan nama RowNumberConverter.cs dan isikan dengan code berikut ini:

class RowNumberConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
HighscoreManager manager = new HighscoreManager();
HighscoreItem item = manager.Highscores.FirstOrDefault(x => (x.Id == null && value == null) || x.Id.Equals((string)value));
return item == null ? 0 : manager.Highscores.ToList().IndexOf(item) + 1;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return new HighscoreManager().Highscores.ToList()[((int)value) - 1].Id;
}
}

Kita akan membuat class HighscoreManager di series berikutnya, untuk saat ini kawan akan menemui error di class RowNumberConverter. Selanjutnya pada HighscorePage.xaml kita, tambahkan: xxmlns:common="using:ABC5DASAR.Common"
dan juga tambahkan line berikut sebelum grid utama kita:

<Page.Resources>
<common:RowNumberConverter x:Key="RowNumberConverter" />
</Page.Resources>

Cukup sudah series kali ini, dan pada series kali ini kita telah berhasil dan selesai mendesign Highscore Page, selanjutnya di series berikutnya kita akan membuat logic untuk menyimpan data highscore. Kita juga akan mempelajari tentang binding, serta menggunakan Share Control pada windows 8.1, jadi baca terus.
Terima Kasih, semoga bermanfaat.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s