Visual Studio предлагает нам неплохой выбор различных элементов управления для разработки на Windows Phone 8.1. Рассмотрим наиболее распространенные элементы управления и их свойства.
По установленному свойству x:Name
впоследствии можно будет обращаться к элементу, как в коде c#, так и в xaml разметке.
Например, в xaml-коде у нас определена следующая кнопка:
<Button x:Name="button1" Width="60" Height="30" Content="Текст" Click="button1_Click" />
Здесь у нас задан атрибут Click с названием метода обработчика button1_Click
, который будет определен в файле кода C# и будет
вызываться по нажатию кнопки. Тогда в связанном файле кода C# мы можем обратиться к этой кнопке:
private void button1_Click(object sender, RoutedEventArgs e) { button1.Content = "Привет!"; }
Поскольку свойство Name имеет значение button1
, то через это значение мы можем обратиться к кнопке в коде.
У элемента можно установить ширину с помощью свойства Width и высоту с помощью свойства Height. Эти свойства принимают значение типа double
.
Хотя общая рекомендация состоит в том, что желательно избегать жестко закодированных в коде ширины и высоты.
Также мы можем задать возможный диапазон ширины и высоты с помощью свойств MinWidth/MaxWidth и MinHeight/MaxHeight. И при растяжении или сжатии контейнеров элементы с данными заданными свойствами не будут выходить за пределы установленных значений.
Свойство HorizontalAlignment выравнивает элемент по горизонтали относительно правой или левой стороны контейнера и соответственно может принимать значения Left, Right, Center (положение по центру), Stretch (растяжение по всей ширине). Например:
<Grid> <Button Content="Left" Width="60" Height="30" HorizontalAlignment="Left" /> <Button Content="Center" Width="60" Height="30" HorizontalAlignment="Center" /> <Button Content="Right" Width="60" Height="30" HorizontalAlignment="Right" /> <Button Content="Stretch" Height="30" HorizontalAlignment="Stretch" Margin="10 -80 10 0" /> </Grid>
Также мы можем задать для элемента выравнивание по вертикали с помощью свойства VerticalAlignment, которое принимает следующие значения: Top (положение в верху контейнера), Bottom (положение внизу), Center (положение по центру), Stretch (растяжение по всей высоте). Например:
<Grid> <Button Content="Left" Width="60" Height="30" VerticalAlignment="Bottom" /> <Button Content="Center" Width="60" Height="30" VerticalAlignment="Center" /> <Button Content="Right" Width="60" Height="30" VerticalAlignment="Top" /> <Button Content="Stretch" Width="30" VerticalAlignment="Stretch" Margin="160 0 10 0" /> </Grid>
Это свойство устанавливает отступы вокруг элемента. Синтаксис: Margin="левый_отступ верхний_отступ правый_отступ нижний_отступ". Например, установим отступы у одной кнопки слева и сверху, а у другой кнопки справа и снизу:
<Grid> <Button Content="15 10 0 0" Width="60" Height="30" Margin ="15 10 0 0" HorizontalAlignment="Left" VerticalAlignment="Top"/> <Button Content="0 0 20 10" Width="60" Height="30" Margin ="0 0 20 10" HorizontalAlignment="Right" VerticalAlignment="Bottom"/> </Grid>
Это свойство устанавливает параметры видимости элемента и может принимать одно из двух значений:
Visible - элемент виден и участвует в компоновке.
Collapsed - элемент не виден и не участвует в компоновке.
FontFamily определяет семейство шрифта (например, Arial, Verdana и т.д.)
FontSize определяет высоту шрифта
FontStyle определяет наклон шрифта, принимает одно из трех значений - Normal, Italic,Oblique.
FontWeight определяет толщину шрифта и принимает ряд значений, как Black,Bold и др.
FontStretch определяет, как будет растягивать или сжимать текст, например, значение Condensed сжимает текст, а Expanded - растягивает.
Выравнивание содержимого по горизонтали задается свойством HorizontalContentAlignment. Оно может принимать четыре значения:
Right: текст выравнивается по правому краю элемента
Left: выравнивание по левому краю
Center: выравнивание по центру
Stretch: текст растягивается по ширине элемента
Для выравнивания содержимого по вертикали применяется свойство VerticalContentAlignment. Оно может принимать четыре значения:
Top: текст выравнивается по верхнему краю элемента
Bottom: выравнивание по нижнему краю
Center: выравнивание по центру
Stretch: текст растягивается по высоте элемента
Данное свойство задает направление текста. Если оно равно RightToLeft, то текст начинается с правого края, если - LeftToRight, то с левого.
<StackPanel> <TextBlock FlowDirection="RightToLeft" FontSize="30">RightToLeft</TextBlock> <TextBlock FlowDirection="LeftToRight" FontSize="30">LeftToRight</TextBlock> </StackPanel>
Свойства Background и Foreground задают соответственно цвет фона и текста элемента управления.
Простейший способ задания цвета в коде xaml: Background="#ffffff"
. В качестве значения свойство
Background (Foreground) может принимать запись в виде шестнадцатеричного значения в формате
#rrggbb
, где rr
- красная составляющая, gg
- зеленая составляющая, а bb
- синяя.
Также можно задать цвет в формате #aarrggbb
.
Либо можно использовать названия цветов напрямую:
<Button Width="60" Height="30" Background="LightGray" Foreground="DarkRed" Content="Цвет" />
Однако при компиляции будет создаваться объект SolidColorBrush
, который и будет задавать цвет элемента. То есть определение кнопки
выше фактически будет равноценно следующему:
<Button Width="60" Height="30" Content="Цвет"> <Button.Background> <SolidColorBrush Color="LightGray" /> </Button.Background> <Button.Foreground> <SolidColorBrush Color="DarkRed" /> </Button.Foreground> </Button>
SolidColorBrush представляет собой кисть, покрывающую элемент одним цветом. Позже мы подробнее поговорим о цветах. А пока надо знать, что эти записи эквивалентны, кроме того, вторая форма определения цвета позволяет задать другие кисти - например, градиент.
Это надо также учитывать при установке или получении цвета элемента в коде c#:
SolidColorBrush backbrush= new SolidColorBrush(); backbrush.Color = Colors.Red; button1.Background = backbrush; SolidColorBrush forebrush= new SolidColorBrush(); forebrush.Color = Color.FromArgb(0, 255, 0, 50); button1.Foreground = forebrush;
Класс Colors
предлагает ряд встроенный цветовых констант, которыми мы можем воспользоваться. А если мы захотим конкретизировать настройки
цвета с помощью значений ARGB, то можно использовать метод Color.FromArgb.