<ToolBar Name="InkToolBar" Height="60">
</ToolBar>
Добавьте в
Toolbar
три элемента управления
RadioButton
внутри панели
WrapPanel
и элемента управления
Border
:
<Border Margin="0,2,0,2.4" Width="280" VerticalAlignment="Center">
<WrapPanel>
<RadioButton x:Name="inkRadio" Margin="5,10"
Content="Ink Mode!" IsChecked="True" />
<RadioButton x:Name="eraseRadio" Margin="5,10" Content="Erase Mode!" />
<RadioButton x:Name="selectRadio" Margin="5,10" Content="Select Mode!" />
</WrapPanel>
</Border>
Когда элемент управления
RadioButton
помещается не внутрь родительской панели, он получает пользовательский интерфейс, идентичный пользовательскому интерфейсу элемента управления
Button
! Именно потому элементы управления
RadioButton
были упакованы в панель
WrapPanel
.
Далее добавьте элемент
Separator
и элемент
ComboBox
, свойство
Width
которого установлено в
175
, а свойство
Margin
— в
10,0,0,0
. Добавьте три дескриптора
ComboBoxItem
с содержимым
Red
,
Green
и
Blue
и сопроводите весь элемент управления
ComboBox
еще одним элементом
Separator
:
<Separator/>
<ComboBox x:Name="comboColors" Width="175" Margin="10,0,0,0">
<ComboBoxItem Content="Red"/>
<ComboBoxItem Content="Green"/>
<ComboBoxItem Content="Blue"/>
</ComboBox>
<Separator/>
Элемент управления RadioButton
В данном примере необходимо, чтобы три добавленных элемента управления
RadioButton
были взаимно исключающими. В других инфраструктурах для построения графических пользовательских интерфейсов такие связанные элементы требуют помещения в одну групповую рамку. Поступать подобным образом в WPF нет нужды. Взамен элементам управления просто назначается то же самое
групповое имя, что очень удобно, поскольку связанные элементы не обязаны физически находиться внутри одной области, а могут располагаться где угодно в окне.
Класс
RadioButton
имеет свойство
IsChecked
, значения которого переключаются между
true
и
false
, когда конечный пользователь щелкает на элементе пользовательского интерфейса. К тому же элемент управления
RadioButton
предоставляет два события (
Checked
и
Unchecked
), которые можно применять для перехвата такого изменения состояния.
Добавление кнопок сохранения, загрузки и удаления
Финальным элементом управления внутри
ToolBar
будет
Grid
, содержащий три элемента управления
Button
. Поместите после последнего элемента управления
Separator
следующую разметку:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" x:Name="btnSave" Margin="10,10"
Width="70" Content="Save Data"/>
<Button Grid.Column="1" x:Name="btnLoad" Margin="10,10"
Width="70" Content="Load Data"/>
<Button Grid.Column="2" x:Name="btnClear" Margin="10,10"
Width="70" Content="Clear"/>
</Grid>
Добавление элемента управления InkCanvas
Финальным элементом управления для
TabControl
является
InkCanvas
. Поместите показанную ниже разметку после закрывающего дескриптора
ToolBar
, но перед закрывающим дескриптором
StackPanel
:
<InkCanvas x:Name="MyInkCanvas" Background="#FFB6F4F1" />
Предварительный просмотр окна
Теперь все готово к тестированию программы, для чего понадобится нажать клавишу <F5>. Должны отобразиться три взаимно исключающих переключателя, раскрывающийся список с тремя элементами и три кнопки (рис. 25.17).
