<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 нет нужды. Взамен элементам управления просто назначается то же самое групповое имя, что очень удобно, поскольку связанные элементы не обязаны физически находиться внутри одной области, а могут располагаться где угодно в окне.
(window.adrunTag = window.adrunTag || []).push({v: 1, el: 'adrun-4-390', c: 4, b: 390})
Класс 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).
![]()
