Which elements to show multiple paths

Question

I want to create a WPF window with the following elements:

On the right side a button "Add" to add a new path. If you click the button, an open file dialog occurs and the user can select a file. The filepath should be displayed in the window. After the selection of the file, the "add" button transformed into a delete button and two arrows (to push down or up the path).

If you have added the first path and the add button transformed into the delete and arrow buttons, below the first row should appear the next add button.

Which elements (datagrid, ...) would be the best to realize that?

score 1 · Accepted Answer · answered Dec 03 '14 at 08:48

I wouldn't necessarily transform the "Add" button into other ones, it could be done much easier in my opinion:

Use a Grid to divide the FilePath items from the "Ok" and "Cancel" buttons
Use a Stackpanel to stack a ItemsControl and the "Add" button on top of each other.
Use the ItemTemplate property to create the layout for the FilePath items, which could be a Grid with columns to position the buttons.

Basic structure in 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>

Of course you'll have to add margins, more detailed positioning, styles and binding yourself.

But I need also the SelectedItem. ItemsControl does not support that right? — Struct, Dec 03 '14 at 14:04
Negative, in that case you should use a `ListView`, but that also gives you new features that you might not want. If you need `SelectedItem` to identify the item of which one of the buttons was clicked, there are better implementations. For example, when using MVVM, you can send a `CommandParameter` of the clicked item to your ViewModel. But that's actually a whole different question. — Sjeijoet, Dec 03 '14 at 14:34
If you're using MVVM, this topic might be interresting for you: http://stackoverflow.com/questions/1939907/binding-to-currentitem-in-a-itemscontrol/1940031#1940031 — Sjeijoet, Dec 03 '14 at 14:53
Sorry, I just realized, I meant `ListBox` in my first comment. — Sjeijoet, Dec 04 '14 at 09:57

Which elements to show multiple paths

1 Answers1