如何在 UWP 中重用资源中的图标？在 WPF 中，我会使用 x:Shared=false

Question

我正在尝试创建一个按钮 Style，我可以在整个 UWP 应用程序中将其用作 "Lookup" 按钮。但是，该图标仅出现在屏幕上的第一个按钮上。我试过，但它对我不起作用。感谢您的帮助。

代码：

<Page.Resources>
    <ControlTemplate x:Key="FindSymbolTemplate">
        <SymbolIcon Symbol="Find" Foreground="White" />
    </ControlTemplate>
    <Style TargetType="Button" x:Key="LookupButton">
        <Setter Property="Content">
            <Setter.Value>
                <ContentControl Template="{StaticResource FindSymbolTemplate}" />
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
....
<Button x:Name="tourNumLookup"
       Style="{StaticResource LookupButton}"
       Grid.Column="1"
       Margin="10,0"
       VerticalAlignment="Center" />
....
<Button x:Name="customerIdLookup"
       Style="{StaticResource LookupButton}"
       VerticalAlignment="Center"
       Grid.Column="1"
       Grid.Row="1"
       Margin="10,0" />

UI中的两个按钮。只有第一个有 SymbolIcon 内容。

Answer 1

您无需创建 ControlTemplate 即可重复使用该图标。您可以简单地将此 SymbolIcon 放入资源字典并用作 StaticResource 按钮的 Content.

<Page.Resources>
    <SymbolIcon x:Key="FindSymbol" Symbol="Find" Foreground="White" />
</Page.Resources>

<Button x:Name="tourNumLookup"
        Content="{StaticResource FindSymbol}"
        Grid.Column="1"
        Margin="10,0"
        VerticalAlignment="Center" />
<Button x:Name="customerIdLookup"
        Content="{StaticResource FindSymbol}"
        VerticalAlignment="Center"
        Grid.Column="1"
        Grid.Row="1"
        Margin="10,0" />

更新

顺便说一句，这可能是 UWP 平台中的一个 bug，因为我尝试了以下代码，只有第一个 Button 在设计时渲染了图标 [=运行时的 32=]。

<Page.Resources>
    <SymbolIcon x:Key="FindSymbol" Symbol="Find" Foreground="White" />
    <Style TargetType="Button" x:Key="LookupButton">
        <Setter Property="Content" Value="{StaticResource FindSymbol}"/>
    </Style>
</Page.Resources>

<StackPanel>
    <Button x:Name="tourNumLookup"
            Style="{StaticResource LookupButton}"
            Margin="10,0"
            VerticalAlignment="Center" />
    <Button x:Name="customerIdLookup"
            Style="{StaticResource LookupButton}"
            VerticalAlignment="Center"
            Margin="10,0" />
</StackPanel>

我试图直接分配 Setter 的 Value 但我得到了相同的结果。并且还尝试了 FontIcon.

Answer 2

通常 UI 元素可以使用一次（或者说不同 - 只有一个父元素）- 这可能就是为什么它只适用于您的情况下的第一个按钮。一种解决方案可能是定义 DataTemplate 并将其用作 ContentTemplate，因此每个按钮都会创建自己的图标：

<Page.Resources>
    <DataTemplate x:Key="FindTemplate">
        <SymbolIcon Symbol="Find" Foreground="White" />
    </DataTemplate>
</Page.Resources>
...
<Button x:Name="tourNumLookup" ContentTemplate="{StaticResource FindTemplate}"
        Grid.Column="1" Margin="10,0" VerticalAlignment="Center" />
<Button x:Name="customerIdLookup" ContentTemplate="{StaticResource FindTemplate}"
        VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="10,0" />

Answer 3

@Romasz 的解决方案绝对有效，但是如果您想要在另一个 Button 中的 SymbolIcon 上稍微不同的 Foreground 怎么办？

这是我通常采用的一种可能更灵活的方式。

首先让我们创建一个 base Style 来保存所有图标的一些默认值。

<Style x:Key="Style-Icon-Base"
       TargetType="ContentControl">
    <!-- If you don't specify the Foreground, it will use its ancestor's -->
    <!--<Setter Property="Foreground"
            Value="White" />-->
    <Setter Property="HorizontalContentAlignment"
            Value="Center" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="Width"
            Value="20" />
    <Setter Property="Height"
            Value="20" />
    <Setter Property="Padding"
            Value="0" />
</Style>

然后我们创建一个新图标Style，它继承了上面的图标。请注意，在 ControlTemplate 中，我使用 TemplateBinding 使属性值动态。 TemplateBinding 在 DataTemplate 中不可用。

<Style x:Key="Style-Icon-Find"
       BasedOn="{StaticResource Style-Icon-Base}"
       TargetType="ContentControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ContentControl">
                <!-- 
                    'cause you cannot change the size of the SymbolIcon, we insert a Viewbox here, 
                    otherwise you don't need it. 
                -->
                <Viewbox Margin="{TemplateBinding Padding}"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                    <SymbolIcon Symbol="Find"
                                Foreground="{TemplateBinding Foreground}" />
                </Viewbox>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这样你就创建了一个高度可重用的图标 Style，要使用它，请看下面的 Buttons:

<StackPanel Orientation="Horizontal"
            HorizontalAlignment="Center">
    <Button Margin="4"
            Padding="8"
            BorderBrush="LightBlue">
        <ContentControl Width="36"
                        Height="36"
                        Foreground="DarkCyan"
                        Style="{StaticResource Style-Icon-Find}" />
    </Button>

    <!-- Note how I defined the Foreground at the Button level and it flows down to the icon -->
    <Button Foreground="DarkGoldenrod"
            Margin="4">
        <StackPanel Orientation="Horizontal">
            <ContentControl Style="{StaticResource Style-Icon-Find}"
                            Width="16"
                            Height="16" />
            <TextBlock Text="Search"
                       VerticalAlignment="Center"
                       Margin="8,0,0,0" />
        </StackPanel>
    </Button>

    <Button Margin="4"
            Padding="4">
        <ContentControl Style="{StaticResource Style-Icon-Find}" />
    </Button>
</StackPanel>

它们看起来像：

如何在 UWP 中重用资源中的图标？在 WPF 中，我会使用 x:Shared=false

How Can I Reuse an Icon in Resources in UWP? In WPF, I'd use x:Shared=false

xaml

uwp

uwp-xaml