Каких элементов, чтобы показать несколько путей

Question

Я хочу создать окно WPF со следующими элементами:

На правой стороне кнопки «Добавить», чтобы добавить новый путь. Если вы нажмете кнопку, откроется диалоговое окно с открытым файлом, и пользователь может выбрать файл. Путь к файлу должен отображаться в окне. После выбора файла кнопка «добавить» преобразуется в кнопку удаления и две стрелки (для перемещения вниз или вверх по пути).

Если вы добавили первый путь и кнопку добавления, преобразованную в кнопки удаления и стрелки, под первой строкой должна появиться следующая кнопка добавления.

Какие элементы (datagrid, ...) были бы лучше всего понятны?

Answer 1

Я не обязательно преобразуем кнопку «Добавить» в других, это может быть сделано гораздо проще, на мой взгляд:

1. Использовать Grid разделить элементы Filepath от «Ok» и " Cancel "
2. Используйте Stackpanel для складывания ItemsControl и кнопки« Добавить »друг над другом.
3. Используйте свойство ItemTemplate, чтобы создать макет для элементов FilePath, который может быть Grid с колонками для размещения кнопок.

Базовая структура в XAML:

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition /> 
     <RowDefinition 
      Height="Auto" /> 
    </Grid.RowDefinitions> 
    <StackPanel> 
     <ItemsControl> <!-- Control to display a collection of FilePath items --> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Grid> <!-- Template for FilePath item --> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition /> 
          <ColumnDefinition 
           Width="Auto" /> 
          <ColumnDefinition 
           Width="Auto" /> 
          <ColumnDefinition 
           Width="Auto" /> 
         </Grid.ColumnDefinitions> 
         <TextBox /> <!-- FilePath textbox --> 
         <Button 
          Grid.Column="1" 
          Content="Del" /> <!-- Delete button --> 
         <Button 
          Grid.Column="2" 
          Content="Up" /> <!-- Up button --> 
         <Button 
          Grid.Column="3" 
          Content="Down" /> <!-- Down button--> 
        </Grid> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
     <Button 
      Content="Add" 
      HorizontalAlignment="Right" /> <!-- Add button --> 
    </StackPanel> 
    <StackPanel 
     Grid.Row="1" 
     Orientation="Horizontal" 
     HorizontalAlignment="Right"> 
     <Button 
      Content="Ok" /> <!-- Ok button --> 
     <Button 
      Content="Cancel" /> <!-- Cancel button --> 
    </StackPanel> 
</Grid> 

Конечно, вы должны добавить поля, более подробное позиционирование, стили и связывания себя.