CODEWITHSUNDEEP
c#xamllistviewwindows-8windows-store-apps
Hans Petter Naumann
Hans Petter Naumann

Reputation: 801

Styling ListView.SelectedItem - Windows Store App

I have a ListView like this: 

<ListView ItemsSource="{Binding Source}" SelectionMode="Single"
ItemTemplate="{StaticResource MyItemTemplate}"
IsItemClickEnabled="True" ItemClick="ListView_OnItemClick">
</ListView>

What I want to achieve, is to style the element which is selected/clicked on to something different than the other elements, and back again when another element is selected. The easiest way for me would be if there is some way to change the DataTemplate of the item that is selected. If thats not possible, any kind of solution is much appreciated.

I tried using a DataTemplateSelector, but I couldnt get it working. Not sure if it would reselect the templates when the selected item changes anyway.

Upvotes: 2

Views: 1862

Answers (1)

Jared Bienz - MSFT
Jared Bienz - MSFT

Reputation: 3550

DataTemplateSelector is intended to be used when the type of data changes. For example, let's say you have a base class called Person and two inherited classes Professor and Student. You could have a collection called People that contain both professors and students. You would use a DataTemplateSelector to use one data template when showing professor objects and another for showing student objects.

DataTemplateSelector and DataTemplate are probably not what you want because they don't normally have anything to do with selection. All of the UI elements you see when an item is selected (the check, the purple border, etc.) are part of the ItemContainer. At runtime the DataTemplate is placed inside of the ItemContainer, which you can change by editing the ContainerTemplate.

In Expression Blend, right-click on your ListView and choose Edit Additional Templates -> Edit Generated Item Container (ItemContainerStyle) -> Edit a Copy. You'll need to give your custom container an name and I recommend saving it at the App level instead of the current page (otherwise you won't be able to use it on other pages).

After you give it a name and click OK, Blend will switch to a mode where you're editing the container (instead of the page). Make sure you have the States panel open (Window -> States if you don't see it) and you should see a bunch of states. The one you want to edit is called Selected and it's in the group called SelectionStates.

When you're done making your changes, click the button at the top of the Objects and Timeline panel that looks like a horizontal line with an up arrow (when you hover over this button it will say "Return scope to [Page]"). Now you're back to editing your page instead of editing the container. Run your app and you should see the differences.

Note: Using this method you can change anything about the container. Things like the border, or making the item bigger or smaller or tilted in 3D space (use "Projection" under the Transform group in the property pane to tilt). You won't be able to show or hide parts of the DataTemplate though. For example, you wouldn't be able to hide the first name of a customer when they're not selected. For those sorts of changes you probably would have to try something with your own custom DataTemplateSelector. But I don't know if it's possible to check if an item is selected when the DataTemplateSelector is asked to generate the template.

Dev support, design support and more awesome goodness on the way: http://bit.ly/winappsupport

Upvotes: 4

Related Questions