Элементы управления пользовательского интерфейса Silverlight (User Interface Controls) - Grid с элементами управления
ОГЛАВЛЕНИЕ
Создание первого примера - Grid с элементами управления
Откройте Visual Studio 2008 и нажмите на "Создать проект" (Create Project) и затем в окне нового проекта вам понадобится создать проект C# используя шаблон приложения (Silverlight Application Template).
Выберите место расположения вашего приложения и назовите его по вашему желанию; удостоверьтесь в том, что вы обладаете новейшей структурой (framework).
Рис. 1-2. Создание нового проекта Silverlight
При нажатии на кнопку OK вас спросят о том, хотите ли вы создать веб-сайт (Web Site) , веб-приложение (Web Application) либо простую тестовую страницу, или же ы хотите привязать существующий веб-сайт; все это показано в следующем изображении.
Рис. 1-3. Выберите создание простой тестовой HTML страницы
Если вы создадите тест страницу, то проект будет достаточно простым, но если вы создадите проект веб-сайт (Web Site) или веб-приложение (Web Application), то тогда Visual Studio создаст два проекта для вас: приложение Silverlight и тестовое приложение - отличное решение для программирования с тестированием, но для нас это пока излишне.
Выберите вторую опцию (cоздание тестовой страницы), и пусть Visual Studio cоздаст простое приложение. Если Page.xaml не будет открыт автоматически - щелкните дважды по нему в Solution Explorer (Обозреватель решений). Вы увидите, что Visual Studio понял, что вам необходима табличная сетка в качестве вашего главного контейнера и создал один за вас, названный LayoutRoot. (Также обратите внимание на то, что UserControl является самым первым декларатором в каждом "page".
<UserControl x:Class="EasyGrid.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
В частности, Page является UserControl (пользовательским элементом управления), и мы вернемся к данному отношению в следующей статье.
Определение Grid, созданное Visual Studio 2008, выглядит следующим образом:
<Grid x:Name="LayoutRoot" Background="White">
</Grid>
Во многих случаях ваше приложение будет расположено между открывающим и закрывающим тегом элемента Grid; в других случаях вы будете использовать другой контейнер вместо Grid.
Определяем строки (Rows) и свойства (Properties)
Вы определяете строки (Rows) для таблицы в пределах элемента Grid.RowDefinitions. Для каждого элемента Row вы добавляете элемент RowDefinition, который сам по себе может иметь различные свойства, включая определенную высоту, либо же вы можете установить такую высоту, которая будет пропорциональной доступной площади либо занимать все свободное пространство, не занятое другими строками.
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="30*" MaxHeight="70" />
<RowDefinition Height="40*" MaxHeight="70" />
<RowDefinition Height="*" MinHeight="30" MaxHeight="50" />
<RowDefinition Height="Auto" MinHeight="5" MaxHeight="30" />
</Grid.RowDefinitions>
</Grid>
Height="Auto"
C установкой Auto пространство Grid распределяется равномерно на основании размера, содержимого в строке.
Звезда или пропорциональное изменение размеров
При пропорциональном изменении размеров значение колонки или строки должно быть выражено Xaml в качестве *.
<RowDefinition Height="*"
Тем не менее, вы можете присвоить одной колонке или строке в два раза больше пространства используя 2* (или отношение 5:7 используя 5* и 7*).
<RowDefinition Height="30*"
<RowDefinition Height="40*"
Если вы совместите это с минимальной (Minimum) или максимальной (Maximum) высотой (Height), то вы получите более изящный элемент управления:
<RowDefinition Height="30*" MaxHeight="70" />
<RowDefinition Height="40*" MaxHeight="70" />
<RowDefinition Height="*" MinHeight="30" MaxHeight="50" />
Минимальное и контролируемое пространство
По умолчанию, дочерние элементы табличной сетки занимают минимальное необходимое пространство для размещения максимального объема содержимого в пределах ячейки в определенной строке или колонке. Вы можете иметь более гибкий контроль над позиционированием используя свойства отступа (margin) и выравнивания (alignment) так, как это показано ниж.
Единицы измерения размера
Для того , чтобы предоставить гибкость колонки и строки элемента Grid изменяют свои размеры при помощи объектов, GridLength, которые используют GridUnitType, в свою очередь позволяющий вам выбрать следующие опции:
- Auto - размер основан на свойствах размера объекта, помещенного в сетку
- Pixel - размер в пикселях
- Star - размер основан на пропорциях доступного пространства
При этом с указанием хотим ли мы установить минимальное и максимальное значение для каждого.
Для того, чтобы увидеть эффект всего этого мы создадим пять строк, используя различные правила настройки размеров. Мы также создадим три колонки, не обладающие никакими правилами установки размера (!). Затем мы заполним нашу табличную сетку элементами управления и рассмотрим некоторые последствия. Вот тот код, который мы с вами разберем.
Пример 1-1. Xaml для EasyGrid
<UserControl x:Class="EasyGrid.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="30*" MaxHeight="70" />
<RowDefinition Height="40*" MaxHeight="70" />
<RowDefinition Height="*" MinHeight="30" MaxHeight="50" />
<RowDefinition Height="Auto" MinHeight="5" MaxHeight="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions><TextBlock x:Name="FirstNamePrompt "
Grid.Row="0" Grid.Column="0" Text="First Name:" Margin="5"/>
<TextBox x:Name="FirstName"
Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"
Width="150" Background="Bisque" Margin="5" />
<TextBlock x:Name="LastNamePrompt "
Grid.Row="1" Grid.Column="0" Text="First Name:" Margin="5"/>
<TextBox x:Name="LastName"
Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
Width="150" Background="Beige" Margin="5" />
<TextBlock x:Name="SubscriberPrompt"
Grid.Row="2" Grid.Column="0"
Text="Subscriber?" VerticalAlignment="Bottom" />
<CheckBox x:Name="PlanA" Grid.Row="2" Grid.Column="1"
Content="Plan A" IsChecked="true"
VerticalAlignment="Bottom" />
<CheckBox x:Name="PlanB" Grid.Row="2" Grid.Column="2"
Content="Plan B" VerticalAlignment="Bottom" />
<TextBlock x:Name="Hello" Text="Hello"
Grid.Row="3" Grid.Column="2" VerticalAlignment="Bottom"/>
<TextBlock x:Name="World" Text="World"
Grid.Row="4" Grid.Column="2" VerticalAlignment="Bottom"
FontFamily="Comic Sans MS" FontSize="24"
FontWeight="Bold" Margin="0,20,0,0"/>
</Grid>
</UserControl>
Результат обработки данного кода отображен ниже
Рис. 1-4. Обработанный код
Для начала важно понять, что код Xaml, продемонстрированный в Примере 1-1, включает все необходимое для создания элемента управления (является всем что необходимо) для того, чтобы создать элемент управления) Silverlight , показанного на изображении 1-4. Вы и вправду не увидите строки и колонки, но это с легкостью можно изменить. Найдите объявление элемента и установите его свойство ShowGridLines (Отображать линии сетки) в True (Intellisense поможет вам сделать это, как показано на Изображении 1-5)
Рис. 1-5. Добавление свойства ShowGridLines и установка его в значение True
Когда вы сделаете это, то вы увидите сетку; это может пригодиться во время разработки, но все же надо помнить о том, что надо вернуть значение в False до того, как вы начнете обработку приложения Silverlight!
Рис. 1-6. ShowGridLines делает выравнивание более видимым (Нажмите сюда для просмотра полноразмерного изображения.
Исследуем код Xaml
Первые строки создают элемент Grid и определяют способ разделения пространства между строками.
<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="30*" MaxHeight="70" />
<RowDefinition Height="40*" MaxHeight="70" />
<RowDefinition Height="*" MinHeight="30" MaxHeight="50" />
<RowDefinition Height="Auto" MinHeight="5" MaxHeight="30" />
</Grid.RowDefinitions>
Как уже было описано выше, RowDefinitions определяет пять строк. Первая строка имеет фиксированную высоту, равную 50. Вторая и третья будут иметь размеры в пропорции 3:4 относительно друг друга, но каждая может быть не более 70. Следующая строка займет все оставшееся место, но никогда не будет менее 30 либо более 50. Последняя строка будет изменять свой размер относительно располагаемого в ней объекта, но при этом ограничена минимальным значением в 5 и максимальным в 30.
После указания определения колонок мы определим TextBlock и TextBox. Мы обсудим данные элементы управления более детально позже, но первый обычно используется в качестве ярлыка, а второй используется для пользовательского ввода.
<TextBlock
x:Name="FirstNamePrompt "
Grid.Row="0"
Grid.Column="0"
Text="First Name:"
Margin="5"/>
TextBlock имеет пять параметров. Они могут быть выровнены один над другим, либо выстроены в линию - как вам будет угодно. Первый параметр - это имя (FirstNamePrompt) и используется для предоставления возможности ссылки на объект в коде. Если вы дадите имя объекту в Xaml и сохраните в файле, данный объект доступен без необходимости объявления в ваших методах.
Поэтому, если вы сохраните данный файл, и вы спокойно можете написать
FirstNamePrompt.Text=”Hello”
из любого метода данного класса и тогда компилятор будет точно знать то, на что вы ссылаетесь!
Свойства Grid.Row и Grid.Column называются расширенными свойствами и на самом деле "позаимствованы" из табличной сетки для позиционирования TextBlock в пределах соответствующей ячейки.
Свойство Text делает как раз то, что вам необходимо и оно заполняет TextBlock текстом.
Мы позже несколько раз вернемся к свойству Margin (отступ). На данный момент я обращаю ваше внимание на то, что нам необходимы три формы:
- Единственное значение, которое задает отступ по всему пространству - то есть слева, справа, сверху и снизу
- Два значения, где первое значение поровну разделено между левым и правым отступом, а второе разделено между верхним и нижним
- Четыре значения, по порядку Left (левое), Top (верхнее), Right (правое), Bottom (нижнее).
За элементом TextBlock в первой колонке следует TextBox (ввод) во второй колонке. Свойства очень похожи, однако вам придется объявить ширину вашего TextBox и мы выберем фоновый цвет для TextBox.
Следующая пара схожа с первой.
Третья строка заполнена элементами TextBlock и двумя CheckBox. Обратите внимание на то, что они выровнены посредством свойств VerticalAlignment и на то, что свойство IsChecked первого CheckBox установлено в True, так что он будет отмечен при первом отображении страницы.
TextBlock четвертой строки отображает Hello и в последней строке TextBlock отображает World, но при этом имеет настроенные свойства FontFamily, FontSize и FontWeight.