будет рассказываться в следующем разделе. И свойство Padding, и свойство Margin можно задавать как с помощью четырех отдельных частей (lef tAmount, topAmount, rightAmount и bottomAmount), так и с помощью одного значения (Thickness).

Что касается свойств Height и Width, то ими часто управляют другие свойства. Например, в случае установки для свойства HorizontalAlignment значения Stretch, свойство Width элемента управления будет изменяться в соответствии с шириной контейнера, в котором он содержится.

Элемент управления Border

Элемент управления Border является очень простым и полезным элементом управления типа контейнера. Он может содержать только один дочерний элемент управления, а не несколько, как это могут делать более сложные элементы управления, о которых речь пойдет далее. Размер дочернего элемента изменяется так, чтобы полностью занять элемент управления Border. Это может показаться не особо полезным, но не стоит забывать о том, что можно использовать свойства Margin и Padding для размещения элемента управления Border в пределах его контейнера, а его содержимого - в пределах его собственных краев. Еще можно устанавливать значение для такого свойства элемента управления Border, как Background, и тем самым делать его видимым. Чуть позже этот элемент управления будет показан в действии.

Элемент управления Canvas

Элемент управления Canvas, как уже отмечалось ранее, предоставляет полную свободу в отношения расположения дочерних элементов. Еще одной его особенностью является то, что свойства HorizontalAligment и VerticalAlignment, используемые с дочерними элементами, не будут никак влиять на их размещение.

Для размещения элементов в элементе управления Canvas можно, как и в предыдущих примерах, применять свойство Margin, но все-таки лучше вместо него использовать подключаемые свойства Canvas . Left, Canvas . Top, Canvas .Right и Canvas . Bottom, которые предоставляет сам класс Canvas:

<Canvas ...>

<Button Canvas.Top= 10 Canvas.Left= 10 . . . >Buttonl</Button> </Canvas>

В этом коде указано, что элемент управления Button должен размещаться так, чтобы его верхний край находмся в 10 пикселях от верхнего края элемента управления Canvas, а его левый край - в 10 пикселях от левого края элемента управления Canvas. Обратите внимание на то, что свойства Тор и Lef t имеют более высокую степень приоритетности, чем свойства Bottom и Right. Например, в случае указания и Тор, и Bottom, свойство Bottom будет игнорироваться.

На рис. 34.11 показан пример размещения двух элементов управления Rectangle в элементе управления Canvas внутри окон двух разных размеров.

Все приводимые в этом разделе примеры компоновок можно найти в проекте Lay о и tExampl es внутри загружаемого кода для этой главы.

Один элемент управления Rectangle размещается относительно левого верхнего угла, а второй - относительно правого нижнего. При изменении размера окна эти относительные позиции все равно сохраняются. Еще здесь можно увидеть ту важную роль, которую играет стопочный порядок при расположении элементов управления Rectangle. Тот элемент управления Rectangle, который размещается в правом нижнем углу, занимает более высокую позицию в стопочном порядке, поэтому при наложении обоих элементов управления друг на друга, видимым остается именно он.

Рис. 34.11. Пример компоновки элементов управления Rectangle в элементе управления Canvas

Код, необходимый для реализации данного примера, выглядит следующим образом:

<Canvas Background= AliceBlue > <Rectangle Canvas.Left= 50 Canvas.Top= 50 Height= 40 Width= 100

Stroke= Black Fill= Chocolate /> <Rectangle Canvas.Right= 50 Canvas.Bottom= 50 Height= 40 Width= 100 Stroke= Black Fill= Bisque /> </Canvas>

Элемент управления DockPanel

Элемент управления DockPanel позволяет пристыковывать дочерние элементы управления к одному из своих краев. Такой вид компоновки уже должен быть знаком, даже если вы никогда специально не обращали на это внимания. Ведь именно таким образом, например, элемент управления Ribbon в Word остается всегда в верхней части окна Word и именно таким образом в VS и VCE размещаются различные окна. В VS и VCE можно (как специально, так и случайно) изменять место стыковки окон, перетаскивая из одного места в другое.

У DockPanel имеется одно единственное подключаемое свойство DockPanel .Dock, которое дочерние элементы управления могут использовать для указания края для пристыковки. Для этого свойства можно устанавливать значение Left, Тор, Right или Bottom.

Стопочный порядок элементов управления в DockPanel играет чрезвычайно важную роль, поскольку с каждой пристыковкой к краю какого-то элемента управления пространство для пристыковки следующих дочерних элементов управления неизбежно уменьшается. Например, можно пристыковать к верхнему краю DockPanel одну панель инструментов, а к левому - вторую. Тогда первый элемент управления растянется вдоль всего верхнего края DockPanel, а второй - вдоль левого края, но начиная только от нижней части первой панели инструментов до нижней части DockPanel.

Последний указанный дочерний элемент будет (обычно) занимать область, которая останется после размещения всех предыдущих дочерних элементов управления. (Этим поведением можно управлять, поэтому и было сделано такое уточнение.)

При размещении элемента управления в DockPanel занимаемая им область может оказываться меньше той, что была для него зарезервирована в этом элементе управления. Например, в случае пристыковки элемента управления Button со значением 100 в свойстве Width, значением 50 в свойстве Height и значением Left в свойстве HorizontalAlingment, справа от него останется место, которое нельзя будет ис-

пользовать для пристыковки никаких других дочерних элементов управления. Кроме того, при наличии у этого элемента управления свойства Margin со значением 20, в верхней части DockPanel под него будет зарезервировано всего 90 пикселей (в результате сложения высоты этого элемента управления с верхним и нижнем полем). Об этом поведении нужно обязательно помнить при применении элемента управления DockPanel для компоновки, иначе оно может привести к получению самых неожиданных результатов.

На рис. 34.12 показан пример использования элемента управления DockPanel для компоновки.

1) DockPw lDoclf-Top-

Э) ОосИЯапЫ.Ооск-ТшГ*

4) DocKPeneLDock- Bononi-

Рис. 34.12. пример использования элемента управления DockPanel для компоновки

Код, необходимый для реализации такой компоновки, выглядит следующим образом:

<DockPanel Background= AliceBlue > <Border DockPanel.Dock= Top Padding= 10 Margin= 5 Background= Aguamarine Height= 45 >

<Label>l) DockPanel.Dock= Top </Label> </Border>

<Border DockPanel.Dock= Top Padding= 10 Margin= 5 Background= PaleVioletRed

Height= 45 Width= 200 >

<Label>2) DockPanel.Dock= Top </Label> </Border>

<Border DockPanel.Dock= Left Padding= 10 Margin= 5 Background= Bisgue Width= 200 >

<Label>3) DockPanel.Dock= Left </Label> </Border>

<Border DockPanel.Dock= Bottom Padding= 10 Margin= 5 Background= Ivory

Width= 200 HorizontalAlignment= Right >

<Label>4) DockPanel.Dock= Bottom </Label> </Border>

<Border Padding= 10 Margin= 5 Background= BlueViolet >

<Label Foreground= White >5) Last control</Label> </Border> </DockPanel>

В этом коде используется рассмотренный ранее элемент управления Border для четкого выделения областей стыкуемых элементов управления в примере компоновки, а также элементы управления Label для вывода простого информативного текста. Чтобы разобраться в этой компоновке, необходимо проанализировать ее сверху вниз, рассмотрев каждый элемент управления по очереди. ,