Добавление содержимого диалогового окна

На это страницу вы узнаете, как добавить содержимое в диалоговое окно. Речь идет о компонентах UI для поиска, а также кнопки закрытия диалогового окна. Также будет добавлен список элементов с заполнителем по-умолчанию для обложек альбомов, которые мы потом загрузим при поиске.

Для размещения компонентов диалогового окна, мы будем использовать dock panel, который является частью стандартной библиотеки Avalonia UI. С его помощью, мы расположим строку поиска в верхней части окна, а кнопку внизу. Список будет заполнять всю свободную площадь dock panel, то есть все оставшуюся зону содержимого.

к сведению

Подробнее об элементе dock panel, см. здесь.

Dock panel будет расположена внутри user control из Avalonia UI. Это сделано для того, чтобы отделить код отображения диалогового окна от кода управляющего им компонентов.

к сведению

Подробнее о Компоновке UI, см. здесь.

Для добавления user control и составных компонентов диалогового окна, выполните следующие действия:

• Остановите приложение, если оно запущено.
• В обозревателе решений нажмите ПКМ по папке /Views и выберите Add.
• Нажмите Avalonia User Control.
• При появлении запроса на ввод, укажите 'MusicStoreView'.
• Нажмите Enter.
• Измените в XAML зону содержимого user control, как показано ниже:

<UserControl ... >
  <DockPanel>
    <StackPanel DockPanel.Dock="Top">
      <TextBox Watermark="Search for Albums...." />
      <ProgressBar IsIndeterminate="True"  />
    </StackPanel>
      <Button Content="Buy Album" 
              DockPanel.Dock="Bottom" 
              HorizontalAlignment="Center" />
      <ListBox/>
  </DockPanel>
</UserControl>

Внутри диалогового окна, пользователь может вести поиск альбомов посредством Web API. Но данная процедура занимает время, в связи с чем мы добавили шкалу прогресса, которая будет активна во время поиска. Данный аспект повышает отзывчивость интерфейса для пользователя.

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

Нашим следующим шагом, будет добавление нового user control в зону содержимого диалогового окна.

Для добавления user control, выполните следующие действия:

• Найдите и откройте файл MusicStoreWindow.axaml.
• В элемент <Window>, добавьте пространство имен для views:

<Window ...
    xmlns:views="using:Avalonia.MusicStore.Views" >    

• Внутри элемента Panel, добавьте новый элемент MusicStoreView:

<Panel Margin="40">
   <views:MusicStoreView/>
</Panel>

Вы увидите, что компоненты UI появятся на панели предпросмотра.

На следующей страницу вы узнаете, как имитировать функцию поиска альбомов, чтобы создать view и view model для просмотра результатов, а реализацию реального поиска оставить на потом.