Shankar Raju
Shankar Raju

Reputation: 4546

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

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,

Upvotes: 0

Views: 144

Answers (2)

Leo
Leo

Reputation: 7449

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>

Upvotes: 0

Buzz
Buzz

Reputation: 6330

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.

Upvotes: 1

Related Questions