Как создать контрольную точку разработки в Windows XAML?

Question

Отзывчивое Руководство по проектированию для Windows 10 приложения говорит о реагирующих методах проектирования и, в частности, об использовании дизайна контрольных точек для определенных классов размера:

Дизайна точек останова для конкретных размеров классов

Количества целевых устройств и экрана размеры в среде Windows 10 слишком велики, чтобы беспокоиться об оптимизации вашего пользовательского интерфейса для каждого из них. Вместо этого мы рекомендовали проектирование для нескольких ключевых ширин (также называемых «точек останова»): 320, 720 и 1024 пикселей.

См: https://msdn.microsoft.com/en-us/library/windows/apps/dn958435.aspx#sizeclasses

В статье описывается общая концепция отзывчивых и проектных точек останова. Я уже знаком с этими понятиями из запросов HTML и CSS. Но я не знаю, как это сделать в XAML?

Поиск в Windows 10 и контрольных точек разработки не дает информации, которую я хочу, можете ли вы указать мне в правильном направлении?

Answer 1

Дизайн контрольных точек для конкретных классов размеров - это всего лишь концепция, рекомендующая дать вам ключевые размеры, о которых можно беспокоиться. Как упоминал Джастин, один очень простой способ добиться этого - использовать триггеры визуального состояния, чтобы инициировать изменения в пользовательском интерфейсе на основе минимальной ширины окна. Существует триггер состояния: AdaptiveTrigger, который позволяет вам делать это из коробки. Есть и другие available open source state triggers, но AdaptiveTrigger - это тот, который вам нужно реагировать на разные ширины или точки останова в XAML. Вот очень простой пример:

<VisualStateManager.VisualStateGroups> 
    <VisualStateGroup x:Name="AdaptiveSizesVisualStateGroup"> 
     <VisualState x:Name="Large"> 
      <!-- VisualState to be triggered when window width is >=1024 effective pixels --> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="1024" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="MySplitView.IsPaneOpen" Value="True" /> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState x:Name="Medium"> 
      <!-- VisualState to be triggered when window width is >=720 and < 1024 effective pixels --> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="720" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="MySplitView.IsPaneOpen" Value="False" /> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState x:Name="Small"> 
      <!-- VisualState to be triggered when window width is >=320 and < 720 effective pixels --> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="320" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="MySplitView.IsPaneOpen" Value="False" /> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState x:Name="Minimum"> 
      <!-- VisualState to be triggered when window width is >=0 and < 320 effective pixels --> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="0" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="MySplitView.IsPaneOpen" Value="False" /> 
      </VisualState.Setters> 
     </VisualState> 
    </VisualStateGroup> 
</VisualStateManager.VisualStateGroups> 

Вы можете видеть, что я использовал другое визуальное состояние для различной ширины окна. AdaptiveTrigger - это объект, который заботится о том, чтобы заметить, что размер окна изменился и вызвал конкретное визуальное состояние внутри визуальной группы состояний. Как только визуальное состояние активно, сеттеры используются для установки различных значений для разных целевых объектов в XAML. В моем примере кода я сохраняю панель SplitView закрытой для всех ширины, за исключением случаев, когда> = 1024 эффективных пикселей.

Теперь, несмотря на то, что AdaptiveTriggers просты в использовании, очень легко загромождать ваш код XAML множеством сеттеров в каждом визуальном состоянии, и может быть сложно поддерживать этот код. Просто посмотрите, сколько XAML я написал для фиктивного образца! Кроме того, возможно, что вам понадобятся существенные различия в пользовательском интерфейсе между телефоном и рабочим столом, поэтому ваш лучший выбор может закончиться тем, что вы пишете specific XAML Views tailored for specific device families, который также может иметь AdaptiveTriggers внутри ...

Answer 2

Чтобы добавить отзыв, здесь это быстрое введение в новые адаптивные триггеры. Если вы используете их впервые, эта ссылка может помочь, так как этот пример начинается полностью с нуля. http://jamesqquick.com/windows-10-adaptive-triggers-intro/