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 expandable ListViewItem with clickable buttons inside RRS feed

  • Question

  • Hello,

                    <ListView Name="ListView_ActiveAccount_Friends" Visibility="Visible" IsItemClickEnabled="True" SelectionMode="Single" SelectionChanged="ListView_ActiveAccount_Friends_SelectionChanged">
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="Community:Profile">
                                <Grid x:Name="ContentPresenterGrid"
                                  Background="Transparent"
                                  HorizontalAlignment="Stretch"
                                  Margin="0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Controls:Image x:Name="Avatar" ImageSource="{x:Bind Avatar, Converter={StaticResource ByteToImageSourceConverter}, Mode=OneWay}" Grid.Column="0" Margin="10" Width="40" Height="40" RadiusX="15" RadiusY="15"/>
                                    <Ellipse Grid.Column="0" Width="12.5" Height="12.5" Margin="40,38,8,10" StrokeThickness="1.2">
                                        <Ellipse.Stroke>
                                            <SolidColorBrush Color="Gray"/>
                                        </Ellipse.Stroke>
                                        <Ellipse.Fill>
                                            <SolidColorBrush Color="{x:Bind DisplayState, Converter={StaticResource DisplayStateToColorConverter}, Mode=OneWay}"/>
                                        </Ellipse.Fill>
                                    </Ellipse>
                                    <StackPanel VerticalAlignment="Center" Grid.Column="1" Margin="14,10,0,10">
                                        <TextBlock FontSize="15" Text="{x:Bind DisplayName, Mode=OneWay}"/>
                                        <!--<TextBlock FontSize="12" Text="{x:Bind ExtraInfo, Mode=OneWay}" Visibility="{x:Bind ExtraInfo, Converter={StaticResource TextLenghToVisibilityConverter}, Mode=OneWay}"/>-->
                                    </StackPanel>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                                <Setter Property="Padding" Value="0"/>
                                <Setter Property="Margin" Value="0"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                    </ListView>


    I have that listview and i want the app shows the profile page of a friend by clicking the avatar in the listview, and i want the chat box to be opened when the user click on the display name of the friend, i tried to do like this

                                    <Controls:Image x:Name="Avatar" ImageSource="{x:Bind Avatar, Converter={StaticResource ByteToImageSourceConverter}, Mode=OneWay}" Grid.Column="0" Margin="10" Width="40" Height="40" RadiusX="15" RadiusY="15" PointerPressed="Avatar_PointerPressed"/>

    But this way i cant know which avatar is clicked, any idea how i can achieve that?


    sorry for bad english

    with kind regards



    Tuesday, August 14, 2018 1:46 PM

Answers

  • Hi,

    Based on your requirement, you wants to change the expand item with a textblock right? In other words, you wants to change the datatemplate of the listview item.

    I come up with a solution that you might be interested with. You could define two different datatemplate first corresponding to different states like collapsed and expanded.

    Like this:

     <Page.Resources>
            <DataTemplate x:Name="collapsed" x:Key="collapsed">
                <TextBlock Text="{Binding}" />
            </DataTemplate>
            <DataTemplate x:Name="expanded" x:Key="expanded">
                <StackPanel>
                    <TextBlock Text="Details" FontSize="30" Foreground="Blue" Margin="0,10" />
                </StackPanel>
            </DataTemplate>
        </Page.Resources>
    
    <Grid>
            <ListView ItemTemplate="{StaticResource collapsed}"
                  ItemsSource="{x:Bind sourcelist}" SelectionChanged="listView_SelectionChanged" />
        </Grid>

    Then you could change the datatemplate in the code behind:

     public List<string> sourcelist { get; set; }
            public MainPage()
            {
                this.InitializeComponent();
    
                sourcelist = new List<string>();
                sourcelist.Add("13");
                sourcelist.Add("te22st");
                sourcelist.Add("test");
            }
    
            private void listView_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                //Assign DataTemplate for selected items
                foreach (var item in e.AddedItems)
                {
                    ListViewItem lvi = (sender as ListView).ContainerFromItem(item) as ListViewItem;
                    lvi.ContentTemplate = (DataTemplate)this.Resources["expanded"];
                }
                //Remove DataTemplate for unselected items
                foreach (var item in e.RemovedItems)
                {
                    ListViewItem lvi = (sender as ListView).ContainerFromItem(item) as ListViewItem;
                    lvi.ContentTemplate = (DataTemplate)this.Resources["collapsed"];
                }
            }

    Best regards,

    Roy


    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 Wednesday, August 15, 2018 4:32 PM
    Wednesday, August 15, 2018 3:07 AM
    Moderator

All replies

  • Hi,

    Based on your requirement, you wants to change the expand item with a textblock right? In other words, you wants to change the datatemplate of the listview item.

    I come up with a solution that you might be interested with. You could define two different datatemplate first corresponding to different states like collapsed and expanded.

    Like this:

     <Page.Resources>
            <DataTemplate x:Name="collapsed" x:Key="collapsed">
                <TextBlock Text="{Binding}" />
            </DataTemplate>
            <DataTemplate x:Name="expanded" x:Key="expanded">
                <StackPanel>
                    <TextBlock Text="Details" FontSize="30" Foreground="Blue" Margin="0,10" />
                </StackPanel>
            </DataTemplate>
        </Page.Resources>
    
    <Grid>
            <ListView ItemTemplate="{StaticResource collapsed}"
                  ItemsSource="{x:Bind sourcelist}" SelectionChanged="listView_SelectionChanged" />
        </Grid>

    Then you could change the datatemplate in the code behind:

     public List<string> sourcelist { get; set; }
            public MainPage()
            {
                this.InitializeComponent();
    
                sourcelist = new List<string>();
                sourcelist.Add("13");
                sourcelist.Add("te22st");
                sourcelist.Add("test");
            }
    
            private void listView_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                //Assign DataTemplate for selected items
                foreach (var item in e.AddedItems)
                {
                    ListViewItem lvi = (sender as ListView).ContainerFromItem(item) as ListViewItem;
                    lvi.ContentTemplate = (DataTemplate)this.Resources["expanded"];
                }
                //Remove DataTemplate for unselected items
                foreach (var item in e.RemovedItems)
                {
                    ListViewItem lvi = (sender as ListView).ContainerFromItem(item) as ListViewItem;
                    lvi.ContentTemplate = (DataTemplate)this.Resources["collapsed"];
                }
            }

    Best regards,

    Roy


    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 Wednesday, August 15, 2018 4:32 PM
    Wednesday, August 15, 2018 3:07 AM
    Moderator
  • Hey and thanks,

    i like your idea, and i am going to use it, but i have another little problem, i want a popup with the DisplayName to appear when clicking on an avatar from my friends list, is that possible?

    kind regards,

    Issmat

    Wednesday, August 15, 2018 4:36 PM