#012 Стандартные контролы WPF

Эту статью я хочу посвятить изучению контролов, которые есть в арсенале разработчика на Avalon. Почему мы не говорили подробно о них ранее? Потому, что целью предыдущих 11 статей было последовательное введение читателя в новую технологию, в принципы работы с ней и акценты ставились прежде всего на преимущества WPF по сравнению с программированием на .NET . Сейчас читатель вплотную подходит к моменту, когда можно начинать создание своего приложения для WPF или модернизации имеющегося кода для работы с новой системой. Именно поэтому дальнейшие статьи будут носить прикладной характер в большей степени, чем предыдущие. И начнем мы практическое освоение WPF именно с контролов.

Современное понятие Rich User Interface - это, пожалуй, главное условие популярности именно вашей программы. В то время, когда существует масса программ, выполняющих одни и те же функции, выбор пользователя, скорее всего, остановится на той, которую проще и удобнее использовать. User Interface начинается с контролов - стандартных или уникальных, свойственных только данной конкретной программе. Эта статья - обзор стандартных контролов Avalon.
Создайте новый проект типа WinFX Windows Application и назовите его "MyWPFcontrols"
Отредактируйте XAML-код вашего окна, чтобы он принял следующий вид:

<Window x:Class="Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Котролы WPF"

    >

    <Grid>

      <ScrollViewer>

        <WrapPanel >

          

          

        </WrapPanel>

      </ScrollViewer>

    </Grid>

</Window>

ode]
Все элементы будут размещены внутри контейнера Grid. Обратите внимание на элемент ScrollViewer - этот элемент создает "прокручиваемую" область для всех элементов, находящихся внутри него. Использование этого элемента позволит нам не беспокоиться о размещении элементов на форме - если их количество превысит емкость формы, будут созданы полосы прокрутки, которые позволят нам увидеть все размещенные элементы. С контейнером WrapPanel вы уже знакомы по статье № 006.

Также для наглядности мы будем группировать контролы внутри контейнера типа HeaderedItemsControl. Но прежде чем начать, давайте зададим стиль для этого контейнера (для изучения начальной информации о стилях обратитесь к статье 006). Мы создадим два стиля - для вертикального и горизонтального HeaderedItemsControl. Для этого внесите изменения в блок ресурсов вашего окна:

<Window.Resources >

    <Style x:Key="VerticalHIC" TargetType="{x:Type HeaderedItemsControl}">

      <Setter Property="Template">

        <Setter.Value>

          <ControlTemplate TargetType="{x:Type HeaderedItemsControl}">

            <StackPanel Margin="20">

              <ContentPresenter 

                Grid.Row="0" 

                Margin="8,20,0,0" 

                TextBlock.Foreground="#AAA" 

                TextBlock.FontFamily="Trebuchet MS" 

                TextBlock.FontSize="14px" 

                TextBlock.FontWeight="Bold" 

                ContentSource="Header" />

              <StackPanel

                IsItemsHost="True"

                Orientation="Vertical" 

                Grid.Row="1" 

                VerticalAlignment="Center" 

                HorizontalAlignment="Center" />

            </StackPanel>

          </ControlTemplate>

        </Setter.Value>

      </Setter>

    </Style>

    <Style x:Key="HorizontalHIC" TargetType="{x:Type HeaderedItemsControl}">

      <Setter Property="Template">

        <Setter.Value>

          <ControlTemplate TargetType="{x:Type HeaderedItemsControl}">

            <StackPanel Margin="20">

              <ContentPresenter 

                Grid.Row="0" 

                Margin="8,20,0,0" 

                TextBlock.Foreground="#AAA" 

                TextBlock.FontFamily="Trebuchet MS" 

                TextBlock.FontSize="14px" 

                TextBlock.FontWeight="Bold" 

                ContentSource="Header" />

              <StackPanel

                IsItemsHost="True"

                Orientation="Horizontal" 

                Grid.Row="1" 

                VerticalAlignment="Center" 

                HorizontalAlignment="Center" />

            </StackPanel>

          </ControlTemplate>

        </Setter.Value>

      </Setter>

    </Style>

  </Window.Resources>

Стили очень просты и задают внешний вид для наших контейнеров. Для более подробной информации о стилях обратитесь к статье № 006.

Весь последующий код вы будете размещать внутри блоков <WrapPanel>. Давайте приступим к внесению стандартных контролов на форму.

Кнопка - Button:

