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 пикселей). Кроме того, можно сделать закругление углов Border’a – CornerRadius=”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>

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