Статьи

Элементы управления вводом в Silverlight

Октябрь 18, 2018

До сих пор я не тратил много времени на элементы управления вводом. Когда мне понадобился пример, я просто быстро создал проект, который, вероятно, содержал бы элемент управления текстовым полем, элемент управления текстовым блоком и / или элемент управления кнопки. Но, как я видел в других приложениях, существуют другие типы элементов управления вводом, которые позволяют пользователю вводить различные типы информации. Сегодня я получаю небольшой обзор основных элементов управления вводом, используемых в Silverlight.

Я не использую панель инструментов, я просто ввожу все определения в свою панель XAML. Это дает мне возможность поближе познакомиться с XAML. В конце концов, я новичок, а новичкам нужны дополнительные упражнения, верно?

Кроме того, я использую Grid, чтобы все мои элементы управления вводом были хорошо организованы. Больше физических упражнений. В этой записи блога вы можете найти дополнительную информацию об элементах управления Layout в Silverlight с точки зрения новичка.

Я определил 7 строк и 3 столбца:

<Grid.RowDefinitions>
    <RowDefinition Height="75*" />
    <RowDefinition Height="75*" />
    <RowDefinition Height="75*" />
    <RowDefinition Height="75*" />
    <RowDefinition Height="75*" />
    <RowDefinition Height="75*" />
    <RowDefinition Height="75*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="160*" />
    <ColumnDefinition Width="10" />
    <ColumnDefinition Width="250*" />
</Grid.ColumnDefinitions>

Давайте продолжим и разместим некоторые элементы управления вводом в каждой из ячеек, которые я только что определил.

Я собираюсь начать с элемента управления TextBox. TextBox позволяет пользователю вводить значения с помощью области ввода или, скорее, экранной клавиатуры. Я также создал событие TextChanged, которое срабатывает каждый раз, когда пользователь вводит новое значение:

<TextBox Name="myTextBox"
         Width="250"
         Height="70"
         Grid.Column="2"
         Grid.Row="0"
         HorizontalAlignment="Stretch"
         VerticalAlignment="Stretch"
         TextChanged="myTextBox_TextChanged" />

Следующий элемент управления, который я хочу показать, это PasswordBox. Это выглядит очень похоже на TextBox. PasswordBox имеет ограниченную полезность, хотя. Это полезно в ситуациях, когда я хочу разрешить пользователю вводить значения, которые не видны другим, кто может смотреть через плечо пользователя. Его объявление почти идентично объявлению Textbox. Есть два тонких различия. Сначала доступно событие PasswordChanged. А во-вторых, вместо свойства Text здесь используется свойство Password:

<PasswordBox Name="myPasswordBox"
             Width="250"
             Height="70"
             Grid.Column="2"
             Grid.Row="1"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             PasswordChanged="myPasswordBox_PasswordChanged" />

Предполагая, что пользователю нужен простой ответ «да» или «нет», я мог бы позволить ему ввести значение в текстовое поле или использовать еще один элемент управления, CheckBox. Элемент управления CheckBox ограничивает ввод пользователя значением true или false:

<CheckBox Name="myCheckBox"
          Content="Are you sure you want to do this?"
          Grid.ColumnSpan="3"
          Grid.Row="2"
          HorizontalAlignment="Stretch"
          VerticalAlignment="Stretch"
          Checked="myCheckBox_Checked" />

Несколько вещей, на которые я хочу обратить внимание. Прежде всего, CheckBox имеет свойство содержимого, которое отображается справа от самого CheckBox. Во-вторых, есть событие Checked, которое я могу обработать. Поэтому, когда пользователь нажимает на CheckBox, он запускает событие. И в-третьих, это отличная демонстрация того, как распределить один элемент управления по нескольким столбцам с помощью свойства ColumnSpan. Я знал, что содержимое не помещается в первый столбец, поэтому я позволил ему использовать больше места. Я позволил ему охватить все три столбца.

Если бы я хотел, чтобы пользователь выбирал между несколькими вариантами, я бы использовал вместо этого элемент управления RadioButton:

<RadioButton Name="myRadioButton1"
             Content="Female"
             Grid.Column="3"
             Grid.Row="3"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             GroupName="myGroup"
             IsChecked="True" />
<RadioButton Name="myRadioButton2"
             Content="Male"
             Grid.Column="3"
             Grid.Row="4"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             GroupName="myGroup" />

Каждый RadioButton является независимым, но свойство GroupName, которое я установил для «myGroup» на обеих моих RadioButton, является свойством, которое собирает их вместе. Они «работают в команде». Другими словами, когда выбран один RadioButton, любой другой RadioButton в той же группе автоматически отменяется. Я установил для свойства по умолчанию IsChecked на первом RadioButton значение «True». На самом деле в этом нет необходимости, но в работающем приложении это хорошее визуальное напоминание для пользователя, чтобы увидеть, каково предназначение этих кнопок RadioButton. Пользователь видит, что ему нужно выбрать один из них. Если предварительно выбранный по умолчанию вам не подходит, обязательно нажмите на другой.

