类似于 Windows 10 计算器应用程序中的组合框答案

【问题标题】：ComboBox like in Windows 10 Calculator app类似于 Windows 10 计算器应用程序中的组合框
【发布时间】：2017-06-09 15:52:21
【问题描述】：

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

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

我想在 Windows 10 计算器应用程序中复制 ComboBox 的样式，就像我在上面发布的那样。

我尝试编辑 ComboBox 的默认样式，但我不确定这是否是样式中出现“选定文本”的部分：

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

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

【问题讨论】：

您有问题吗？就目前而言，您还没有问过一个会成为 Stack Overflow 主题的人。
发布一套完整的内容，以便人们可以下载或重新创建您正在寻找的内容。您要求的是让其他人为您做这件事，而不是您尝试过的事情。上面的示例不完整。

标签： c# combobox uwp

【解决方案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}" />

结束输出

这与计算器应用程序中的不完全一样，但您应该有所了解。

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

【讨论】：