Главная » Silverlight » Установка размеров страницы

0

До сих пор мы подробно рассматривали разные типы контейнеров, предоставляе­мых инфраструктурой Silverlight, и способы их использования для размещения элемен­тов. Однако каждое уравнение состоит из двух частей. Учитывать нужно как размеры контейнеров, так и размеры страницы Silverlight, на которой они размещены.

Верхнеуровневый контейнер каждой страницы Silverlight — это пользовательский класс, производный от класса UserControl. Класс UserControl добавляет в базовую структуру элементов Silverlight единственное свойство Content (Содержимое). Ему нуж­но присвоить один элемент, который становится содержимым объекта UserControl.

Объект UserControl не содержит никаких специальных средств. Это всего лишь удобный способ группирования элементов. Однако способ установки размеров элемента UserControl влияет на внешний вид всего пользовательского интерфейса, поэтому его нужно рассмотреть подробнее.

В предыдущих разделах вы узнали о средствах управления размерами элементов. С их помощью можно выбрать способ размещения содержимого: на основе размеров содержимого, на основе доступного пространства или путем жесткого кодирования ко­ординат. Аналогичные средства применяются и для установки размеров страницы.

•       Фиксированные размеры. Установив свойства Width (Ширина) и Height (Высо­та) элемента UserControl, можно задать точные размеры страницы. Если разме­ры элементов управления, размещенных на странице, больше значений width и Height, они будут отсечены. При фиксированных размерах окна свойствам Hori­zontalAlignment и VerticalAlignment элемента UserControl обычно присваива­ют значения Center, чтобы страница находилась посредине окна браузера, а не примыкала к левому верхнему углу.

•       Размеры окна браузера. Если удалить свойства Width и Height, страница зай­мет все пространство, выделенное для нее в области содержимого Silverlight. По умолчанию программа Visual Studio создает входную страницу с такими разме­рами, что область содержимого Silverlight занимает все окно браузера. При ис­пользовании этого метода можно создавать элементы, выходящие за пределы об­ласти содержимого, однако тогда пользователю придется вручную увеличить раз­меры окна браузера, чтобы увидеть все содержимое. Иногда при использовании этого метода нужно оставить пустое пространство между страницей и краем окна браузера. Это можно сделать с помощью свойства Margin элемента UserControl.

•       Ограничение размеров. Вместо свойств Width и Height, можно применить свой­ства MaxWidth, MaxHeight, MinWidth и MinHeight. Тогда размеры элемента User- Control будут автоматически устанавливаться в пределах заданного диапазона таким образом, чтобы он поместился в окне браузера. При перетаскивании гра­ницы окна браузера размеры объекта UserControl будут изменяться до опреде- ленного момента времени, пока окно не станет слишком большим или малень­ким. После этого размеры объекта UserControl перестанут изменяться, благода­ря чему содержимое всегда остается разборчивым.

•       Неограниченные размеры. Иногда желательно позволить области содержимого Silverlight иметь размеры больше окна браузера. В этом случае браузер выведет на экран полосы прокрутки, как для обычной страницы HTML. Для вывода полос прокрутки нужно удалить свойства Width и Height и отредактировать входную страницу TestPage.html. На входной странице удалите атрибуты width="100%" и Height="100%" элемента <object>. Тогда области содержимого будет позволено увеличиваться до тех пор, пока в ней не поместятся все элементы управления.

Примечание. Не забывайте, что инструменты разработки Visual Studio и Expression Blend могут добавить в поль­зовательский элемент управления атрибуты DesignWidth и DesignHeight. Они влияют на вывод страницы в среде разработки (аналогично свойствам width и Height). Во время выполнения они игнорируются. Их главное назначение — облегчить создание пользовательских интерфейсов, учитывающих модель установки размеров браузерами, предоставляя в то же время реалистичный вид интерфейса в рабочей среде Visual Studio или Expression Blend.

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

Как правило, страницы с изменяемыми размерами более гибкие. Их рекомендуется применять всегда, когда это возможно. Обычно такие страницы используются в дело­вых приложениях и приложениях с традиционным пользовательским интерфейсом, не содержащим много графических компонентов. С другой стороны, в графически мощ­ных приложениях (например, играх) часто нужно точно управлять размещением и ви­зуальной структурой страницы, поэтому в них чаще используются фиксированные раз­меры страницы.

Совет. Когда вы экспериментируете с разными способами установки размеров, вам будет удобнее тестировать страницу, если видно, какое место она занимает. Один из наиболее простых способов сделать страницу видимой состоит в присвоении цветного фона элементу содержимого верхнего уровня. Например, можно присвоить свойству Background (Фон) контейнера Grid значение Yellow (Желтый). Установить фон элемента UserControl невозможно, потому что класс UserControl не предоставляет свойства Background. Другой способ визуализации страницы состоит в использовании элемента Border (Рамка) в качестве элемента верхнего уровня.

Существует также несколько других, более специальных, способов установки раз­меров: прокрутка, масштабирование и полноэкранный режим. Они рассматриваются в следующих разделах.

Прокрутка

Ни один из рассмотренных выше контейнеров не поддерживает прокрутку, хотя она является наиболее мощным средством отображения большого объема информации в ограниченном пространстве. На платформе Silverlight добавить прокрутку неслож­но, однако для этого необходим дополнительный компонент — элемент управления

ScrollViewer.