Элемент управления RadioButton также поддерживает событие Checked, как и CheckBox, который я пока не использовал.

Мне нужно помнить, что когда я собираюсь получить значение, я должен быть немного изобретателен в том, как выяснить, какая RadioButton из этих двух была выбрана.

Но сначала я хочу добавить еще один элемент управления вводом. Допустим, у меня есть несколько вариантов на выбор, и я хочу позволить пользователю выбрать одно или несколько значений из этого списка, я бы выбрал элемент управления ListBox. ListBox немного сложнее, чем эти другие элементы управления, потому что ListBox будет содержать другие элементы управления внутри него, элементы управления ListBoxItem:

<ListBox Name="myListBox"
         Grid.Row="5"
         Grid.ColumnSpan="3"
         Grid.RowSpan="2"
         SelectionChanged="myListBox_SelectionChanged">
    <ListBoxItem Content="First Option" />
    <ListBoxItem Content="Second Option" />
    <ListBoxItem Content="Third Option" />
    <ListBoxItem Content="Fourth Option" />
    <ListBoxItem Content="Fifth Option" />
    <ListBoxItem Content="Sixth Option" />
    <ListBoxItem Content="Seventh Option" />
    <ListBoxItem Content="Eighth Option" />
</ListBox>

В моем ListBox у меня есть восемь ListBoxItems, каждый из которых имеет свойство Content, которое я просто устанавливаю в простую строку.

Запустим приложение:

input1

Все хорошо на месте. Просто ListBox не показывает все элементы одновременно. Я могу использовать курсор мыши там, чтобы имитировать палец на реальном устройстве, и прокручивать мой список. Я могу управлять выбранным элементом с помощью события SelectionChanged.

На данный момент я сталкиваюсь с небольшой проблемой. Мне нужно добавить элемент управления Button в самый конец моей основной формы. Мне нужно найти способ сделать это, потому что сейчас нет свободного места. Я выбежал из космоса вертикально. Мне нужен какой-то способ, чтобы позволить пользователю прокрутить вниз, чтобы увидеть остальную часть моего приложения. К счастью, есть простой способ дооснастить эту функцию с помощью элемента управления ScrollView. ScrollViewer создает небольшое окно для информации, которую он содержит в себе.

Поэтому я возвращаюсь к моей ContentPanel в своем коде XAML и добавляю ScrollViewer:

<ScrollViewer Margin="0,175,0,0"
              Height="500"
              VerticalScrollBarVisibility="Visible">

Я просто должен убедиться, что я не забыл конечный тег ScrollViewer после моей сетки содержимого.

По сути, я теперь обернул ScrollViewer вокруг моей Content Grid.

Теперь, когда у меня есть немного места, я хочу добавить свою кнопку. Сначала я должен добавить еще одну строку в коллекцию Grid.RowDefinition. Теперь я могу добавить свое определение Button после определения ListBox:

<Button Name="myButton"
        Grid.Row="7"
        Grid.Column="2"
        Content="OK"
        Click="myButton_Click" />

Теперь я могу прокрутить вниз до самого конца этого приложения, пока не увижу только что созданную кнопку:

input2

Я мог бы перетащить ScrollViewer из панели инструментов в мою основную форму, но, поскольку все говорят, что как разработчик Windows Phone я должен понимать XAML, давайте даже не будем идти туда. В конце концов, мой код работает, так зачем его менять?

В любом случае, кнопка указывает на то, что при нажатии кнопки необходимо предпринять определенные действия. В XAML я могу установить свойства для моей кнопки, такие как внешний вид или содержимое, но я вроде полагаюсь на кнопку, чтобы предоставить событие нажатия, чтобы я мог написать код для обработки. Щелкнув правой кнопкой мыши по этому событию click в моем коде XAML, я могу перейти непосредственно к этому обработчику события click в C #. Что я хочу сделать, это получить все значения элементов управления, которые я добавил:

    private void myButton_Click(object sender, RoutedEventArgs e)
    {
        string textBoxValue = myTextBox.Text;
        string passwordBoxValue = myPasswordBox.Password;
     
        bool? checkBoxValue = myCheckBox.IsChecked;
     
        string radioButtonValue = "";
        if (myRadioButton1.IsChecked == true)
        {
            radioButtonValue = "Female";
        }
        else
        {
            radioButtonValue = "Male";
        }
     
        ListBoxItem lbI = (ListBoxItem)myListBox.SelectedItem;
        string listBoxItem = (string)lbI.Content;
     
        //write code here to save data on the phone or online
    }

Продолжение следует …

Источник:  http://andreahaubner.blog.com/2011/02/25/input-controls-in-silverlight/

36
Share: