The following forum(s) are migrating to a new home on Microsoft Q&A (Preview): Developing Universal Windows apps!

Ask new questions on Microsoft Q&A (Preview).
Interact with existing posts until December 13, 2019, after which content will be closed to all new and existing posts.

Learn More

 none
[UWP][Xaml] Custom ListViewItem with clickable buttons inside RRS feed

  • Question

  • Hello guys

    i want to make a ListView that has custom ListViewItem and i want inside each ListViewItem 2 buttons, and when one of the buttons is clicked i want the related ListViewItem to be deleted and the other one creates a ListViewItem and insert it next to the related ListViewItem.

    I was searching around but didn't find an answer, if you guys can help me i will be very thankful.

    Thanks in advance.


    • Edited by Lersubem Sunday, September 23, 2018 1:37 PM
    Sunday, September 23, 2018 1:36 PM

Answers

  • @Issmat,

    To know which item to delete. There are some exist ideas and you have to choose one as your option:

    1. A easy workaround is to use tag. Like this thread mentioned. Binding to tag and remove by searching for tag.

    2. Use command, see here  where jayden showed the code.

    By the way, visualtreehelper is an option but it should not be raised on forum. So if you really want to use visualtreehelper you need to search for it yourself.

    Best regards,

    Barry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by Lersubem Tuesday, July 9, 2019 10:57 PM
    Tuesday, September 25, 2018 9:37 AM

All replies

  • Hello Lersubem,

    First of all, to customize your ListViewItem you need to edit the item template. Here is the reference doc:

    https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/item-templates-listview

    Define the itemtemplate with your own code and then you can add two buttons in your template. 

    Then you can write your code for the button click event to do want you want. 

    For something around custom control, you can start from here https://channel9.msdn.com/Events/Build/2017/B8035

    The key point specific to your issue is to re style your template. If you have any question please feel free to let me know.

    Best regards,

    Barry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, September 24, 2018 9:16 AM
  • Hello again

    Sorry but i still don't know how to do that, :(

    what i have so far is

                    <ListView x:Name="ListView_Accounts" Padding="20,20,20,0" Grid.Row="2">
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                                <Setter Property="Padding" Value="0"/>
                                <Setter Property="Margin" Value="0"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="User:Account">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Controls:Image Margin="10,10,10,15" Width="50" Height="50" RadiusX="14" RadiusY="14"
                                                                ImageSource="{x:Bind Profile.Avatar ,Converter={StaticResource ByteToImageSourceConverter}, Mode=OneWay}"/>
                                    <StackPanel VerticalAlignment="Center" Grid.Column="1" Margin="14,10,0,10">
                                        <TextBlock FontSize="15" Text="{x:Bind Credentials.Username, Mode=OneWay}"/>
                                        <Button Content="Delete"/>
                                    </StackPanel>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

    And i want account to be deleted when the delete button is clicked, i tried to make click event on the button Delete but when that event is raised i can't know which account's button is clicked

    Kind regards
    Issmat

    Tuesday, September 25, 2018 2:12 AM
  • @Issmat,

    To know which item to delete. There are some exist ideas and you have to choose one as your option:

    1. A easy workaround is to use tag. Like this thread mentioned. Binding to tag and remove by searching for tag.

    2. Use command, see here  where jayden showed the code.

    By the way, visualtreehelper is an option but it should not be raised on forum. So if you really want to use visualtreehelper you need to search for it yourself.

    Best regards,

    Barry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by Lersubem Tuesday, July 9, 2019 10:57 PM
    Tuesday, September 25, 2018 9:37 AM