<!-- Button -->

<HeaderedItemsControl Style="{StaticResource VerticalHIC}" Header="Button">

  <Button Margin="8" IsDefault="True">По умолчанию</Button>

  <Button Margin="8">Обычная</Button>

</HeaderedItemsControl>

t;[/code]
Переключатель - СheckBox:

[code]<!-- CheckBox -->
<HeaderedItemsControl Style="{StaticResource VerticalHIC}" Header="CheckBox">
<CheckBox Margin="8">Обычный</CheckBox>
<CheckBox Margin="8" IsChecked="true">Отмеченный</CheckBox>
<CheckBox Margin="8" IsThreeState="true"
IsChecked="{x:Null}">Неопределенный</CheckBox>
</HeaderedItemsControl>[/code]
Переключатель группы - RadioButton:

[code]<!-- RadioButton -->
<HeaderedItemsControl Style="{StaticResource VerticalHIC}"
Header="RadioButton">
<RadioButton Margin="8">Обычный</RadioButton>
<RadioButton Margin="8" IsChecked="true">Отмеченный</RadioButton>
<RadioButton Margin="8">Обычный</RadioButton>
</HeaderedItemsControl>[/code]
Текстовое поле - TextBox:

[code]<!-- TextBox -->
<HeaderedItemsControl Style="{StaticResource VerticalHIC}" Header="TextBox">
<StackPanel>
<TextBox HorizontalAlignment="Center" Margin="8" Text="Текст" />
<PasswordBox HorizontalAlignment="Center" Margin="8" Password="Password" />
</StackPanel>
</HeaderedItemsControl>[/code]
Раскрывающийся список - ComboBox:

[code]<!-- ComboBox -->
<HeaderedItemsControl Style="{StaticResource VerticalHIC}" Header="ComboBox">
<StackPanel>
<ComboBox Margin="8">
<ComboBoxItem Content="Первый элемент" />
<ComboBoxItem Content="Второй элемент" />
<ComboBoxItem Content="Третий элемент" />
<ComboBoxItem Content="Четвертый элемент" />
<ComboBoxItem Content="Пятый элемент" />
</ComboBox>
<ComboBox Margin="8" IsEditable="True" Text="Отредактируй меня">
<ComboBoxItem Content="Первый элемент" />
<ComboBoxItem Content="Второй элемент" />
<ComboBoxItem Content="Третий элемент" />
<ComboBoxItem Content="Четвертый элемент" />
<ComboBoxItem Content="Пятый элемент" />
</ComboBox>
</StackPanel>
</HeaderedItemsControl>[/code]
Обычный список - ListBox:

[code]<!-- ListBox -->
<HeaderedItemsControl Style="{StaticResource VerticalHIC}" Header="ListBox">
<StackPanel Orientation="Horizontal">
<ListBox Margin="8" SelectionMode="Extended" Height="100">
<ListBoxItem Content="Первый элемент" />
<ListBoxItem Content="Второй элемент" />
<ListBoxItem Content="Третий элемент" />
<ListBoxItem Content="Четвертый элемент" />
<ListBoxItem Content="Пятый элемент" />
<ListBoxItem Content="Шестой элемент" />
<ListBoxItem Content="Седьмой элемент" />
<ListBoxItem Content="Восьмой элемент" />
</ListBox>
<ListBox Margin="8" SelectionMode="Extended"
ScrollViewer.VerticalScrollBarVisibility="Visible" Height="100">
<ListBoxItem Content="Первый элемент" />
<ListBoxItem Content="Второй элемент" />
<ListBoxItem Content="Третий элемент" />
<ListBoxItem Content="Четвертый элемент" />
<ListBoxItem Content="Пятый элемент" />
<ListBoxItem Content="Шестой элемент" />
<ListBoxItem Content="Седьмой элемент" />
<ListBoxItem Content="Восьмой элемент" />
</ListBox>
</StackPanel>
</HeaderedItemsControl>[/code]
Слайдер - Slider:

