CODEWITHSUNDEEP
c#xamlwindows-8windows-runtime
Raj Kumar
Raj Kumar

Reputation: 736

Custom Bottom app bars in metro app using C# and XAML

Apologize if I'm wrong, I'm developing metro app using C# and XAML, As we all know we can create Bottom app bars in metro app using below code

<Button x:Uid="Uploadall" x:Name="BTNUpload" AutomationProperties.Name="upload all" Style="{StaticResource UploadAppBarButtonStyle}" />

This will create an "upload all" button in bottom app bar, my question is how to create a custom app bar with my own image on it, By this link i came to know that we can customize it, Can anyone explains me how to customize app button,Please help me Thanks In-advance

Upvotes: 3

Views: 4115

Answers (3)

Raj Kumar
Raj Kumar

Reputation: 736

I think, I found answer for my question that we can add a PNG image to an App button, check the code below

<Button x:Name="BTNPintoStart" AutomationProperties.Name = "Pin to start" Style="{StaticResource AppBarButtonStyle}" FontSize="15" Click="BTNPintoStart_Click">
<Button.Content>
<Image Source="../../Resources/Assets/AppBar/appbar_pin.png"/>
</Button.Content>
</Button>

If you want to set name from resource you can do that from C# by

AutomationProperties.SetName(BTNPintoStart,resourceloader.GetString("KeyName/Content"));

If it works for you,Please mark as answer, where i can useful to others.

Upvotes: 7

Nigel Sampson
Nigel Sampson

Reputation: 10609

The default AppBarButtonStyle doesn't use images but font gylphs (notice the Content property in the style). This question How to find icons for app bar in metro windows 8? has some sources for those icons.

Creating Application Bar Buttons with images is actually quite a pain due to for some unknown reason the developers of this xaml stack didn't include Opactiy Mask, so you'll need multiple images. I'd recommend sticking with glyphs.

Upvotes: 0

Filip Skakun
Filip Skakun

Reputation: 31724

There are multiple ways to customize a button. It all depends on how you want to customize it. In an earlier question I answered how to do that so that you can represent each button state with your own image. You can change multiple properties of a button to customize it, you can customize it by changing its style, template or content.

Upvotes: 2

Related Questions