|
In this article I will talk about how to set colors of Application Bar in Windows Phone. This article will be simple but useful for the developers who wants to make colorful Application in Windows Phone.
Let's write code.
Step 1: Create Silverlight for Windows Phone project.
Step 2: Uncomment the phone:PhoneApplicationPage.ApplicationBar section of MainPage.xaml.
Step 3: Add Opacity, ForegroundColor and BackgroundColor to ApplicationBar like below.
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity="0.25" ForegroundColor="Red" BackgroundColor=" Yellow">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
Step 4: Now, run the application and you will see ApplicationBar with colors.
One can change the color shade by changing opacity as shown below.
 
Step 5: ApplicationBar color can be set based on the theme background and accent color by setting ForegroundColor and BackgroundColor with static resource like below.
You can set opacity to provide different shade.
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" ForegroundCo="{StaticResource PhoneBackgroundColor}" BackgroundColor="{StaticResource PhoneAccentColor}">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
Step 6: Now run the application you will get ApplicationBar like shown below.
Theme Background is set to black and accent color is teal.
Step 7: Now change the Background theme to light and run the application.
This ends the article of changing color of ApplicationBar in Windows Phone.
|