xaml - 为新的 Windows 8.1 搜索框设置样式以仅使用字形

Question

有没有人有关于如何设置新的 SearchBox ( http://msdn.microsoft.com/library/windows/apps/dn252771 ) 以仅显示字形的示例？某些 Windows 8.1 商店应用程序仅显示带有搜索字形的搜索框，当您按下搜索字形时，会出现文本框。

我无法找到显示此内容的示例应用程序。

Answer 1

正如弗拉德的回答所提到的，您需要创建一种样式。

将 SearchBox 添加到您的页面，然后在设计器中右键单击它并选择编辑模板。

然后在混合样式中，您需要修改正常、焦点状态和 FocusedDropDown 状态以在焦点更改时自动显示/隐藏。

以下是使用混合的建议步骤，适用于您，

最终代码在此要点中

1- 添加搜索框

<SearchBox HorizontalAlignment="Right" VerticalAlignment="Top" Width="250" Margin="0,15,0,0"/>

还添加空按钮以捕获搜索框的初始焦点，检查此答案。

<Button Width="0" Height="0"/>

2-右键单击搜索框以编辑模板

3- 在模板内，将 SearchBoxGrid 的宽度更改为 32，仅显示字形并将水平对齐设置为右。

4-在混合中选择状态选项卡，然后选择聚焦状态。

5- 再次将 SearchBoxGrid 网格的宽度设置为自动并将水平对齐设置为拉伸。

或在焦点状态下手动添加这些行

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="SearchBoxGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <x:Double>NaN</x:Double>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="SearchBoxGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <HorizontalAlignment>Stretch</HorizontalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>

6- 在焦点下拉状态下执行相同的 4 和 5 步。

Answer 2

将 SearchBox 添加到您的页面，然后在设计器中右键单击它并选择编辑模板。创建一个副本并根据需要设置其样式。