Expand ListView item upon selection

Question

I wonder if the current listview layouts allow me to expand a selected listview item so that additional controls become visible?

Is the any method I would have to call on the listview to recalc its layout?

Answer 1

I'm envisioning something that acts like a treeview...

You can put all of the content in the object that is displayed by the listview, but hide it. When a button (or some object) is clicked, you handle that event and display the rest of the content.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 2

And how would I force the listview to recalc the selected elements height?

Answer 3

Here's a simple example:

<ListView x:Name="MyListView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="Blue" Margin="30" Height="150" Width="150">
                        <TextBlock FontSize="50" Text="{Binding}"/>
                        <Button Click="Button_Click" Content="Expand"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

public MainPage()
        {
            this.InitializeComponent();
            List<string> MyList = new List<string>();
            MyList.Add("A");
            MyList.Add("B");
            MyList.Add("C");
            MyListView.ItemsSource = MyList;
        }


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            
            Button ThisButton = sender as Button;
            StackPanel ThisStackPanel = ThisButton.Parent as StackPanel;
            string ThisButtonString = ThisButton.Content as string;


            if (ThisButtonString == "Expand")
            {
                ThisStackPanel.Width = 300;
                ThisStackPanel.Height = 300;
                ThisButton.Content = "Contract";
                
                Button NewButton = new Button();
                NewButton.Content = "New Button";
                ThisStackPanel.Children.Add(NewButton);
                
            }
            else 
            {
                ThisStackPanel.Width = 150;
                ThisStackPanel.Height = 150;
                ThisButton.Content = "Expand";

                bool FoundButton = false;
                Button SearchButton = new Button();
                foreach (object B in ThisStackPanel.Children)
                {
                    if (B.GetType().ToString() == "Windows.UI.Xaml.Controls.Button")
                    {
                        SearchButton = B as Button;
                        string Bstring = SearchButton.Content as string;
                        if (Bstring == "New Button")
                        {
                            FoundButton = true;
                        }
                    }
                }
                if (FoundButton) ThisStackPanel.Children.Remove(SearchButton);

            }
        }

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 4

Thank you Matt for the sample. Thats XAML though. And we are in the HTML/JS Forum here ;)

Answer 5

Just translating Matt's great example:

CSS

.item{
width:150px;
height:150px;
}
.expanded{
width:300px;
height:300px;
}

HTML

<div id="myListView" data-win-control="WinJS.UI.ListView"></div>

JS

WinJS.UI.Pages.define("/pages/page/page.html", {
        ready: function (element, options) {

var renderer = function (itemPromise) {
                return itemPromise.then(function (item) {
                    var result = document.createElement("div");
                    var btn = document.createElement("button");
                    btn.type = "button";
                    btn .addEventListener("click", function () {
WinJS.Utilities.toggleClass(result, 'expanded');
//THIS WILL FORCE THE ADAPTATION OF THE LISTVIEW TO THE SIZE CHANGE
element.querySelector("#myListView").winControl.forceLayout();
            });
result.appendChild(btn);
                    var p = document.createElement("span");
                    p.innerText = item.data.name;
                    result.appendChild(p);
                    return result;
};


var items = [];
items.push({name:'First'});
items.push({name:'Second'});
items.push({name:'Third'});
var listview = element.querySelector("#myListView").winControl;
listview.itemTemplate = renderer;
listview.itemDataSource = (new 
WinJS.Binding.List(items)).dataSource;



},....
}

Answer 6

That gets me every time...

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.