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

Question

我正在尝试创建一个按钮 Style我可以在整个 UWP 应用程序中用作“查找”按钮。但是，该图标仅出现在屏幕上的第一个按钮上。我试过 this solution using templates ，但它对我不起作用。谢谢您的帮助。

代码:

<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

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

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

首先让我们创建一个基础 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 ，要使用它，看看下面的 Button s:

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

它们看起来像: