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的解决方案绝对有效，但是如果你想在另一个L2 :> L内的Foreground上略有不同SymbolIcon怎么办？

这是我通常更灵活的方式。

首先让我们创建一个 base Button，其中包含所有图标的默认值。

Style

然后我们创建一个新图标<Style x:Key="Style-Icon-Base" TargetType="ContentControl">   <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">  <Viewbox Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> <SymbolIcon Symbol="Find" Foreground="{TemplateBinding Foreground}" /> </Viewbox> </ControlTemplate> </Setter.Value> </Setter> </Style>，要使用它，请查看以下Style：

Button

他们看起来像：

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

您无需创建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" />

<强>更新

BTW这可能是UWP平台中的 bug ，因为我尝试了以下代码，只有第一个Button在设计时呈现了图标，而没有在运行时呈现。 / p>

<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的{{1}}但我得到了相同的结果。并且还尝试使用Value。

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

3 个答案: