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

Question

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

我无法找到展示此内容的示例应用。

Answer 1

正如弗拉德的答案所提到的，你需要创造一种风格。

  

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

然后在混合的样式中，你需要修改普通，聚焦状态和FocusedDropDown状态以自动显示/隐藏焦点变化。

以下是使用可与您合作的混合的建议步骤，

最终代码位于此gist

中

1-添加SearchBox

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

添加空按钮以捕获搜索框上的初始焦点，选中此answer。

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

2-右键单击SearchBox编辑模板

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

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＆amp;聚焦下拉状态的5个步骤。

Answer 2

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