Silverlight - фиксированные макеты

Расположение элементов управления очень важно и важно для удобства использования приложения. Он используется для организации группы элементов графического интерфейса в вашем приложении. При выборе панелей макета необходимо учитывать ряд важных моментов. Они -

• Позиции дочерних элементов.
• Размеры дочерних элементов.
• Наслоение перекрывающихся дочерних элементов друг на друга.

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

Мы начнем с рассмотрения simple fixedмакеты. Затем мы посмотрим наDynamicсценарии макета, поддерживаемые Silverlight. Мы увидим связанные с макетом свойства и концепции, которые пронизывают все элементы пользовательского интерфейса.

Фиксированный макет

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

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

Ниже приведены наиболее часто используемые properties из Canvas класс.

Ниже приведены наиболее часто используемые свойства Canvas.

Sr. No.	Описание недвижимости
1	Background Получает или задает кисть, заполняющую область содержимого панели. (Унаследовано от Panel)
2	Children Получает UIElementCollection дочерних элементов этой Panel. (Унаследовано от Panel.)
3	Height Получает или задает предлагаемую высоту элемента. (Унаследовано от FrameworkElement.)
4	ItemHeight Получает или задает значение, определяющее высоту всех элементов, содержащихся в WrapPanel.
5	ItemWidth Получает или задает значение, определяющее ширину всех элементов, содержащихся в WrapPanel.
6	LogicalChildren Получает перечислитель, который может перебирать логические дочерние элементы этого элемента Panel. (Унаследовано от Panel.)
7	LogicalOrientation Ориентация панели, если панель поддерживает макет только в одном измерении. (Унаследовано от Panel.)
8	LeftProperty Идентифицирует присоединенное свойство Canvas.Left XAML.
9	Margin Получает или задает внешнее поле элемента. (Унаследовано от FrameworkElement.)
10	Name Получает или задает идентифицирующее имя элемента. Имя предоставляет ссылку, чтобы код программной части, например код обработчика событий, мог ссылаться на элемент разметки после того, как он был создан во время обработки процессором XAML. (Унаследовано от FrameworkElement.)
11	Orientation Получает или задает значение, указывающее измерение, в котором упорядочено дочернее содержимое.
12	Parent Получает логический родительский элемент этого элемента. (Унаследовано от FrameworkElement.)
13	Resources Получает или задает локально определенный словарь ресурсов. (Унаследовано от FrameworkElement.)
14	Style Получает или задает стиль, используемый этим элементом при его визуализации. (Унаследовано от FrameworkElement.)
15	TopProperty Идентифицирует присоединенное свойство Canvas.Top XAML.
16	Width Получает или задает ширину элемента. (Унаследовано от FrameworkElement.)
17	ZIndexProperty Идентифицирует присоединенное свойство Canvas.ZIndex XAML.

Ниже приведены наиболее часто используемые methods из Canvas.

Sr. No.	Метод и описание
1	GetLeft Получает значение присоединенного свойства XAML Canvas.Left для целевого элемента.
2	GetTop Получает значение присоединенного свойства XAML Canvas.Top для целевого элемента.
3	GetZIndex Получает значение присоединенного свойства XAML Canvas.ZIndex для целевого элемента.
4	SetLeft Задает значение присоединенного свойства XAML Canvas.Left для целевого элемента.
5	SetTop Задает значение присоединенного свойства XAML Canvas.Top для целевого элемента.
6	SetZIndex Задает значение присоединенного свойства XAML Canvas.ZIndex для целевого элемента.

В следующем примере показано, как добавить дочерние элементы в Canvas. Ниже представлена ​​реализация XAML, в которой эллипс создается внутри холста с различными свойствами смещения.

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Canvas Width = "380" Height = "280" > 
         <Ellipse Canvas.Left = "30" Canvas.Top = "30"  
            Fill = "Gray" Width = "200" Height = "120" />             
      </Canvas>  
   </Grid>
	
</UserControl>

Когда приведенный выше код скомпилирован и выполнен, вы увидите следующий результат.