Главная » Silverlight » Перетаскиваемые разделители

0

Каждый пользователь Windows знаком с разделителями — перетаскиваемыми по­лосками, отделяющими друг от друга две части окна. Например, в проводнике Windows можно навести указатель на полоску между левой и правой панелями и, когда указатель примет форму двунаправленной стрелки, перетащить границу между панелями влево или вправо. Перетаскивая разделитель, пользователь определяет, какую часть окна за­ймет каждая панель.

Платформа Silverlight позволяет создать аналогичное средство, предоставив пользо­вателю возможность изменить размеры строк или столбцов. Для этого в решетку Grid нужно добавить элемент GridSplitter. На рис. 3.14 показано окно, в котором разделитель GridSplitter установлен между двумя столбцами. Перетаскивая разделитель, пользователь может изменять ширину обоих столбцов.

Примечание. Сборка System.Windows.Controls.dll не является частью среды выполнения Silverlight, поэтому она должна распространяться с приложением. При добавлении ссылки на сборку System.Windows. Controls. dll вручную или при перетаскивании элемента GridSplitter на страницу программа Visual Studio автоматически присваивает значение true свойству Copy Local ссылки.

Для эффективного применения элемента GridSplitter нужно знать немного больше о том, как он работает. Этот элемент довольно простой, однако на первых порах рабо­тать с ним неудобно. Чтобы получить желаемые результаты, руководствуйтесь следую­щими правилами.

•       Элемент GridSplitter размещается в ячейке Grid. Если в ячейке уже есть другое содержимое, нужно задать внешнюю полоску, чтобы GridSplitter не перекры­вался с ним. Однако лучше всего зарезервировать для GridSplitter отдельные столбец или строку, присвоив их свойствам Height или Width значение Auto.

•       Элемент GridSplitter изменяет размеры нескольких строк или столбцов, а не одной ячейки. Чтобы внешний вид полоски разделителя соответствовал такому поведению, нужно растянуть ее вдоль нескольких строк или столбцов, а не един­ственной ячейки. Это можно сделать с помощью свойств RowSpan или ColumnSpan элемента GridSplitter. Если не добавить их, полоска будет выведена только в одной строке, хотя перетаскиваться будут границы нескольких ячеек. Согласи­тесь, что такое поведение выглядит странно.

•       По умолчанию полоска GridSplitter настолько маленькая, что на экране ее не вид­но. Чтобы ею можно было пользоваться, нужно присвоить ей некоторую ширину. Для вертикальной полоски разделителя (см. рис. 3.14) нужно присвоить свойству VerticalAlignment значение Stretch (чтобы она заняла все доступное пространство по вертикали), а свойству Width нужно присвоить фиксированный размер (напри­мер, 10 пикселей). Для горизонтального разделителя присвойте значение Stretch свойству HorizontalAlignment и фиксированную ширину свойству Height.

[1]    Ориентация полоски разделителя (вертикальная или горизонтальная) определя­ется свойствами выравнивания. Свойство VerticalAlignment горизонтального разделителя должно иметь значение Center (это значение установлено по умол­чанию), указывающее на то, что при перетаскивании разделителя изменяются размеры строк, расположенных ниже и выше. В случае вертикального раздели­теля (см. рис. 3.14) значение Center должно быть присвоено свойству Horizonta­lAlignment, чтобы изменялись размеры столбцов справа и слева.

•       Чтобы увидеть разделитель на экране, нужно установить его свойство Back­ground. В противном случае разделитель останется невидимым, пока пользова­тель не щелкнет на нем (в этот момент на его краях появятся синие прямоуголь­ники, сигнализирующие о получении фокуса). Однако когда разделитель неви­дим, откуда пользователь узнает, где нужно щелкнуть?

Рис. 3.14. Перетаскивание границ ячеек

• Разделитель не может нарушить требования минимальных и максимальных разме­ров, установленные в свойствах объектов ColumnDefinition и RowDef inition. Поэ­тому пользователь не может путем перетаскивания увеличить или уменьшить разме­ры больше, чем определено свойствами MinWidth, MaxWidth, MinHeight и MaxHeight.

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

<Grid Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition MinWidth="100"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition>

<ColumnDefinition MinWidth="50"></ColumnDefinition> </Grid.ColumnDefinitions>

<Button Grid.Column="0" Margin="3" Content="Левая ячейка"> </Button>

<basics:GridSplitter Grid.Column="l" Width="3" VerticalAligrmient=" Stretch"

Hor і zontalAl ignnient= " Center " Background="LightGray" ShowsPreview="False"> </basics:GridSplitter> <Button Grid.Column="2" Margin="3"

Content="Правая ячейка"></Button >

</Grid>

Совет. Как уже упоминалось, если решетка Grid имеет только одну строку или один столбец, раздел RowDefintion или ColumnDefinition не обязателен. Кроме того, можно не задавать позицию элементов, расположенных в первой строке, поскольку если свойство Grid.Row не установлено, считается, что оно равно нулю. Это же справедливо и для Grid. Column.

Приведенная выше разметка содержит не упомянутое пока что свойство ShowsPreview. При объявлении элемента GridSplitter оно по умолчанию имеет значе­ние False. В результате этого при перетаскивании разделителя размеры столбца изме­няются немедленно. Если присвоить ему значение True, то во время перетаскивания на экране будет видна серая тень, привязанная к указателю, а размеры ячеек будут изме­нены в момент отпускания кнопки мыши. Кроме того, разделитель можно сделать более интересным, чем просто серая полоска. Для этого используется свойство Background.

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

Рис. 3.15. Установка двух разделителей

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

<!— Это решетка, общая для всей страницы —> <Grid Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions>

<!— Это решетка, вложенная слева;

разделителя в ней нет —> <Grid Grid.Column="0" VerticalAlignment="Stretch"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions>

<Button Margin="3" Grid.Row="0" Content="Top Left"> </Button>

<Button Margin="3" Grid.Row="l" Content="Bottom Left"> </Button> </Grid>

<!— Это вертикальный разделитель, размещенный между двумя решетками (левой и правой) —> <basics: GridSplitter Grid. Column=" 1" Background="LightGray" Width="3" HorizontalAlignment="Center" VerticalAlignment="Stretch"> </basics:GridSplitter>

<!— Это решетка, вложенная справа —> <Grid Grid.Column="2"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Button Grid.Row="0" Margin="3" Content="Top Right"> </Button>

<Button Grid.Row="2" Margin="3" Content="Bottom Right"></Button>

<!— Это горизонтальный разделитель, размещенный между верхней и нижней областями —> <basics:GridSplitter Grid.Row="l" Background="LightGray" Height="3" VerticalAlignment="Center" HorizontalAlignment="Stretch" ShowsPreview="False"> </basics:GridSplitter> </Grid> </Grid>

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

По теме:

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