Windows store app - XAML - One style with different images

Question 1

Replace <Image /> in custom style with this.

<Image x:Name="ButtonImage" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="None"
       Source="{Binding Path=(local:AppBarButton.Image),RelativeSource={RelativeSource TemplatedParent}}"/>

Remove below line from style as there is no element named "Glyph"

<ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Glyph" />

Add a class named AppBarButton with below given definition. It has one attached property Image. We will use that to provide image source from button tag to button style.

public class AppBarButton
{
    public static string GetImage(DependencyObject obj)
    {
        return (string)obj.GetValue(ImageProperty);
    }

    public static void SetImage(DependencyObject obj, string value)
    {
        obj.SetValue(ImageProperty, value);
    }

    public static readonly DependencyProperty ImageProperty =
        DependencyProperty.RegisterAttached("Image", typeof(string), typeof(AppBarButton), new PropertyMetadata(string.Empty));
}

Now in you XAML page add buttons like this,

<StackPanel>
    <Button Style="{StaticResource TasksButtonStyle}" local:AppBarButton.Image="ms-appx:///Assets/Screenshot_2.png" />
    <Button Style="{StaticResource TasksButtonStyle}" local:AppBarButton.Image="ms-appx:///Assets/Screenshot_3.png" />
    <Button Style="{StaticResource TasksButtonStyle}" local:AppBarButton.Image="ms-appx:///Assets/Screenshot_4.png" />
</StackPanel>

Here local refers to namespace of class AppBarButton. For my case it's

<Page
    x:Class="App2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

Because I declared AppBarButton class in App2 namespace.

Question 2

you can use put the styles in a new xaml file say globalstyles.xaml. then refer the xaml file in you page as below,

 <UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary  Source="../Styles.xaml"></ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>

once the styles have been referred in the Page you can use the style as below

<Button Name="cancel" Content="cancel" Style="{StaticResource CancelButtonStyle}" 
                   HorizontalAlignment="Right" Margin="5,45,5,7" />

<Button Name="Submit" Content="Submit" Style="{StaticResource SubmitButtonStyle}" 
                   HorizontalAlignment="Right" Margin="5,45,5,7" />

Hope this helps.

Question 3

You can define a template that will use an attached property. In code, add a new class for the attached property:

public class AssociatedObject
{
    public static ImageSource GetImage(DependencyObject obj)
    {
        return (ImageSource)obj.GetValue(ImageProperty);
    }

    public static void SetImage(DependencyObject obj, ImageSource value)
    {
        obj.SetValue(ImageProperty, value);
    }

    // Using a DependencyProperty as the backing store for Image.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ImageProperty =
        DependencyProperty.RegisterAttached("Image", typeof(ImageSource), typeof(AssociatedObject), new PropertyMetadata(null));
}

Then, in your template, do a TemplateBinding to the parent object (removing most of the style for brevity):

    <Style x:Key="ButtonStyle1" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
  // REMOVED A BUNCH HERE
                         <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3">
                            <Grid>
  // YOUR IMAGE IS HERE
                                <Image Source="{TemplateBinding local:AssociatedObject.Image}" Stretch="None"/>
                                <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                           </Grid>
                        </Border>
               </ControlTemplate>
 // REMOVED A BUNCH HERE
             </Setter.Value>
        </Setter>
    </Style>

Look at the Image element in the Grid. It contains a TemplateBinding to the parent. Then, when you instantiate your button in XAML, you simply need to say what the AssociatedObject.Image is set to:

    <Button Style="{StaticResource ButtonStyle1}" local:AssociatedObject.Image="/assets/Logo.scale-100.png"></Button>

Question 4

If you want the look of an appbar button, you should look at the AppBarButton class instead which has everything for you. You can then use the Icon property to use one of the 200+ built-in icon styles or provide your own through the PathIcon, SymbolIcon or BitmapIcon classes as well.

See: http://timheuer.com/blog/archive/2013/10/29/use-new-appbarbutton-in-windows-8-1-commandbar.aspx