Статьи

EvenTiles от начала до конца — часть 3

Январь 28, 2019

Во второй части этой серии статей о том, как разработать приложение для Windows Phone с нуля, мы рассмотрели панель приложений и навигацию по страницам. Сегодня мы представим Silverlight Toolkit для Windows Phone , покажем, как его использовать внутри приложения, и добавим переходы страниц в приложение. Мы взлетим, где мы закончили в части 2 .

Набор инструментов Silverlight для Windows Phone представляет собой отдельную сборку, которую можно установить после загрузки. Он устанавливается в том же месте, где установлены Windows Phone SDK, что позволяет очень легко добавить ссылку на него, чтобы использовать функции, которые можно найти в наборе инструментов.

После установки инструментария вы можете добавить ссылку на него внутри приложения, щелкнув правой кнопкой мыши поле ссылок вашего проекта и выбрав инструментарий в появившемся диалоговом окне. После добавления инструментария к ссылкам вы увидите его в ссылках внутри Solution Explorer. Первое, что мы собираемся сделать, это добавить переходы страниц. Если вы посмотрите видео, вы увидите, что страницы нашего приложения в настоящее время просто отображаются без анимации. Однако переходы страниц во многих приложениях аналогичны переворачиванию страниц в книге. Это, например, случай с приложениями, которые уже установлены на вашем Windows Phone. Набор инструментов Silverlight содержит функциональные возможности, позволяющие очень легко включать подобные переходы страниц в ваши собственные приложения.Существует множество различных переходов на выбор, но мы будем использовать те же переходы при перелистывании страниц, которые вы, вероятно, уже знаете, когда активируете приложение на начальном экране.

Чтобы добавить переходы страниц в собственное приложение, важно изменить PhoneApplicationFrame для вашего приложения на TransitionFrame. Последний определяется в наборе инструментов Silverlight и позволяет осуществлять переходы страниц. RootFrame — это контейнер для хранения всех страниц, которые вы создадите внутри своего приложения. Вам придется искать метод InitializePhoneApplication в исходном файле App.xaml.cs, который Visual Studio создал для вас при создании проекта EvenTiles. Внутри этого метода вы можете видеть, что создается новый RootFrame типа PhoneApplicationFrame. Вам нужно будет изменить это на TransitionFrame, чтобы ваши переходы страниц работали.

Использование TransitionFrame

    // Do not add any additional code to this method
    private void InitializePhoneApplication()
    {
        if (phoneApplicationInitialized)
            return;
     
        // Create the frame but don't set it as RootVisual yet; this allows the splash
        // screen to remain active until the application is ready to render.
        // RootFrame = new PhoneApplicationFrame();
        RootFrame = new TransitionFrame();
        RootFrame.Navigated += CompleteInitializePhoneApplication;
     
        // Handle navigation failures
        RootFrame.NavigationFailed += RootFrame_NavigationFailed;
     
        // Ensure we don't initialize again
        phoneApplicationInitialized = true;
    }

Чтобы заставить переходы страниц работать, следующее, что вам нужно сделать, это добавить некоторый XAML, который определяет различные переходы страниц на каждую страницу, на которой вы хотите использовать переходы страниц. Вместо добавления отдельных частей XAML для каждой страницы вы также можете создать новый стиль, который вы используете на всех страницах, которые вы хотите использовать при переходах страниц. Именно такой подход мы используем в этом примере. Первое, что нужно сделать, это добавить следующий XAML в файл App.xaml:

Стиль перехода страницы

    <!–Application Resources–>
    <Application.Resources>
        <Style x:Key="DefaultPageWithTransitions"
                TargetType="phone:PhoneApplicationPage">
            <Setter Property="sltk:TransitionService.NavigationInTransition">
                <Setter.Value>
                    <sltk:NavigationInTransition>
                        <sltk:NavigationInTransition.Backward>
                            <sltk:TurnstileTransition Mode="BackwardIn" />
                        </sltk:NavigationInTransition.Backward>
                        <sltk:NavigationInTransition.Forward>
                            <sltk:TurnstileTransition Mode="ForwardIn" />
                        </sltk:NavigationInTransition.Forward>
                    </sltk:NavigationInTransition>
                </Setter.Value>
            </Setter>
            <Setter Property="sltk:TransitionService.NavigationOutTransition">
                <Setter.Value>
                    <sltk:NavigationOutTransition>
                        <sltk:NavigationOutTransition.Backward>
                            <sltk:TurnstileTransition Mode="BackwardOut" />
                        </sltk:NavigationOutTransition.Backward>
                        <sltk:NavigationOutTransition.Forward>
                            <sltk:TurnstileTransition Mode="ForwardOut" />
                        </sltk:NavigationOutTransition.Forward>
                    </sltk:NavigationOutTransition>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

Здесь мы определяем различные переходы, которые будут выполняться, когда вы переходите на страницы внутри приложения и обратно. Все переходы, которые вы видите в фрагменте кода, представляют собой TurnStileTransitions, которые обычно используются для переходов страниц в приложении Windows Phone. Набор инструментов Silverlight содержит и другие типы переходов.

После определения переходов и изменения RootFrame для возможности размещения переходов остается только назначить вновь созданный стиль перехода каждой отдельной странице. Это может быть сделано, например, с помощью Expression Blend. Когда вы сейчас запустите приложение, оно будет прекрасно сочетаться с приложениями, которые поставляются с вашим Windows Phone. Переход от страницы к странице внутри нашего приложения теперь идентичен навигации внутри, например, различных настроек Windows Phone. Конечно, нет необходимости использовать переходы страниц, но это делает ваше приложение лучше и профессиональнее.

Набор инструментов Silverlight для Windows Phone содержит гораздо больше полезных элементов, например, ряд интересных элементов пользовательского интерфейса. Чтобы увидеть уже один из них в действии, мы добавляем его на страницу настроек. На странице настроек нам позже понадобится переключатель, который может включить / отключить чтение данных о местоположении. Прямо сейчас мы просто вводим фиктивный переключатель и выбираем хороший элемент управления из набора инструментов Silverlight, ToggleSwitch. Этот элемент управления выглядит как выключатель света и имеет (как CheckBox ) два разных состояния: проверено и не проверено. Этот элемент управления выглядит очень хорошо внутри приложения Windows Phone, как вы можете видеть на следующем снимке экрана:

Внутри Visual Studio 2010 Express Edition вы можете увидеть страницу настроек в режиме конструктора. В нем вы также можете увидеть ToggleSwitch (в проверенном режиме). ToggleSwitch добавляется в сетку содержимого, заполняя столько места, сколько нужно в последнем ряду сетки. Как расположить элементы управления пользовательским интерфейсом в сетке и в других элементах управления контейнером, мы рассмотрим позже в этой серии статей о разработке приложений для Windows Phone.

В следующем видео вы можете увидеть все шаги, необходимые для добавления переходов в приложение Windows Phone, и узнать, как использовать функциональность из набора инструментов Silverlight в вашем собственном приложении.

LiveTiles скоро будет продлен. В следующем эпизоде ​​мы создадим пользовательский интерфейс SettingsPage и позаботимся о том, чтобы мы могли хранить данные, введенные на странице настроек. Обязательно посмотрите четвертую часть этой серии о разработке приложений для Windows Phone, которая скоро будет опубликована.

Источник: http://mstruys.com/2011/12/01/eventiles-from-start-to-finishpart-3/

 

35
Share: