AutoSuggestBox - 更改查询图标大小答案

【问题标题】：AutoSuggestBox - Change Query Icon SizeAutoSuggestBox - 更改查询图标大小
【发布时间】：2022-02-04 15:13:41
【问题描述】：

我正在尝试自定义一个自动建议框。我试过自定义模板：

AutoSuggestBox styles and templates

有了这个，我几乎可以更改我想要的所有内容，但我仍然不知道如何更改查询图标的字体大小。

更新：今天我注意到这个问题不再存在。我已经安装了 W10 Creators Update 和几个 VS2017 更新。

【问题讨论】：

标签： uwp uwp-xaml

【解决方案1】：

Segoe MDL2 Assets 的所有新图标的大小和位置都相同。详情请参考Segoe MDL2 icons。 SymbolIcon 没有字体大小相关属性。

但是您有以下两种解决方法来更改查询图标的大小。

其中一个使用CompositeTransform 作为SymbolIcon。代码如下：

<AutoSuggestBox>
  <AutoSuggestBox.QueryIcon>
      <SymbolIcon Symbol="Find" Foreground="Green"  >
          <SymbolIcon.RenderTransform>
              <CompositeTransform ScaleX="2" ScaleY="2"/>
          </SymbolIcon.RenderTransform>
        </SymbolIcon>
    </AutoSuggestBox.QueryIcon>
</AutoSuggestBox>

另一种更新模板的方法，就像您当前所做的那样。查询按钮的样式在AutoSuggestBox 样式和模板的QueryButtonStyle 中定义。你需要找到它并更新它。您可能需要在ButtonLayoutGrid 之外添加ViewBox，而不是更改一个属性，并设置ViewBox 的高度和宽度来控制图标的大小。代码如下：

 <Style x:Name="QueryButtonStyle" TargetType="Button">
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="Button">
                 <Viewbox Height="50" Width="50">
                 <Grid x:Name="ButtonLayoutGrid" BorderBrush="{ThemeResource TextControlButtonBorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{ThemeResource TextControlButtonBackground}">
                     <VisualStateManager.VisualStateGroups> 
                      ...      
                     </VisualStateManager.VisualStateGroups>
                     <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></Viewbox>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

【讨论】：

【解决方案2】：

你可以设置AutoSuggestBoxIconFontSize。

<AutoSuggestBox QueryIcon="Find">
    <AutoSuggestBox.Resources>
        <x:Double x:Key="AutoSuggestBoxIconFontSize">24</x:Double>
    </AutoSuggestBox.Resources>
</AutoSuggestBox>

【讨论】：