要显示多个路径的元素

本文关键字：元素 路径 显示 | 更新日期: 2023-09-27 18:32:57

我想创建一个包含以下元素的 WPF 窗口：

在右侧的"添加"按钮可添加新路径。如果单击该按钮，则会出现一个打开的文件对话框，用户可以选择一个文件。文件路径应显示在窗口中。选择文件后，"添加"按钮转换为删除按钮和两个箭头（向下或向上推路径）。

如果已添加第一个路径，并且添加按钮转换为删除和箭头按钮，则第一行下方应显示下一个添加按钮。

哪些元素（数据网格等）最适合实现这一点？

要显示多个路径的元素

我不一定会将"添加"按钮转换为其他按钮，在我看来可以更容易地完成：

  1. 使用Grid将 FilePath 项与"确定"和"取消"按钮分开
  2. 使用Stackpanel堆叠ItemsControl和"添加"按钮
    3. 。
  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>

当然，你必须添加边距，更详细的定位，样式和绑定自己。

相关文章：