firstman

Menggunakan Application Bar icon pada aplikasi pada VS 2010 Express Edition

Pada blog Sebelumnya saya sudah menjelaskan tentang apa itu Application Bar icon dan cara mendapatkannya (Pada Geeks Portal dan Website mugi )…pada tulisan ini mari kita coba manfaatkan application bar itu pada aplikasi Windows Phone 7 dengan menggunakan tool Visual Studio 2010 Expres Edition

Pertama tama buatlah sebuah atau bukalah existing Project pada Visual Studio express edtion for Windows phone 7

lalu tambahkan referensi dengan cara pada Solution explorer klik kanan pada Referense dan Add Referens, pada .NET tambah “Microsoft.Phone.Shell”

kemudian masukkan icon2 yang sudah kita download ke dalam project, caranya pada solution explorer klik kanan pada project yang kita buat, dan buatlah sebuah folder baru bernama “images”

lalu masukkan icon2 kita pada folder image, caranya klik kanan pada Folder images dan pilih Add lalu Existing item..masukkanlah semua image yang sudah kita download

tapi sebelumnya copykan dulu image yang sudah kita extrac kedalah folder images pada project directory

seteleh itu untuk masing2 Images yang kita masukkan kita set propertinya yaitu properti Build Action property dengan “Content” dan set Copy to Output property ke “Copy always”.

Membuat aplication bar pada XAML

kita bisa membuat aplication bar, meng-assignya ke page dan set event handler untuk icon button dan menu dengan merubah beberpa element pada XAML. caranya

