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

Расположение элементов управления очень важно и важно для удобства использования приложения. Он используется для организации группы элементов GUI в вашем приложении. Есть некоторые важные вещи, которые следует учитывать при выборе макетов панелей. Они —

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

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

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

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

Простейший вид макета предлагает элемент Canvas . Панель « Холст» — это базовая панель макета, в которой дочерние элементы можно расположить явно, используя координаты, относящиеся к любой стороне холста, например, слева, справа, сверху и снизу.

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

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

Фон

Получает или задает кисть, которая заполняет область содержимого панели. (Унаследовано от Panel)

Дети

Получает UIElementCollection дочерних элементов этой панели. (Унаследовано от Panel.)

Рост

Получает или задает предлагаемую высоту элемента. (Унаследовано от FrameworkElement.)

ItemHeight

Получает или задает значение, которое определяет высоту всех элементов, содержащихся в WrapPanel.

ItemWidth

Получает или задает значение, которое определяет ширину всех элементов, содержащихся в WrapPanel.

LogicalChildren

Получает перечислитель, который может перебирать логические дочерние элементы этого элемента Panel. (Унаследовано от Panel.)

LogicalOrientation

Ориентация панели, если панель поддерживает макет только в одном измерении. (Унаследовано от Panel.)

LeftProperty

Идентифицирует присоединенное свойство Canvas.Left XAML.

Поле

Получает или задает внешнее поле элемента. (Унаследовано от FrameworkElement.)

название

Получает или задает идентифицирующее имя элемента. Имя обеспечивает ссылку, так что выделенный код, такой как код обработчика события, может ссылаться на элемент разметки после того, как он создан во время обработки процессором XAML. (Унаследовано от FrameworkElement.)

ориентация

Получает или задает значение, указывающее измерение, в котором размещается дочерний контент.

родитель

Получает логический родительский элемент этого элемента. (Унаследовано от FrameworkElement.)

Ресурсы

Получает или задает локально определенный словарь ресурсов. (Унаследовано от FrameworkElement.)

Стиль

Получает или задает стиль, используемый этим элементом при его отображении. (Унаследовано от FrameworkElement.)

TopProperty

Идентифицирует присоединенное свойство Canvas.Top XAML.

ширина

Получает или задает ширину элемента. (Унаследовано от FrameworkElement.)

ZIndexProperty

Идентифицирует присоединенное свойство Canvas.ZIndex XAML.

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

GetLeft

Получает значение вложенного свойства Canvas.Left XAML для целевого элемента.

GetTop

Получает значение вложенного свойства Canvas.Top XAML для целевого элемента.

GetZIndex

Получает значение вложенного свойства Canvas.ZIndex XAML для целевого элемента.

SetLeft

Устанавливает значение вложенного свойства Canvas.Left XAML для целевого элемента.

SetTop

Устанавливает значение вложенного свойства Canvas.Top XAML для целевого элемента.

SetZIndex

Устанавливает значение вложенного свойства Canvas.ZIndex XAML для целевого элемента.

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

<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>

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