How to provide a close functionality to delete an item from StackPanel?

Question

I have a UserControl which I need to keep adding to a StackPanel during runtime (per User's action). I want a close button (a small 'x') on the right side top corner for each item in StackPanel.

I could do this: add my UserControl to some Panel which has the 'x' button that glows on mouse hover, which when clicked deletes the item from the StackPanel.

However, I am looking for a better solution to this problem. Like is there any control out there which offers a similar functionality?

I was looking for TileView. All I need is a single row of Tiles which keep added per users input, and have the ability to delete a "Tile". Each tile would contain my UserControl.

Please let me know,

score 1 · Answer 1 · answered Aug 30 '12 at 05:05

1

you can use tileview, but Grid can work here too, you can add you usercontrol to a cell and on other cell you can give a close button and on the close button click you can remove that row from the grid ,
if you are going to add more than one usercontrol than Grid can be easily maintain.

answered Aug 30 '12 at 05:05

Buzz

6,030
4
33
47

+1 for an alternative solution. However, I want my user control to be added horizontally, like the StackPanel's Orientation="Horizontal" in my case. Also, is this the only approach? Is there any other idea that you can think of? – Shankar Raju Aug 30 '12 at 05:11
if you want only Horizontal orientaion i would suggest to use only one row ,coulum can be added or removed dynamically as per the need. – Buzz Aug 30 '12 at 06:34

score 0 · Answer 2 · answered Aug 31 '12 at 11:53

You can do this easily with the ItemsControl. Think of it like a ListBox without the selection. Just modify it a little:

 <ItemsControl HorizontalAlignment="Center" VerticalAlignment="Center">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Padding="4" Background="CornflowerBlue">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>

                        <Button Content="Close" HorizontalAlignment="Right"/>


                        <Grid Margin="4" Grid.Row="1">
                           <!-- put your usercontrol here -->
                        </Grid>

                    </Grid>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

How to provide a close functionality to delete an item from StackPanel?

2 Answers2