[code]<!-- Slider -->
<HeaderedItemsControl Style="{StaticResource HorizontalHIC}" Header="Slider">
<StackPanel>
<Slider Margin="8" Orientation="Horizontal" Width ="80" />
<Slider Margin="8" Orientation="Horizontal" TickPlacement="TopLeft" />
<Slider Margin="8" Orientation="Horizontal" TickPlacement="BottomRight" />
<Slider Margin="8" Orientation="Horizontal" TickPlacement="Both"
TickFrequency="2" />
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Slider Margin="8" Orientation="Vertical" Height ="80" />
<Slider Margin="8" Orientation="Vertical" TickPlacement="TopLeft" />
<Slider Margin="8" Orientation="Vertical" TickPlacement="BottomRight" />
<Slider Margin="8" Orientation="Vertical" TickPlacement="Both"
TickFrequency="2" />
</StackPanel>
</HeaderedItemsControl>[/code]
Индикатор прогресса - ProgressBar:

[code]<!-- ProgressBar -->
<HeaderedItemsControl Style="{StaticResource VerticalHIC}"
Header="ProgressBar">
<StackPanel>
<ProgressBar HorizontalAlignment="Center" Margin="8" Value="20"
Width ="120" Height ="15" />
<ProgressBar HorizontalAlignment="Center" Margin="8" Value="90"
Width ="120" Height ="15" />
</StackPanel>
</HeaderedItemsControl> [/code]
Дерево - TreeView:

[code]<!-- TreeView -->
<HeaderedItemsControl Style="{StaticResource VerticalHIC}" Header="TreeView">
<StackPanel>
<TreeView Width="150" Height="150" Margin="8">
<TreeViewItem Header="Основной один">
<TreeViewItem Header="Один" />
<TreeViewItem Header="Два (длиннее обычного)" />
<TreeViewItem Header="Три" />
<TreeViewItem Header="Четыре">
<TreeViewItem Header="Один" />
<TreeViewItem Header="Два" />
<TreeViewItem Header="Три" />
</TreeViewItem>
<TreeViewItem Header="Пять" />
</TreeViewItem>
<TreeViewItem Header="Основной два">
<TreeViewItem Header="Один" />
<TreeViewItem Header="Два" />
<TreeViewItem Header="Три" />
<TreeViewItem Header="Четыре">
<TreeViewItem Header="Один" />
<TreeViewItem Header="Два" />
<TreeViewItem Header="Три" />
</TreeViewItem>
<TreeViewItem Header="Пять" />
</TreeViewItem>
<TreeViewItem Header="Основной три" >
<TreeViewItem Header="Один" />
<TreeViewItem Header="Два" />
<TreeViewItem Header="Три" />
<TreeViewItem Header="Четыре" />
</TreeViewItem>
</TreeView>
</StackPanel>
</HeaderedItemsControl>[/code]
Меню - Menu:

[code]<!-- Menu -->
<HeaderedItemsControl Style="{StaticResource HorizontalHIC}"
Header="Menu / ContextMenu">
<Menu Margin="8" Width="400">
<MenuItem Header="Меню 1">
<MenuItem Header="Подменю 1" InputGestureText="Ctrl+L" />
<MenuItem Header="Подменю 2 (С иконкой)" InputGestureText="Ctrl+A">
<MenuItem.Icon>
<Ellipse Width="16" Height="16" Fill="LightBlue" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Подменю 3" />
<Separator />
<MenuItem Header="Раскрывающееся меню">
<MenuItem Header="Подменю 1" />
<MenuItem Header="Подменю 2" />
<MenuItem Header="Подменю 3" />
</MenuItem>
<MenuItem Header="Подменю 5" />
</MenuItem>
<MenuItem Header="Меню 2">
<MenuItem Header="Подменю 1" />
<MenuItem Header="Подменю 2 (Отмечаемое)" IsCheckable="True" />
<MenuItem Header="Подменю 3" />
</MenuItem>
<MenuItem Header="Меню 3" >
<MenuItem Header="Подменю 1" />
<MenuItem Header="Подменю 2" />
<MenuItem Header="Подменю 3" />
<Separator />
<MenuItem Header="Подменю 4" />
</MenuItem>
</Menu>
</HeaderedItemsControl>[/code]
Всплывающая подсказка - ToolTip:

[code]<!-- ToolTip -->
<HeaderedItemsControl Style="{StaticResource VerticalHIC}" Header="ToolTip">
<StackPanel>
<Border Margin="8" Background="#EEE" Width="150" Height="50"
CornerRadius="2">
<Border.ToolTip>
Это всплывающая подсказка! Ура!
</Border.ToolTip>

<TextBlock Foreground="#AAA" VerticalAlignment="Center"
HorizontalAlignment="Center">
(Проведи тут мышью)
</TextBlock>
</Border>
</StackPanel>
</HeaderedItemsControl>[/code]
Вкладки - TabControl:

