Change the image source within a listview tile after selection

Question

How to change the image source (which is within the listview item) while selecting?

Its something like In finance app, when I right click an item under watchlist section, it shows a delete icon.

I need like this but I need to change the source of the image when the item is selected. How to achieve this?

Answer 1

A .Net example is here.  You would follow the logic of that solution as it is almost identical!

http://social.msdn.microsoft.com/Forums/windowsapps/en-US/23f107fd-c11f-490d-b80f-62379e27c61b/how-to-change-an-image-when-item-selected-in-a-listview?forum=csharpgeneral

---

Jeff Sanders (MSFT)

@jsandersrocks - Windows Store Developer Solutions @WSDevSol
Getting Started With Windows Azure Mobile Services development? Click here
Getting Started With Windows Phone or Store app development? Click here
My Team Blog: Windows Store & Phone Developer Solutions
My Blog: Http Client Protocol Issues (and other fun stuff I support)

Answer 2

Could you please tell me how to get the same in WinJS listview???

because here I am not able to get the items within the template. If I can get them then I can change the source of the image.

Answer 3

When you select an item it gains the class "win-selected", you can use this to make a css rule to display something when it is selected.

i.e:

<style>
.listview .button {
  display: none;
}
.listview .win-selected .button {
  display: block;
}
</style>

That at least is how the delete button shows on the finance app, but if i understand correctly you have an image shown that is different for each list item (in a datasource for example), then i would define in the datasource the normal image and the selected image, and swap between them using css similar to above.

Not sure if that makes sence, so take for example:

<style>
#template .selectedImage {
  display:none;  
}

#template .win-selected .selectedImage {
  display:block;
}
#template .win-selected .image {
  display: none;
}

</style>

<div id="template" data-win-control="WinJS.Binding.Template">
 <img data-win-bind="src: image" class="image"/>
 <img data-win-bind="src: selectedImage" class="selectedImage"/>
</div>

Answer 4

Thanks Andy...

I was also facing the same problem & ur solution solved it...

I have one more issue...I need click event for the items within the listview. so I am defining the template in JS itself using WinJS.Utilities.markSupportedForProcessing and it works well. My problem is I need to set alternate background color to the items with opacity value. If I set opacity, the text also becomes dull. could you please tell me how to set opacity only to background color . If I define the template in html, it worked fine. When I moved to to JS( for click event), its not working as expected.

Here is my html template

<div id="ListViewItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
        <div class="leftListViewItem"  data-win-bind="style.background:count LeftPanelBGColor.BGColorConverter; style.opacity:count LeftPanelBGOpacity.BGOpacityConverter">
            <div class="leftListviewTitle"  data-win-bind="innerText: Title"></div>
            <div class="leftListviewBottomDiv" id="div3" style="; left:20px; bottom: 5px;">
                <button class="image win-interactive FavImageInactive"></button>
                <button class="activeImage FavImageActive"></button>            </div>
            <div class="leftListviewDate" data-win-bind="innerText: Date" ></div>
        </div>
    </div>

Here I placed two button as you mentioned and it works fine where I am setting the opacity and background color using Converters.

When the do the same in JS, it applies the opacity to the text as well which makes my item to be dull.

Here is the JS template.

var ListViewItemTemplate = WinJS.Utilities.markSupportedForProcessing(function ListViewItemTemplate(itemPromise) {
    return itemPromise.then(function (currentItem) {
        var mainDiv = document.createElement("div");
        mainDiv.className = "leftListViewItem";

        var tilteDiv = document.createElement("div");
        tilteDiv.className = "leftListviewTitle";
        tilteDiv.innerText = currentItem.data.Title;

        var imgDiv = document.createElement("div");
        imgDiv.className = "leftListviewBottomDiv";
        imgDiv.style.position = 'absolute';
        imgDiv.style.left = '20px';
        imgDiv.style.bottom = '5px';

        var dateDiv = document.createElement("div");
        dateDiv.className = "leftListviewDate";
        dateDiv.innerText = currentItem.data.date;
        mainDiv.appendChild(dateDiv);

        var favBtn = document.createElement("button");
        favBtn.className = "FavImageInactive";
        WinJS.Utilities.addClass(favBtn, "image");
        WinJS.Utilities.addClass(favBtn, "win-interactive");

        var favBtnActive = document.createElement("button");
        favBtnActive.className = "FavImageActive";
        WinJS.Utilities.addClass(favBtnActive, "activeImage");
        

        imgDiv.appendChild(favBtn);
        imgDiv.appendChild(favBtnActive);

        mainDiv.appendChild(tilteDiv);
        mainDiv.appendChild(imgDiv);
        mainDiv.appendChild(dateDiv);

        favBtnActive.addEventListener("click", function (eventObject) {
            //click event 
        });

//color is a global variable

            if (color == 1) {
                mainDiv.style.opacity =0.1;      
                 mainDiv.style.backgroundColor  ="green";               //dummy color
                color = 0;
            }
            else {
               mainDiv.style.opacity = 0.2;   
             mainDiv.style.backgroundColor = "yellow";   //dummy color for testing 
                color = 1;
            }
        }
       
        return mainDiv;
    });
});

Here though I set the color and opacity to background color, opacity applies  for the Title and date also. could you please tell me how to avoid this. Bacause I am able to get the required effect in HTML temaplte. But in JS it fails.

Thanks in advance.

---

Nazia

Answer 5

Use rgba/hsla for the colour i.e:

mainDiv.style.backgroundColor = "rgba(0,255,0,0.1)";  // Green with 0.1 opacity

Answer 6

Thanks Andy...

though it worked, the approach failed when I change the background color of the page. so here is the approach which I followed for the listview when the background is changed dynamically.

.style1 {  

    height: 200px;
    width: 200px;

}

    .style1:after {
        height: 200px;
        width: 200px;
        content: '';
        ;
        top: 0;
        left: 0;
        background-color: #000000;
        opacity: 0.1;
        z-index: -1;
    }

---

Nazia