Эта статья посвящена Дню № 15 из серии под названием « 31 день манго» и была написана приглашенным автором Дагом Мэром. С Дугом можно связаться в Твиттере по адресу @doug_mair или по адресу [email protected] .
Всякий раз, когда у вас есть операция, выполнение которой займет более пары секунд, рекомендуется сообщить пользователям, что ваше приложение все еще находится в процессе выполнения и не просто зациклено на себе.
Как вы должны сообщить своему пользователю, что происходит? Ну, вы можете показать им текстовое сообщение с фактическим количеством загруженных байтов или секунд, оставшихся для операции. Но часто пользователь не заинтересован в таком уровне детализации. Индикаторы прогресса — это отличный способ показать пользователям, что процесс прогрессирует, не перегружая их слишком большим количеством деталей. Индикатор выполнения может отображать эту информацию двумя различными способами: неопределенный и неопределенный режим.
Неопределенный режим
Режим неопределенности — это когда вы не можете определить, сколько времени займет операция. Например, если вы подключаетесь к серверу, вы не знаете, когда или будет ли операция завершена. Режим неопределенности Индикаторы хода выполнения показывают свое состояние, перемещая точки в анимации слева направо. Это отлично подходит для того, чтобы показать, что что-то происходит, но не дает пользователю информации о степени прогресса. Чтобы индикатор выполнения отображал неопределенный режим, установите флажок IsIndeterminate индикатора выполнения.
Определить режим
Если вы можете приблизительно определить, сколько времени требуется для завершения операции, используйте режим «Определить», чтобы сообщить пользователю процент, оставшийся в операции. Например, если вы загружаете файл, вы знаете общий размер файла и, когда загрузка продолжается, вы получаете обновления, которые сообщают вам количество загруженных байтов на данный момент.
Затем вы можете разделить общий размер файла на текущие загруженные байты, чтобы получить процент завершения. Этот код показывает пример того, как это можно сделать.
Если вы хотите показать своему пользователю процент выполнения операции, вы отображаете эту информацию в индикаторе выполнения. Чтобы отобразить режим « Определить », снимите флажок « IsIndeterminate» и установите значение, соответствующее корреляции в процентах.
С Windows Phone 7.5 Mango у вас есть 2 варианта для индикаторов прогресса:
1) Бар Прогресс — Элемент управления, вы можете разместить в любом месте в вашем Silverlight странице.
2) Индикатор хода выполнения — элемент управления, который находится в системном трее.
Давайте начнем с разговора о ProgressBar.
Индикатор
Бар Прогресс не в Visual Studio ToolBox по умолчанию, таким образом, вы должны добавить его в ToolBox в Visual Studio. Для этого щелкните правой кнопкой мыши на панели инструментов и выберите «Выбрать элементы…». Затем найдите «ProgressBar» и установите флажок.
После небольшой задержки вы увидите «ProgressBar» на панели инструментов
Теперь вы можете перетащить элемент управления ProgressBar на свои страницы Windows Phone в XAML. Это добавит код, подобный следующему, в ваш файл XAML.
<ProgressBar Name="progressBar1" Value="0"></ProgressBar>
Затем вы можете установить свойства элемента управления по мере необходимости:
Чтобы использовать этот новый ProgressBar в режиме определения, убедитесь, что флажок IsIndeterminate снят. Затем вы можете установить минимальные , максимальные и значения свойства элемента управления.
В коде, лежащем в основе вашей работы, вы изменяете свойство Value на желаемое значение между Minimum и Maximum . Индикатор выполнения гарантирует, что значение всегда находится между минимальным и максимальным значениями . Вы можете заполнить бар Прогресс просто за счет увеличения ценности на основе прогресса операции.
Индикатор прогресса
Еще один способ показать прогресс — использовать индикатор прогресса. Этот элемент управления появляется в SystemTray, как показано ниже. Вот изображения SystemTray и индикатора прогресса в SystemTray.
Чтобы использовать индикатор прогресса, вы должны добавить это с помощью оператора в ваш код.
using Microsoft.Phone.Shell;
Затем вы можете создать индикатор прогресса и добавить его в системный трей следующим образом.
ProgressIndicator progressIndicator = new ProgressIndicator() {
IsVisible = true, IsIndeterminate = false,
Text = "Downloading file ..." };
SystemTray.SetProgressIndicator(this, progressIndicator);
Обратите внимание, что свойство Value индикатора прогресса всегда должно быть в диапазоне от 0 до 1. Где, как и в случае ProgressBar , свойство Value должно быть в диапазоне от минимального до максимального .
Образец приложения
Day15-ProgressBar — приложение, которое тестирует оба этих элемента управления:
Вот краткий обзор кода:
Код XAML ниже показывает все элементы управления, которые мы будем использовать в нашем тесте. Есть ProgressBar для отображения хода выполнения, пара кнопок для запуска или остановки таймера для симуляции и ползунок, который будет использоваться для изменения значения ProgressIndicator.
<phone:PhoneApplicationPage
x:Class="Day15_ProgressBar.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="DAY 15" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="making progress" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="56" />
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBlock FontSize="36" Foreground="#FFDBE6FF" Name="textBlock3" Text="Progress Indicator" TextWrapping="Wrap" FontWeight="Bold" />
<TextBlock Name="textBlock1" Text="Drag the Slider to see the Progess In System Tray." FontSize="20" TextWrapping="Wrap" Foreground="#FFDBE6FF" />
<Slider Name="slider1" Width="Auto" Maximum="1" LargeChange="0.1" SmallChange="0.01" ValueChanged="slider1_ValueChanged" Margin="50,0" />
<TextBlock FontSize="36" Name="textBlock2" Text="Progress Bar" TextWrapping="Wrap" Foreground="#FFDBE6FF" Margin="0,50,0,0" FontWeight="Bold" />
<Button Name="StartButton" Content="Start the Timer" Click="Button_Click"></Button>
<Button Name ="StopButton" Content="Reset the Timer" Click="Button_Click_1"></Button>
<ProgressBar Name="progressBar1" Value="0" IsIndeterminate="False" Height="50" SmallChange=".5" LargeChange="10"></ProgressBar>
</StackPanel>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Вот код C # позади. Давайте пройдемся по тому, что код, чтобы увидеть, что он делает.
Для начала мы настроим операторы использования для элементов управления, которые мы собираемся использовать. Для ProgressIndicator мы должны использовать Microsoft.Windows.Shell . Затем внутри класса, который был создан для страницы, мы объявляем наши глобальные переменные. Создается ProgressIndicator, который мы позже поместим в SystemTray. Создается DispatcherTimer с именем timer, который будет использоваться для имитации детерминированной операции. В конструкторе мы помещаем недавно созданный progressIndicator в SystemTray и устанавливаем таймер для вызова метода timer_Tick каждые 5000 тиков.
using System;
using System.Windows;
using System.Windows.Threading;
using Microsoft.Phone.Shell;
namespace Day15_ProgressBar
{
public partial class MainPage
{
ProgressIndicator progressIndicator = new ProgressIndicator() { IsVisible = true, IsIndeterminate = false, Text = "Downloading file ..." };
DispatcherTimer timer = new DispatcherTimer();
// Constructor
public MainPage()
{
InitializeComponent();
SystemTray.SetProgressIndicator(this, progressIndicator);
timer = new DispatcherTimer {Interval = new TimeSpan(5000)};
timer.Tick += timer_Tick;
timer.Stop();
}
}
}
Когда срабатывает таймер и вызывается метод timer_Tick , мы добавляем значение в свойство Value объекта ProgressBar, чтобы создать впечатление, что операция выполняется.
Ниже этого метода находятся обработчики событий Button Click. Они запускают и останавливают таймер, чтобы мы могли смоделировать длительную операцию детерминированной операции. Нажатие кнопки «Пуск» сбрасывает значение свойства свойства progressBar1 на 0 и запускает таймер. Нажатие кнопки «Стоп» также сбрасывает значение свойства свойства progressBar1 на 0, но на этот раз мы останавливаем работу таймера.
Последний метод в классе — это обработчик события slider1_ValueChanged, который вызывается при перемещении ползунка. Мы будем использовать значение ползунка для позиционирования ProgressIndicator .
using System;
using System.Windows;
using System.Windows.Threading;
using Microsoft.Phone.Shell;
namespace Day15_ProgressBar
{
public partial class MainPage
{
// Constructor
ProgressIndicator progressIndicator = new ProgressIndicator() { IsVisible = true, IsIndeterminate = false, Text = "Downloading file ..." };
DispatcherTimer timer = new DispatcherTimer();
public MainPage()
{
InitializeComponent();
SystemTray.SetProgressIndicator(this, progressIndicator);
timer = new DispatcherTimer {Interval = new TimeSpan(5000)};
timer.Tick += timer_Tick;
timer.Stop();
}
void timer_Tick(object sender, EventArgs e)
{
progressBar1.Value += progressBar1.SmallChange;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
progressBar1.Value = 0;
timer.Start();
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
timer.Stop();
progressBar1.Value = 0;
}
private void slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
progressIndicator.Value = e.NewValue;
}
}
}
Резюме
Вот как вы используете Progress Bars в приложении Windows Phone Mango. В нескольких строках кода вы можете быстро добавить полнофункциональные индикаторы выполнения в любое приложение Silver Light для Windows Phone. Вы можете создать ProgressIndicator, который вы можете поместить в SystemTray , или вы можете создать ProgressBar, который вы можете отобразить в любом месте на странице приложений.
Индикаторы прогресса необходимы для приложений с длительными операциями. Это дает пользователю ощущение, что приложение работает для них и вернется к ним после завершения операции. Ваши пользователи будут чувствовать себя лучше, ожидая, когда им сообщат о прогрессе приложений.
Чтобы загрузить рабочую версию приложения, созданного в этой статье, нажмите кнопку «Загрузить код» ниже:
Завтра мы рассмотрим изолированное хранилище, которое позволяет вам просматривать и проверять данные, которые вы хранили в изолированном хранилище в вашем эмуляторе. Самидип Басу покажет вам, как и почему эта новая функция. Увидимся позже!
Источник: http://www.jeffblankenburg.com/2011/11/15/31-days-of-mango-day-15-the-progress-bar