Question

我一直在查看blog，其中包含有关应用栏按钮样式的一些信息。下面是我编辑的一种风格。

<Page.Resources>
    <ResourceDictionary>
        <Style x:Key="TasksButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="FontSize" Value="9"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonEllipse" />
                                            <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Glyph" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <StackPanel Orientation="Vertical">
                                <Grid  Margin="0,14,0,5" >
                                    <Ellipse x:Name="ButtonEllipse" Height="40" Width="40" Fill="Transparent" HorizontalAlignment="Center"
                                          Stroke="#FF00A5E7" StrokeThickness="2" VerticalAlignment="Center"/>
                                    <Image x:Name="ButtonImage" Source="/Assets/Image1.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Grid>
                                <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center"
                                        FontFamily="Segoe UI" FontSize="12"/>
                            </StackPanel>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</Page.Resources>

我想多次使用这种风格虽然我不确定是否有办法改变这条线的图像来源

<Image Source="/Assets/Image1.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>

不仅仅是复制粘贴整个样式。

我想做这样的事情。（我已经尝试过，但似乎没有效果）

伪XAML

<Button x:Uid="appbarOne" Click="NavButton_Click" Tag="Client.Pages.one" Style="{StaticResource TasksButtonStyle ButtonImage.Source="Assets/Image1"}" Content="Tasks"/>
<Button x:Uid="appbarTwo" Click="NavButton_Click" Tag="Client.Pages.two" Style="{StaticResource TasksButtonStyle ButtonImage.Source="Assets/Image2"}" Content="Tasks"/>
<Button x:Uid="appbarThree" Click="NavButton_Click" Tag="Client.Pages.three" Style="{StaticResource TasksButtonStyle ButtonImage.Source="Assets/Image3"}" Content="Tasks"/>
<Button x:Uid="appbarFour" Click="NavButton_Click" Tag="Client.Pages.four" Style="{StaticResource TasksButtonStyle ButtonImage.Source="Assets/Image4"}" Content="Tasks"/>

有没有办法可以使用Style="{StaticResource TasksButtonStyle ButtonImage.Source="Assets/Image4"}"类似的东西来做到这一点？

Answer 1

用自定义样式替换<Image />。

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

从样式中删除下面的行，因为没有名为“Glyph”的元素

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

使用下面给出的定义添加名为AppBarButton的类。它有一个附加属性Image。我们将使用它来提供从按钮标签到按钮样式的图像源。

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));
}

现在你在XAML页面添加这样的按钮，

<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>

此处local指的是类AppBarButton的命名空间。对于我的情况，它是

<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">

因为我在AppBarButton命名空间中声明了App2类。

Answer 2

你可以使用把样式放在一个新的xaml文件中说globalstyles.xaml。然后在你的页面中引用xaml文件，如下所示，

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

一旦在页面中引用了样式，您就可以使用下面的样式

<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" />

希望这有帮助。

Answer 3

您可以定义将使用附加属性的模板。在代码中，为附加属性添加一个新类：

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));
}

然后，在您的模板中，对父对象执行TemplateBinding（为简洁起见，删除大部分样式）：

    <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>

查看Image中的 Grid 元素。它包含一个到父级的TemplateBinding。然后，当您在XAML中实例化按钮时，您只需要说明AssociatedObject.Image设置为：

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

Answer 4

如果你想要一个appbar按钮的外观，你应该看一下AppBarButton类，它可以为你提供一切。然后，您可以使用Icon属性来使用200多种内置图标样式之一，也可以通过PathIcon，SymbolIcon或BitmapIcon类提供自己的样式。

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

Windows商店应用程序 - XAML - 具有不同图像的一种风格

4 个答案: