Начинаем компоновку

Оценить
(0 голоса)

После создания нового проекта WPF мы дважды щелкнем по файлу Windowl.xaml и начнем дизайн нашего пользовательского интерфейса. Начальную компоновку обеспечат панель Grid и несколько вложенных контейнеров StackPanel или WrapPanel. Мы можем исполь­зовать элемент управления Grid, который был автоматически помещен в наше окно при создании проекта. Выделите Grid внутри визуального конструктора; вы можете сделать это либо при помощи щелчка в визуальном конструкторе, либо при помощи щелчка внутри элемента <Grid> в панели XAML. Когда элемент управления Grid будет выделен, щелкните один раз в области границы заголовка для создания границы столбца. Расположите границу примерно посередине ширины Grid (чтобы она разделила сетку примерно поровну между двумя столбцами).

Теперь щелкните дважды по левой границе Grid. Это создаст два ряда. Перетащите разде­лители таким образом, чтобы наш первый ряд имел высоту примерно 30, а наш нижний ряд — примерно 40. Ваша поверхность конструирования должна выглядеть теперь пример­но так, как показано на рис. 16.21. Описание: image433

Перетащите в левый столбец среднего ряда ListBox, а в левый столбец верхнего ряда — элемент управления "меню". Поскольку мы хотим, чтобы наше меню занимало всю ширину Grid, то нам нужно вручную подстроить XAML — в элементе Menu надо указать: Specify Grid. ColumnSpan="2". Если в элементах Menu или ListBox есть настройки Margin, то их надо удалить. Это позволит элементу управления Menu расширяться и сокращаться внутри Grid, а также позволит Menu заполнять все пространство первого ряда Grid. Мы знаем, что нам надо предоставить возможность выбора каталогов, поэтому мы можем назвать главный пункт меню Folder и включить под ним пункт более низкого уровня с названием Open:

<Menu Grid.Row="0" Grid.ColumnSpan="2" Height="22" Name="menul"

VerticalAlignment="Top">

<MenuItem Header=,,_Folder">

<MenuItem Header="_Open..." Click="FolderOpenMenuItem_Click" />

</MenuItem>

</Menu>

Для поля просмотра изображения мы используем элемент управления Image. Перетащите его в правый столбец второго ряда — и точно так же, как и раньше, удалите все настройки Margin.

И наконец, перетащите в самый правый столбец третьего ряда элемент StackPanel, удалите настройки Margin и установите его свойство Orientation в значение Horizontal, а свойство HorizontalAlignment в значение Center. В эту панель мы поместим наши кнопки манипули­рования изображением, которые вы тоже можете теперь добавить. Перетащите четыре кнопки на StackPanel и настройте их поля, а также высоту и ширину (чтобы получить же­лаемый внешний вид).

Примечание

В большей части этих примеров рекомендуется подстраивать свойства при помощи панели XAML, но не забудьте о том, что вы можете использовать для этого также и окно Properties (как и в любом другом типе проекта). Однако после освоения XAML вам может стать удобнее добавлять или изменять элементы непосредственно в пане-г ли XAML. Технология IntelliSense значительно ускоряет такой подход к конструирова­нию пользовательского интерфейса.

Ваше окно теперь должно выглядеть вроде показанного на рис. 16.22; вот так же и наш XAML:

<Window х: Class="IinageViewer. Windowl"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Windowl" Height=M464M Width=M545">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="262*" />

<ColumnDefinition Width="261*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="30" />

<RowDefinition Height="352*" />

<RowDefinition Height="45" />

</Grid.RowDefinitions>

<Menu Grid.Row="0" Grid.ColumnSpan="2" Height="22" Name="menul" VerticalAlignment="Top">

<MenuItem Header=" Folder" />

</Мепи>

CListBox Grid.Row="l" Name-"listBoxl" />

<Image Grid.Column="l" Grid.Row="l" Name="image1" Stretch="Fill" /> <StackPanel HorizontalAlignment="Center" Orientation="Horizontal"

Grid.Column="l" Grid.Row="2" Name="stackPanell">

<Button Width="50" Margin="10,0">Button</Button>

<Button Width="50" Margin="10,0">Button</Button>

<Button Width="50" Margin="10,0">Button</Button>

<Button Width="50" Margin="10,0">Button</Button>

</Grid>

</Window>Описание: image434

Подробнее в этой категории: « .NET фирма Microsoft Хранение изображений »
Хранение изображений
Резюме
.NET фирма Microsoft
Платформа Windows Presentation Foundation
Модель программирования

Добавить комментарий


Защитный код
Обновить

© 2017 www.visualstudios.ru. Все права защищены.