воскресенье, 23 мая 2010 г.

WPF. Часть 2. Layout (3).


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

В частности, в Gird’е можно использовать разделители (их называют Splitter’ами). Надо назначить, где он будет стоять (строку и колонку), длин разделителя, вертикальное и горизонтальное положение. То есть можно создать разделители, которые будут разделять ячейки сетки как по вертикали, так и по горизонтали. Вставьте следующий код в Visual Studio и запускайте:

<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" WindowStartupLocation="CenterScreen">
    <Grid ShowGridLines="False">

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        Grid.ColumnDefinitions>

        <GridSplitter Grid.Column="1"
                      Grid.Row="1"
                      Grid.ColumnSpan="1"
                      HorizontalAlignment="Stretch" 
                      VerticalAlignment="Top"
                      Background="Blue"
                      ShowsPreview="True"
                      ResizeDirection="Rows"
                      Height="5"/>

        <GridSplitter Grid.Column="1"
                      Grid.Row="2"
                      Grid.ColumnSpan="1"
                      HorizontalAlignment="Stretch" 
                      VerticalAlignment="Top"
                      Background="Blue"
                      ShowsPreview="True"
                      ResizeDirection="Rows"
                      Height="5"/>

        <GridSplitter Grid.Column="2"
                      Grid.Row="1"
                      Grid.RowSpan="1"
                      HorizontalAlignment="Left"
                      VerticalAlignment="Stretch"
                      Background="Green"
                      ShowsPreview="true"
                      Width="5"/>
       
        <GridSplitter Grid.Column="1"
                      Grid.Row="1"
                      Grid.RowSpan="1"
                      HorizontalAlignment="Left"
                      VerticalAlignment="Stretch"
                      Background="Green"
                      ShowsPreview="true"
                      Width="5"/>

        <Button Content="Button" Grid.Row="1" Grid.Column="1" Margin="13,13,6,6">
        Button>

    Grid>
Window>

(Код становится слишком большим, надо будет придумать что-нибудь, чтобы код не загромождал статью).



Попробуйте поменять различные параметры, поймите, что за что отвечает.

Теперь давайте познакомимся с некоторыми полезными приемами, которые позволят изменять интерфейс контента (кнопок, сеток и т.д.). Для начала узнаем, что такое градиент. Градиент – это плавное изменение цвета. Его нужно привязывать к контенту. Вставьте в пространство, между <Button …> следующий код:

            <Button.Background>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Yellow" Offset="0"/>
                    <GradientStop Color="Red" Offset="1"/>
                LinearGradientBrush>
            Button.Background>

Запускайте и смотрите.



Здесь вы видите, что мы прописываем фон нашего контента (Button.Background). Этот принцип можно применять не только к кнопкам, но и другому контенту (как я уже сказал), мы сейчас это посмотрим.

Но сначала познакомимся еще с одним контейнером – Border (переводится как граница). Я уже говорил, что этот контейнер применяется тогда, когда надо создать границу. Для Border можно задать отступ от границы того, в чем этот Border определен (Margin=”10” создает отступ в 10 пикселей). Кроме того, можно сделать закругление углов BorderaCornerRadius=”20”. И еще, как уже было сказано, к различным элементам (сюда входит и Border) можно применить цветовое градиентное оформление. Вставьте код и радуйтесь:

<Window x:Class="Lauoyt_3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" WindowStartupLocation="CenterScreen">
    <Border Margin="10" CornerRadius="20">
        <Border.Background>
            <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                <GradientStop Color="Yellow" Offset="0"/>
                <GradientStop Color="Red" Offset="1"/>
            LinearGradientBrush>
        Border.Background>
        <Border Margin="10" CornerRadius="20">
            <Border.Background>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Yellow" Offset="1"/>
                LinearGradientBrush>
            Border.Background>
            <Border Margin="10" Background="Wheat" CornerRadius="20">
                <Button Content="Button" Margin="10">
                    <Button.Background>
                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                        <GradientStop Color="Green" Offset="0"/>
                        <GradientStop Color="Blue" Offset="1"/>
                        LinearGradientBrush>
                    Button.Background>
                Button>
            Border>
        Border>
    Border>
Window>



В следующей статье я закончу описание создания графического интерфейса - я расскажу о том, как загружать картинки к нам на форму (либо в какой-нибудь контейнер).

Комментариев нет:

Отправить комментарий