Чтобы добавить на страницу полосу прокрутки, нужно заключить прокручиваемое содержимое в оболочку ScrollViewer. Элемент ScrollViewer может содержать что угод­но, однако обычно в него добавляют контейнер. Ниже приведен пример с прокруткой двухколоночной решетки, содержащей текстовые блоки и кнопки (для краткости при­ведены только две строки). Размеры страницы определяются окном браузера с учетом внешней пустой полоски, позволяющей визуально отделить полосу прокрутки от окна браузера. Ниже приведен листинг базовой структуры примера с разметкой, создающей первую строку элементов.

<UserControl х:Class="Layout.Scrolling"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/4>

presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Margin="20"> <ScrollViewer Background="AliceBlue"> <Grid Margin="3,3,10,3">

<Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions> <ColumnDefinition Width="*"></ColumnDefinition>

<ColumnDefinition Width="Auto"></ColumnDefinition> </Grid.ColumnDefinitions>

<TextBox Grid.Row="0" Grid.Column="0" Margin="3" Height="Auto" VerticalAlignment="Center"></TextBox> <Button Grid.Row="0" Grid.Column="l" №rgin="3" Padding="2" Content="063op"></Button>

</Grid> </ScrollViewer> , </UserControl>

Рис. 3.19. Исходное окно (слева), установка размеров традиционным способом (посредине)

и масштабирование (справа)

Существует два способа использования класса ScaleTransform. В первом способе вы делаете все сами: создаете реакцию на событие UserControl. SizeChanged, проверяете те­кущий размер страницы, вычисляете новые размеры и создаете объект ScaleTransform. Другой способ намного менее трудоемкий. Вы можете применить элемент управления Viewbox, входящий в Silverlight Toolkit и решающий все указанные задачи без единой строки кода. Далее рассматривается второй способ. Поэкспериментировать с первым способом можно с помощью примеров кода, прилагаемых к данной главе.

Перед написанием кода преобразования нужно убедиться в том, что разметка пра­вильно сконфигурирована. Ниже приведено несколько правил, которые необходимо со­блюдать при использовании классов преобразования.

•       Размеры элемента UserControl нельзя устанавливать явно. Он должен иметь воз­можность расширяться до размеров окна браузера.

•       Чтобы масштабировать окно, нужно знать желаемые размеры. Это такие разме­ры, при которых в окне точно помещается все содержимое. В разметке размеры не устанавливаются. Они вычисляются и применяются в коде.

•       Чтобы применить Viewbox, необходима ссылка на сборку System.Windows .Con­trols .Toolkit.dll. Нужно также объявить в разметке префикс пространства имен, как в примерах с контейнерами WrapPanel и DockPanel (см. выше).

Задав ссылку на сборку и префикс пространства имен, несложно создать масштаби­руемую страницу. Ниже приведена разметка контейнера Grid (см. рис. 3.19) с началь­ными размерами 200×225 пикселей, содержащая ряд текстовых полей и кнопок.

<UserControl х:Class="Layout.Page"

xmlns="http://schemas.microsoft.com/winfx/2 00 /хаті/

presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:toolkit=

"clr-namespace: System. Windows. Controls; assembly System.Windows.Controls.Toolkit">

<! — Этот контейнер необходим для масштабирования —> <toolkit:Viewbox> <! — Этот контейнер является корневым

для пользовательского интерфейса; обратите внимание на то, что в нем жестко закодированы размеры —> <Grid Background="White" Width="200" Height="225" Margin="3,3,10,3"> <Grid.RowDefinitions>

</Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> </Grid.ColumnDefinitions>

CTextBox Grid.Row="0" Grid.Column="0" Margin="3" Height="Auto" VerticalAlignment="Center" Text="0бразец текста"></TextBox> <Button Grid.Row="0" Grid.Column="l" Margin="3"

Padding="2"

Content="063op"></Button>

</Grid> </toolkit:Viewbox> </OserControl>

В данном примере Viewbox сохраняет пропорции масштабируемого содержимого. Иными словами, он масштабирует содержимое таким образом, чтобы вместить его в наименьший размер (ширину или высоту), а не во все пространство. Чтобы объект

Viewbox заполнил все пространство, не сохраняя пропорции, присвойте его свойству Stretch значение Fill. Для масштабирования страниц это не очень полезно, однако может пригодиться в других целях, например для масштабирования векторной графики в кнопке.

Важно отметить, что, поместив Viewbox в ScrollViewer, можно создать ряд ин­тересных эффектов. Например, можно вручную задать размеры Viewbox (с помощью свойств Height и Width) больше, чем доступное пространство, и прокручивать увели­ченное содержимое. Обычно такой метод применяется для создания зумируемого поль­зовательского интерфейса, размеры которого изменяются, когда пользователь перета­скивает ползунок или прокручивает колесико мыши. Пример с колесиком мыши можно найти в главе 4.

Поддержка зумирования браузера в Silverlight

В некоторых браузерах и операционных системах (в настоящий момент — в Firefox и Internet Explorer) приложения Silverlight поддерживают автозумирование. Это означает, что пользователь может изменять в браузере масштаб, что­бы уменьшить или увеличить приложение Silverlight. Например, если задать масштаб 110%, все приложение Silverlight, включая текст, изображения и элементы управления, будет увеличено на 10%.

В большинстве случаев это полезное поведение. Однако если приложение содержит собственные средства зумиро­вания, автозумирование браузера может быть неуместным. Чтобы отключить автозумирование, добавьте на входную страницу HTML параметр enableAutoZoom и присвойте ему значение false, как показано ниже.

<(Jiv id="silverlightControlHost">

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%"

height="100%"> <param name="enableAutoZoom" value="false" />

</object>

<ifrarae style="visibility:hidden;height:0;(5>

і                         width:0; border:0рх"></iframe>

</div>

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии