Добро пожаловать в мой уютный бложек свежесозданный блог, посвященый технологии Silverlight.
Эта статья является 3 в цикле. Вот тут есть начало и продолжение.
При построении любого GUI-приложения, содержащего более 5-6 элементов управления, резко встает вопрос их корректного позиционирования и управления их размещением в пределах родительского элемента управления.
Для решения данной проблемы существует несколько подходов. Silverlight унаследовал от WPF вариант с использованием layout-ов (иногда их называют раскладками, иногда и еще хуже). Гибкость системы раскладок позволяет создавать причудливые комбинации элементов управления, комбинируя как абсолютные, так и относительные методы позиционирования и управления размерами компонентов.
В состав текущей бета-версии Silverlight2 включены 3 компонента раскладки, которые позволяют решить практически весь спектр задач.
— Canvas
— Stack
— Grid
При размещении элемента управления в контейнере, ему чаще всего добавляются дополнительные свойства (attached properties), которые позволяют более гибко настроить его размещение.
Небольшое отступление: я не знаю правильного перевода некоторых терминов (в т.ч. attached properties, layout и т.д.). Поэтому подобрал русские аналоги, показавшиеся мне наиболее адекватными, и при первом употреблении указываю английский вариант. Если кто-то предложит варианты лучше – буду весьма благодарен.
Canvas
В принципе, наверное, самый простой по действию менеджер раскладок. Он позволяет осуществить абсолютное позиционирование дочерних компонентов внутри себя, задавая координаты их левых верхних углов в пикселях. Также позволяет менять порядок объектов в «Z-index», то есть определять, «что поверх чего лежит».
Вот простой пример для данного случая.
Мы разместили на нашей канве 3 элемента управления. Прямоугольник и два овала, причем их дополнительные свойства Canvas.Left и Canvas.Top задают координаты их левой и верхней границ относительно родительского элемента управления. Для третьего эллипса мы задали его свойство Canvas.ZIndex равным -1, что привело к тому что он находится «под» прямоугольником, в отличии от своего «собрата».
StackPanel
StackPanel весьма удобен для автоматического размещения большого числа однотипных элементов. Он, как можно легко понять из названия (а еще легче – из рисунка), занимается укладкой дочерних элементов в аккуратный столбик по вертикали или горизонтали. В принципе, один маленький пример стоит тысячи слов, потому, не мудрствуя лукаво, привожу его. Вот код.
Вот соответствующая ему раскладка.
Вот второй вариант для горизонтального размещения элементов управления.
Вот как он выглядит.
Единственное, что в этих примерах стоит отметить, это очень полезное свойство Margin, оно позволяет задать отступ, которым будет выделен элемент, при размещении его в менеджере раскладок.
Grid
Grid – самый сложный из трех базовых менеджеров раскладки, используемых в Silverlight 2 по-умолчанию. Отчасти он схож с HTML-таблицами, отчасти с GridLayout в Java, отчасти не похож ни на что. Давайте для начала рассмотрим пример, а потом разберем его по косточкам.
Вот исходный код.
Выглядеть это все будет вот так.
Пойдем по порядку.
Свойство ShowGridLines, установленное в True – весьма помогает при конструировании приложения, так как позволяет видеть линии нашей таблицы, и проще в ней ориентироваться. Потом это свойство лучше отключить, так как красоты оно в большинстве случаев не добавляет :).
После этого, необходимо описать строки и столбцы будущей таблицы. Для этого педназначены специальные разделы <Grid.RowDefinitions> и <Grid.ColumnDefinitions>, в которых содержатся записи, отвечающие, соответственно, за строки и столбцы. Формат их, как видите в примере, очень прост. Главный их атрибут это высота и ширина. Если задана конкретная цифра, значит это – абсолютный размер в пикселях. «*» означает «занимать все свободное место. Возможно так же задавать и относительные размеры, но об этом в другой раз.
После описания «раскладки» таблицы, в нее можно размещать элементы. Для них также определяются «пристежные» атрибуты. Grid.Row задает строку, в которой будет размещен элемент управления, Grid.Column, соответственно, столбец.
При необходимости, используя свойства Grid.ColumnSpan и Grid.RowSpan, можно «занять» больше одной ячейки.
Вот собственно и все, что можно вкратце сказать про основные элементы управления раскладкой в Silverlight. Для построения действительно гибко и удобного UI их, конечно, придется совмещать и комбинировать. Но про это я расскажу в следующий раз на каком-нибудь удобном примере.
Эта статья является 3 в цикле. Вот тут есть начало и продолжение.
При построении любого GUI-приложения, содержащего более 5-6 элементов управления, резко встает вопрос их корректного позиционирования и управления их размещением в пределах родительского элемента управления.
Для решения данной проблемы существует несколько подходов. Silverlight унаследовал от WPF вариант с использованием layout-ов (иногда их называют раскладками, иногда и еще хуже). Гибкость системы раскладок позволяет создавать причудливые комбинации элементов управления, комбинируя как абсолютные, так и относительные методы позиционирования и управления размерами компонентов.
В состав текущей бета-версии Silverlight2 включены 3 компонента раскладки, которые позволяют решить практически весь спектр задач.
— Canvas
— Stack
— Grid
При размещении элемента управления в контейнере, ему чаще всего добавляются дополнительные свойства (attached properties), которые позволяют более гибко настроить его размещение.
Небольшое отступление: я не знаю правильного перевода некоторых терминов (в т.ч. attached properties, layout и т.д.). Поэтому подобрал русские аналоги, показавшиеся мне наиболее адекватными, и при первом употреблении указываю английский вариант. Если кто-то предложит варианты лучше – буду весьма благодарен.
Canvas
В принципе, наверное, самый простой по действию менеджер раскладок. Он позволяет осуществить абсолютное позиционирование дочерних компонентов внутри себя, задавая координаты их левых верхних углов в пикселях. Также позволяет менять порядок объектов в «Z-index», то есть определять, «что поверх чего лежит».
Вот простой пример для данного случая.
<UserControl x:Class="SLDemoApp.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
<Rectangle Canvas.Left="50" Canvas.Top="50" Fill="Aqua" Width="200" Height="100" />
<Ellipse Canvas.Left="100" Canvas.Top="100" Fill="RosyBrown" Width="50" Height="100" />
<Ellipse Canvas.Left="150" Canvas.Top="100" Canvas.ZIndex="-1" Fill="RosyBrown" Width="50" Height="100" />
</Canvas>
</UserControl>
Мы разместили на нашей канве 3 элемента управления. Прямоугольник и два овала, причем их дополнительные свойства Canvas.Left и Canvas.Top задают координаты их левой и верхней границ относительно родительского элемента управления. Для третьего эллипса мы задали его свойство Canvas.ZIndex равным -1, что привело к тому что он находится «под» прямоугольником, в отличии от своего «собрата».
StackPanel
StackPanel весьма удобен для автоматического размещения большого числа однотипных элементов. Он, как можно легко понять из названия (а еще легче – из рисунка), занимается укладкой дочерних элементов в аккуратный столбик по вертикали или горизонтали. В принципе, один маленький пример стоит тысячи слов, потому, не мудрствуя лукаво, привожу его. Вот код.
<UserControl x:Class="SLDemoApp.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="300">
<StackPanel x:Name="LayoutRoot" Background="White">
<Button Margin="5" Content="Button1" />
<Button Margin="5" Content="Button2" />
<Button Margin="5" Content="Button3" />
<Button Margin="5" Content="Button4" />
</StackPanel>
</UserControl>Вот соответствующая ему раскладка.
Вот второй вариант для горизонтального размещения элементов управления.
<UserControl x:Class="SLDemoApp.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="200">
<StackPanel x:Name="LayoutRoot" Orientation="Horizontal" Background="White">
<Button Margin="5" Content="Button1" />
<Button Margin="5" Content="Button2" />
<Button Margin="5" Content="Button3" />
<Button Margin="5" Content="Button4" />
</StackPanel>
</UserControl>Вот как он выглядит.
Единственное, что в этих примерах стоит отметить, это очень полезное свойство Margin, оно позволяет задать отступ, которым будет выделен элемент, при размещении его в менеджере раскладок.
Grid
Grid – самый сложный из трех базовых менеджеров раскладки, используемых в Silverlight 2 по-умолчанию. Отчасти он схож с HTML-таблицами, отчасти с GridLayout в Java, отчасти не похож ни на что. Давайте для начала рассмотрим пример, а потом разберем его по косточкам.
Вот исходный код.
<UserControl x:Class="SLDemoApp.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300">
<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Fill="Coral" RadiusX="15" RadiusY="15" />
<Rectangle Grid.Column="2" Grid.Row="1" Fill="DarkMagenta" Margin="5" />
<Rectangle Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" Fill="LightSkyBlue" />
</Grid>
</UserControl>Выглядеть это все будет вот так.
Пойдем по порядку.
Свойство ShowGridLines, установленное в True – весьма помогает при конструировании приложения, так как позволяет видеть линии нашей таблицы, и проще в ней ориентироваться. Потом это свойство лучше отключить, так как красоты оно в большинстве случаев не добавляет :).
После этого, необходимо описать строки и столбцы будущей таблицы. Для этого педназначены специальные разделы <Grid.RowDefinitions> и <Grid.ColumnDefinitions>, в которых содержатся записи, отвечающие, соответственно, за строки и столбцы. Формат их, как видите в примере, очень прост. Главный их атрибут это высота и ширина. Если задана конкретная цифра, значит это – абсолютный размер в пикселях. «*» означает «занимать все свободное место. Возможно так же задавать и относительные размеры, но об этом в другой раз.
После описания «раскладки» таблицы, в нее можно размещать элементы. Для них также определяются «пристежные» атрибуты. Grid.Row задает строку, в которой будет размещен элемент управления, Grid.Column, соответственно, столбец.
При необходимости, используя свойства Grid.ColumnSpan и Grid.RowSpan, можно «занять» больше одной ячейки.
Вот собственно и все, что можно вкратце сказать про основные элементы управления раскладкой в Silverlight. Для построения действительно гибко и удобного UI их, конечно, придется совмещать и комбинировать. Но про это я расскажу в следующий раз на каком-нибудь удобном примере.