copykan Code XAML di bawah keini ke Program anda

  1: Application bAr Xaml
  2: <!--RootFrame points to and loads the first page of your application-->
  3:     <Application.RootVisual>
  4:         <navigation:PhoneApplicationFrame x:Name="RootFrame" Source="/MainPage.xaml"/>
  5:     </Application.RootVisual>
  6:  
  7:     <!-- Resources for following the Windows Phone design guidelines -->
  8:     <Application.Resources>
  9:         <!-- Color Brushes -->
 10:         <Color x:Key="PhoneBackgroundColor">#FF1F1F1F</Color>
 11:         <Color x:Key="PhoneContrastForegroundColor">Black</Color>
 12:         <Color x:Key="PhoneForegroundColor">White</Color>
 13:         <Color x:Key="PhoneInactiveColor">#FF666666</Color>
 14:         <Color x:Key="PhoneDisabledColor">#FF808080</Color>
 15:         <Color x:Key="PhoneSubtleColor">#FF999999</Color>
 16:         <Color x:Key="PhoneContrastBackgroundColor">#FFFFFFFF</Color>
 17:         <Color x:Key="PhoneTextBoxColor">#FFBFBFBF</Color>
 18:         <Color x:Key="PhoneBorderColor">#FFCCCCCC</Color>
 19:         <Color x:Key="PhoneTextSelectionColor">Black</Color>
 20:         <Color x:Key="PhoneAccentColor">#FFF09609</Color>
 21:         <SolidColorBrush x:Key="PhoneAccentBrush" Color="{StaticResource PhoneAccentColor}"/>
 22:         <SolidColorBrush x:Key="PhoneBackgroundBrush" Color="{StaticResource PhoneBackgroundColor}"/>
 23:         <SolidColorBrush x:Key="PhoneContrastForegroundBrush" Color="{StaticResource PhoneContrastForegroundColor}"/>
 24:         <SolidColorBrush x:Key="PhoneForegroundBrush" Color="{StaticResource PhoneForegroundColor}"/>
 25:         <SolidColorBrush x:Key="PhoneInactiveBrush" Color="{StaticResource PhoneInactiveColor}"/>
 26:         <SolidColorBrush x:Key="PhoneDisabledBrush" Color="{StaticResource PhoneDisabledColor}"/>
 27:         <SolidColorBrush x:Key="PhoneSubtleBrush" Color="{StaticResource PhoneSubtleColor}"/>
 28:         <SolidColorBrush x:Key="PhoneContrastBackgroundBrush" Color="{StaticResource PhoneContrastBackgroundColor}"/>
 29:         <SolidColorBrush x:Key="PhoneTextBoxBrush" Color="{StaticResource PhoneTextBoxColor}"/>
 30:         <SolidColorBrush x:Key="PhoneBorderBrush" Color="{StaticResource PhoneBorderColor}"/>
 31:         <SolidColorBrush x:Key="PhoneTextSelectionBrush" Color="{StaticResource PhoneTextSelectionColor}"/>
 32:         <SolidColorBrush x:Key="TransparentBrush" Color="Transparent"/>
 33:  
 34:         <!-- Touch Target area -->
 35:         <Thickness x:Key="PhoneTouchTargetOverhang">12</Thickness>
 36:  
 37:         <!-- Default border size-->
 38:         <Thickness x:Key="PhoneDefaultBorderThickness">3</Thickness>
 39:  
 40:         <!-- Font names -->
 41:         <FontFamily x:Key="PhoneFontFamilyNormal">Segoe WP</FontFamily>
 42:         <FontFamily x:Key="PhoneFontFamilyLight">Segoe WP Light</FontFamily>
 43:         <FontFamily x:Key="PhoneFontFamilySemiLight">Segoe WP SemiLight</FontFamily>
 44:         <FontFamily x:Key="PhoneFontFamilySemiBold">Segoe WP Semibold</FontFamily>
 45:  
 46:         <!-- Font sizes -->
 47:         <!--14pt-->
 48:         <System:Double x:Key="PhoneFontSizeSmall">18.667</System:Double>
 49:         <!--15pt-->
 50:         <System:Double x:Key="PhoneFontSizeNormal">20</System:Double>
 51:         <!--17pt-->
 52:         <System:Double x:Key="PhoneFontSizeMedium">22.667</System:Double>
 53:         <!--19pt-->
 54:         <System:Double x:Key="PhoneFontSizeMediumLarge">25.333</System:Double>
 55:         <!--24pt-->
 56:         <System:Double x:Key="PhoneFontSizeLarge">32</System:Double>
 57:         <!--32pt-->
 58:         <System:Double x:Key="PhoneFontSizeExtraLarge">42.667</System:Double>
 59:         <!--54pt-->
 60:         <System:Double x:Key="PhoneFontSizeExtraExtraLarge">72</System:Double>
 61:  
 62:         <!-- TextBlock styles -->
 63:         <Style x:Key="PhoneTextApplicationNameStyle" TargetType="TextBlock">
 64:             <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
 65:             <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
 66:             <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
 67:             <Setter Property="Margin" Value="24"/>
 68:         </Style>
 69:  
 70:         <Style x:Key="PhoneTextTitleNameStyle" TargetType="TextBlock">
 71:             <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>
 72:             <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraExtraLarge}"/>
 73:             <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
 74:             <Setter Property="Margin" Value="20, 46, 20 ,0"/>
 75:         </Style>
 76:  
 77:         <Style x:Key="PhoneTextBodyTextStyle" TargetType="TextBlock">
 78:             <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
 79:             <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
 80:             <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
 81:             <Setter Property="LineHeight" Value="32"/>
 82:             <Setter Property="TextWrapping" Value="Wrap"/>
 83:             <Setter Property="Margin" Value="24, 11, 24, 24"/>
 84:         </Style>
 85:  
 86:         <Style x:Key="DoubleLineListTitleTextStyle" TargetType="TextBlock">
 87:             <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>
 88:             <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraLarge}"/>
 89:             <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
 90:             <Setter Property="Margin" Value="18, 4, 18, 0"/>
 91:         </Style>
 92:  
 93:         <Style x:Key="DoubleLineListSubTitleTextStyle" TargetType="TextBlock">
 94:             <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
 95:             <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
 96:             <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
 97:             <Setter Property="Margin" Value="18, -13, 18, 10"/>
 98:         </Style>
 99:  
100:         <!--ListBoxItemStyle-->
101:         <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
102:             <Setter Property="Template">
103:                 <Setter.Value>
104:                     <ControlTemplate TargetType="ListBoxItem">
105:                         <Grid>
106:                             <VisualStateManager.VisualStateGroups>
107:                                 <VisualStateGroup x:Name="CommonStates">
108:                                     <VisualState x:Name="Normal"/>
109:                                     <VisualState x:Name="MouseOver"/>
110:                                     <VisualState x:Name="Disabled"/>
111:                                 </VisualStateGroup>
112:                                 <VisualStateGroup x:Name="SelectionStates">
113:                                     <VisualState x:Name="Unselected"/>
114:                                     <VisualState x:Name="Selected"/>
115:                                 </VisualStateGroup>
116:                                 <VisualStateGroup x:Name="FocusStates">
117:                                     <VisualState x:Name="Focused"/>
118:                                     <VisualState x:Name="Unfocused"/>
119:                                 </VisualStateGroup>
120:                             </VisualStateManager.VisualStateGroups>
121:                             <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
122:                         </Grid>
123:                     </ControlTemplate>
124:                 </Setter.Value>
125:             </Setter>
126:         </Style>
127:  
128:         <!-- ListBox Style -->
129:         <Style x:Key="ListBoxStyle" TargetType="ListBox">
130:             <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
131:             <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
132:             <Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemStyle}"/>
133:         </Style>
134:     </Application.Resources>
135: