像Windows 10计算器应用程序

Question

Windows 10计算器应用程序中ComboBox的屏幕截图

在UWP中，Buttons有一个内置样式，使其像链接TextBlockButtonStyle。

我想像上面发布的那样在Windows 10 Calculator应用中复制ComboBox的样式。

我尝试编辑ComboBox的默认样式，但我不确定这是否是＆＃34; Selected Text＆＃34;出现在风格中：

<ContentPresenter x:Name="ContentPresenter"
              Grid.Row="1"
              Margin="{TemplateBinding Padding}"
              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
              VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
    <TextBlock x:Name="PlaceholderTextBlock"
           Text="{TemplateBinding PlaceholderText}"
           Foreground="{ThemeResource ComboBoxPlaceHolderForeground}" />
</ContentPresenter>

如果这是编辑的正确部分，我将如何开始？谢谢！

Answer 1

您需要重新模板控件以使其正常工作。

可以使用ComboBox

删除实际BorderBrush="{x:Null}"上的边框

但实际的Pressed和Focused视觉状态仍会将BorderBrush和Background添加到控件中。所以我们需要删除那些视觉状态。

从ComboBox styles and templates复制样式。

给它一个键x:Key="ComboBoxStyle"

完成后，删除

中的内容

<VisualState x:Name="Pressed" />
<VisualState x:Name="Focused" />

然后像下面一样使用它。

<ComboBox HorizontalAlignment="Center" VerticalAlignment="Center" 
          BorderBrush="{x:Null}" SelectedIndex="0" 
          Style="{StaticResource ComboBoxStyle}" />

结束输出

这与计算器应用程序不完全相同，但你应该知道。

使用样式，您应该能够获得所需的输出。