2013-07-13 2 views
2

Есть ли у кого-нибудь пример того, как создать новый SearchBox (http://msdn.microsoft.com/library/windows/apps/dn252771), чтобы отобразить только глиф? Некоторые из приложений хранилища Windows 8.1 показывают поисковый запрос только с глифом поиска, и когда вы нажимаете глифа поиска, появляется текстовое поле.Стайлинг новой Windows 8.1 searchbox для использования только глифа

Я не смог найти пример приложения, показывающего это.

+0

Это должен быть индивидуальный стиль. Кажется, я не могу найти, где они разместили шаблоны стиля по умолчанию для SearchBox (скорее всего, они еще этого не сделали, поскольку само определение класса по-прежнему «предварительное»). У меня пока нет Windows 8.1, поэтому я также не могу получить стиль по умолчанию. Если вы не возражаете пытаться найти его, я бы хотел взглянуть.Я не уверен на 100%, если это будет работать, но если вы щелкните правой кнопкой мыши SearchBox в дизайнере и спуститесь к «Редактировать шаблоны», вы сможете найти стиль по умолчанию и опубликовать его здесь. –

+0

Привет, Это стиль: https://docs.google.com/file/d/0BwaBDWc05M-UeGpuakVRbDBUTEk/edit?usp=sharing – kimtiede

+0

Вы нашли хорошее решение? –

ответ

1

Добавьте SearchBox на свою страницу, затем щелкните его правой кнопкой мыши в дизайнере и выберите «Редактировать шаблон». Создайте копию и настройте ее так, как хотите.

2

Как ответ Влада metioned Вам нужно создать стиль.

Добавьте SearchBox на свою страницу, затем щелкните его правой кнопкой мыши в дизайнере и выберите Изменить шаблон.

После этого внутри стиля из смеси вам нужно изменить нормальное состояние Focused и FocusedDropDown, чтобы автоматически показывать/скрывать изменение фокуса.

Вот предлагаемые шаги, используя смесь, которая будет работать с вами,

Окончательный код находится здесь, в этом gist

1- Add SearchBox

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

также добавить пустую кнопку для захвата исходный фокус на поле поиска, проверьте это answer.

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

2- правая кнопка мыши на SearchBox для редактирования шаблона

Template

-3- Внутри шаблона, ширину смены SearchBoxGrid до 32 только, чтобы показать глиф и установить горизонтальное выравнивание направо.

enter image description here

4- Выберите вкладку состояния, в смеси затем выберите сфокусированное состояние.

enter image description here

5- Набор Ширина SearchBoxGrid сетки для автоматического снова и установить горизонтальное выравнивание, чтобы растянуть.

enter image description here

или добавить эти строки вручную в сфокусированном состоянии

<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 шагов в сфокусированных ниспадающем состоянии.

Смежные вопросы