locked
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?

    Tuesday, September 09, 2014 9:19 PM

Answers

  • 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.

    Friday, October 03, 2014 4:49 PM
    Moderator
  • 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;
    
    
    
    },....
    }


    Saturday, October 04, 2014 1:15 PM

All replies

  • 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.

    Thursday, September 11, 2014 7:21 PM
    Moderator
  • And how would I force the listview to recalc the selected elements height?
    Thursday, September 11, 2014 10:09 PM
  • 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.

    Friday, October 03, 2014 4:49 PM
    Moderator
  • Thank you Matt for the sample. Thats XAML though. And we are in the HTML/JS Forum here ;)
    Friday, October 03, 2014 9:56 PM
  • 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;
    
    
    
    },....
    }


    Saturday, October 04, 2014 1:15 PM
  • 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.

    Monday, October 06, 2014 12:22 PM
    Moderator