[code]<!-- TabControl -->
<HeaderedItemsControl Style="{StaticResource VerticalHIC}"
Header="TabControl">
<StackPanel Orientation="Horizontal">
<TabControl Margin="8" Height="100" Width="225">
<TabItem Header="Один" />
<TabItem Header="Два" />
<TabItem Header="Три" />
<TabItem Header="Четыре" />
</TabControl>
</StackPanel>
</HeaderedItemsControl>[/code]
Контекстное меню - ContextMenu:

[code]<!-- ContextMenu -->
<HeaderedItemsControl Style="{StaticResource VerticalHIC}"
Header="ContextMenu">
<StackPanel>
<Border Margin="8" Background="#EEE" Width="180" Height="50"
CornerRadius="2">
<Border.ContextMenu>
<ContextMenu>
<MenuItem Header="Пункт 1" InputGestureText="Ctrl+L" />
<MenuItem Header="Пункт 2 (С иконкой)"
InputGestureText="Ctrl+A">
<MenuItem.Icon>
<Ellipse Width="16" Height="16" Fill="LightBlue" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Пункт 3" />
<Separator />
<MenuItem Header="Раскрывающийся пункт 4">
<MenuItem Header="Пункт 1" />
<MenuItem Header="Пункт 2" />
<MenuItem Header="Пункт 3" />
</MenuItem>
<MenuItem Header="Пункт 5" />
</ContextMenu>
</Border.ContextMenu>

<TextBlock Foreground="#AAA" VerticalAlignment="Center"
HorizontalAlignment="Center">
(Щелкни по мне правой кнопкой)
</TextBlock>
</Border>
</StackPanel>
</HeaderedItemsControl>[/code]
Экспандер - Exander (знаком вам по приложению "Мой компьютер" в Windows XP):

[code]<!-- Expander -->
<HeaderedItemsControl Style="{StaticResource VerticalHIC}" Header="Expander">
<StackPanel Orientation="Horizontal">
<Expander Width="200" Margin="8" Header="Это заголовок">
<Border Height="100" />
</Expander>
</StackPanel>
</HeaderedItemsControl>[/code]
Средство группировки - GroupBox:

[code]<!-- GroupBox -->
<HeaderedItemsControl Style="{StaticResource VerticalHIC}" Header="GroupBox">
<StackPanel>
<GroupBox Margin="8" Header="Это заголовок" Width="200" >
<Border Height="100" />
</GroupBox>
</StackPanel>
</HeaderedItemsControl>[/code]

Давайте посмотрим на результат:



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

Не удаляйте этот проект так как мы продолжим работать с ним в следующей статье! Также я бы рекомендовал оставить этот проект как наработку для ваших собственных приложений. Если у вас возникнут вопросы по использованию того или иного контрола, вы сможете воспользоваться своим проектом как справочным материалом!

В связи с объемностью вышеизложенного материала я приведу XAML-листинг проекта в сокращенной, схематичной форме:

[code]<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Котролы WPF"
>
<Window.Resources >
<Style x:Key="VerticalHIC" TargetType="{x:Type HeaderedItemsControl}">
Содержание стиля
</Style>
<Style x:Key="HorizontalHIC" TargetType="{x:Type HeaderedItemsControl}">
Содержание стиля
</Style>
</Window.Resources>

<Grid>
<ScrollViewer>
<WrapPanel >
Код для элемента Button
Код для элемента CheckBox
Код для элемента RadioButton
Код для элемента TextBox
Код для элемента ComboBox
Код для элемента ListBox
Код для элемента Slider
Код для элемента ProgressBar
Код для элемента TreeView
Код для элемента Menu
Код для элемента ToolTip
Код для элемента TabControl
Код для элемента ContextMenu
Код для элемента Expander
Код для элемента GroupBox

</WrapPanel>
</ScrollViewer>
</Grid>
</Window>[/code]
В завершение статьи небольшое послесловие. Несмотря на громоздкость и "скучность" изложенного материала, в статье используются важнейшие приемы - такие как, использование стилей, работа со всеми контролами, использование вложенных контейнеров для обеспечения автоматической разметки элементов окна (это, кстати, является рекомендацией Microsoft по построению приложений - отказ от фиксированных размеров окон и динамическая разметка).

Данная информация является важнейшим этапом в изучении технологии WPF.