Проектирование приложения с использованием XAML: изменение размера
TOC
Свернуть оглавление
Развернуть оглавление

Проектирование приложения на XAML: изменение размера

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Проектируйте приложение на C# и XAML таким образом, чтобы оно правильно реагировало на изменение размера.

Привлекательной особенностью Windows 8 является возможность одновременно отображать на экране несколько приложений. Перетаскивая от верхнего края экрана, пользователь может переместить приложение влево или вправо и освободить место для нового приложения. Приложение должно быть готово к такой ситуации и в случае необходимости менять объекты, отображаемые на экране, или порядок их отображения.

Экран, где показано одно приложение и место для открытия второго приложения.

Если для размещения элементов управления используется сетка XAML, то приложение уже может выглядеть приемлемо, но, возможно, понадобится что-то доработать. Лучше всего отвечать на те же сообщения и использовать диспетчер визуальных состояний, как описано в разделе Проектирование приложения на XAML: ориентация. Например, мы можем создать новое визуальное состояние с именем Narrow и скрыть в нем несколько элементов управления, чтобы освободить место для других. Вот как это можно сделать.

Обнаружение изменения размера экрана

Сначала добавим обработчик в CS-страницу кода программной части (если он еще не добавлен) для работы с изменением ориентации:


        public MyPage()
        {
            this.InitializeComponent();
           
            // Add the handler
            Window.Current.SizeChanged += Current_SizeChanged;
         }
        
        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            double width = e.Size.Width;

            // Obtain the orientation - Landscape or Portait
            string CurrentViewState = ApplicationView.GetForCurrentView().Orientation.ToString();

            // Test to see if the app is fullscreen or not
            if (ApplicationView.GetForCurrentView().IsFullScreen)
            {
                // It is, so handle Landscape or Portrait visual states as before
                VisualStateManager.GoToState(this, CurrentViewState, false);
                return;
            }

            // At this point, the screen is split, so decide if it's narrow enough
            // to require a new visual state

            if (width < 800)
                VisualStateManager.GoToState(this, "Narrow", false);
        }



Мы используем второе свойство в этом обработчике (ApplicationView.GetForCurrentView().IsFullScreen), которое сообщает, находится ли приложение в полноэкранном режиме. Если режим не полноэкранный, то экран должен быть разделен, и мы можем принять решение об активации нового визуального состояния, если ширина станет слишком маленькой.

Поддержка нового визуального состояния

Новое визуальное состояние определяется так же, как прежде определялись состояния для альбомной и книжной ориентации. В этом примере мы скроем один из столбцов с данными, чтобы освободить пространство.


       <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ApplicationViewStates">

                <VisualState x:Name="Portrait"/>
                <VisualState x:Name="Landscape"/>
                <VisualState x:Name="Narrow">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
          Storyboard.TargetName="TheSuperfluousColumn"
          Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
  

Так выглядит приложение до разделения экрана:

Три столбца обычного размера

Так приложение выглядит, когда пользователь разделяет экран на две части, без дополнительной поддержки для узкого экрана. Заметьте, что содержимое сжато, чтобы уместиться в меньшее пространство.

Три сжатых столбца

Теперь отображается только самая важная информация, и сжатие не так заметно.

Один столбец без сжатия

Минимальная ширина

В приложении можно задать значение минимальной ширины. По умолчанию оно равно 500. Если представление имеет размер меньше минимального для приложения, то приложение не отображается (фактически оно говорит "я отказываюсь работать в таких условиях!") и приостанавливается. Вы можете изменить минимальное значение на 320, что позволит приложению оставаться в узком столбце у края экрана. Это может быть удобно в качестве постоянно доступного инструмента для пользователей.

Важно  Изменение ширины приложения запускается пользователем. Это нельзя сделать в программном коде.
 

Связанные разделы

Проектирование приложения на XAML: сетка
Проектирование приложения на XAML: ориентация
Гибкое оформление 101 для приложений универсальной платформы Windows (UWP)
Краткое руководство: разработка приложений для различных размеров окон
Руководство по изменению размера окон для высоких и узких макетов
Краткое руководство: определение макетов приложений (приложения Магазина Windows с использованием JavaScript и HTML)

 

 

Показ:
© 2016 Microsoft