Элементы управления

Свойства элементов управления

Visual Studio предлагает нам неплохой выбор различных элементов управления для разработки на Windows Phone 8.1. Рассмотрим наиболее распространенные элементы управления и их свойства.

x:Name

По установленному свойству 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

Свойство 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

Также мы можем задать для элемента выравнивание по вертикали с помощью свойства 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>

Отступы padding и margin

Это свойство устанавливает отступы вокруг элемента. Синтаксис: 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>

Visibility

Это свойство устанавливает параметры видимости элемента и может принимать одно из двух значений:

• 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: текст растягивается по высоте элемента

FlowDirection

Данное свойство задает направление текста. Если оно равно 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.