AutoSuggestBox - 更改查询图标大小

Question

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

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

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

Answer 1

Segoe MDL2 Assets 的所有新图标的大小和位置都相同。详情请参考Segoe MDL2 icons. And there is no font size relative property for 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>

Answer 2

你可以设置AutoSuggestBoxIconFontSize.

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

AutoSuggestBox - 更改查询图标大小

AutoSuggestBox - Change Query Icon Size

uwp

uwp-xaml