Rounded Button di Windows Phone

Dalam kesempatan baru-baru ini saya membutuhkan untuk membuat tampilan ‘button’ dengan rounded-corner, salah satu hal yang tidak disarankan sebenarnya oleh panduan desain aplikasi Windows Phone.

Untuk membuat tampilan Button yang rounded-corner kita bisa menggunakan dua cara yaitu :

  1. Menggunakan asset gambar yang berbentuk rounded corner
  2. Melakukan re-templating

Tentunya saya ingin melakukan dengan cara yang lebih ‘native’, menggunakan re-templating dari kontrol standar Button. Dengan menggunakan kontrol standar juga kita tidak perlu mengubah sifat natural dari sebuah button, seperti state yang dimiliki atau efek tilt yang menjadi visual cue untuk user. Untuk melakukan re-templating, kita cukup mengubah template yang digunakan kontrol Button dan menggunakan kontrol-kontrol yang sesuai. Untuk mendapatkan layout rounded saya gunakan border dengan radius tertentu.


<Button x:Name="ButtonLogin"  VerticalAlignment="Bottom" Margin="0,0,0,120" Opacity="0.8">

                <Button.Template>

                    <ControlTemplate>

                        <Border BorderThickness="2" Width="300" Height="80" CornerRadius="5">

                            <Border.BorderBrush>

                                <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">

                                    <GradientStop Color="#FFFFFFFF"/>

                                    <GradientStop Color="#FFFFFFFF"/>

                                </LinearGradientBrush>

                            </Border.BorderBrush>

                            <TextBlock Text="LOGIN WITH FACEBOOK" FontFamily="Segoe WP" VerticalAlignment="Center" HorizontalAlignment="Center"/>

                        </Border>

                    </ControlTemplate>

                </Button.Template>

            </Button>

Hasil akhir dari kode diatas adalah seperti ini :

image

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s