Ghosttt
Topic Author
Posts: 12
Joined: 06 Jun 2025, 01:09

ListView / ListBox: Insert single special data into them

05 Jul 2025, 01:17

Hi all, thanks for looking through my previous questions and answer it! (*Updated progress in next reply, most are solved)

I am currently working on creating a player scoreboard scroll box without header, which format will look like this:
Player(align to left) Score(align to right)
The background will need alternating two colours as background (see the attached image). I wonder if you can advice me on how to efficiently achieve this format.

I have tried ListBox and ListView. I am not sure which is better. When I use Grid View for ListView, it will force me to have a header too. So I add an extra content presenter to the default ListView Item container, but I am not sure if this is the right way of doing it. I also try editing the content presenter template so it will contain 2 information from the single content presenter. Again I am not sure if it is the best way to do it, as I am following your Character Selection tutorial and somehow apply the same technique to the ListView. Or should I use ListBox instead of ListView? Should I use ListBox when the item is not selectable? (But the future may change, is there a way to make the list flexible around selectable and not selectable?)
Both have the same issues :
1. Item container Template overriding Styles, which make Styles cannot colour the background of ListView or ListBox.
2. Cannot add value in the AlternationConverter - no matter when it is converted to resources, or underneath a local value, which mean I can't assign brush colour onto it
3. I try copy the code from the screenshot attached and paste it to my xaml, it did somehow work. The colour is appearing in alternation converter and it seems it was binding to the background in Style. However, it is not reflecting to the ListView? I think this is the same issue with issue 1.

I would like to know how to customise the scroll bar as well. And for the scoreboard I want to highlight the player row (so player can easily see where they are at), is it possible to have one unique item being displayed along with other formatted player name? Hope I am making sense, appreciate for all of your help!
Attachments
GallerySamples.png
 
Ghosttt
Topic Author
Posts: 12
Joined: 06 Jun 2025, 01:09

Re: ListView / ListBox: Insert single special data into them

07 Jul 2025, 01:48

Hi all,

I spend a whole day struggling and reading stackoverflow, I somehow solve most of the problem visually and make them work! However I wonder if the way I am doing it will have performance trade-off, so I am going to attach the MainPage zip down and hopefully it looks alright! And also will appreciate if you can help with inserting one special data that only appear once in listview, but display along with other data. (Use case: highlight player on the scoreboard)

Many thanks!
Attachments
MainPage.zip
(1.88 KiB) Downloaded 562 times
 
JoshCampbell_LuckyVR
Posts: 2
Joined: 26 Sep 2022, 17:47

Re: ListView / ListBox: Insert single special data into them

07 Jul 2025, 16:29

We've done something similar on our project. The approach we went with was to set up a Data Template Selector that selects a different template based on a data trigger that binds to a bool in our view model's item data. On startup we check if the entry is the first in the list and set the "IsFirstItem" value to true. Hope that helps.
 
User avatar
sfernandez
Site Admin
Posts: 3363
Joined: 22 Dec 2011, 19:20

Re: ListView / ListBox: Insert single special data into them

09 Jul 2025, 11:41

Hello,

If you don't need selection the most efficient control to present a list of items will be an ItemsControl. That way you only need to specify the ItemTemplate.

And for the alternating background colors you will use the AlternationCount and AlternationIndex properties:
<ItemsControl ItemsSource="{Binding PlayerData}" AlternationCount="2">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Border x:Name="bd">...</Border>
      <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource AncestorType=ContentPresenter}}" Value="0">
          <Setter TargetName="bd" Property="Background" Value="Red"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource AncestorType=ContentPresenter}}" Value="1">
          <Setter TargetName="bd" Property="Background" Value="Blue"/>
        </DataTrigger>
      </DataTemplate.Triggers>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>
 
Ghosttt
Topic Author
Posts: 12
Joined: 06 Jun 2025, 01:09

Re: ListView / ListBox: Insert single special data into them

14 Jul 2025, 23:52

Hi JoshCampbell_LuckyVR,

Thanks for the solution! It sounds like that will be something that requires editing xaml directly, I will bring this up with the coding team! :D Really appreciate it!
 
Ghosttt
Topic Author
Posts: 12
Joined: 06 Jun 2025, 01:09

Re: ListView / ListBox: Insert single special data into them

15 Jul 2025, 00:53

Hi sfernandez,

Thanks for the code and suggestion on the most efficient option! Guessing from your reply, does that mean that the less template used by a specific element, the more efficient they will be? For example, efficiency (from the best to worst) will be like: ItemsControl>ListView>ListBox, of course they have different functions so we can't compare them directly, but is that a general rule in terms of efficiency? How about style? Will style also affect efficiency too?

In terms of the coding - As I never learn xaml before, I really didn't know where and how to use the code...? I tried to put it in the line that I feel like it is, but it shows me 'Cannot convert '...' into a 'Border' object' and 'Duplicate assignment of property Border'. I also try to follow the code and use studio tool to replicate it, but I don't really know how it works except I can change the alternation count to 2 in the parent ItemControl/ ListView/ ListBox. I wonder if there is anyway to do it with Studio tool directly?
 
User avatar
sfernandez
Site Admin
Posts: 3363
Joined: 22 Dec 2011, 19:20

Re: ListView / ListBox: Insert single special data into them

15 Jul 2025, 12:50

does that mean that the less template used by a specific element, the more efficient they will be?
The simpler the template the better (less UI elements will be created and rendered: ItemsControl > ListBox > ListView), but this is just when you want to further optimize. In general you should choose your controls by their features, so if you don't need selection and just a list, the ItemsControl is the appropriate control. If you want to also manage selection then go for a ListBox. If you also need to provide resizeable and draggable columns, then choose a ListView.
I really didn't know where and how to use the code...
Sorry for this, I just wanted to indicate that the Border could contain any content. The ... was an indication of that, not the actual xaml :)
 
Ghosttt
Topic Author
Posts: 12
Joined: 06 Jun 2025, 01:09

Re: ListView / ListBox: Insert single special data into them

15 Jul 2025, 20:09

Hi sfernandez,

Thanks for the explanation and it all makes sense now! I am closing off this topic as I think the xaml code will eventually work, but I can't make it work for any reason :( I think that because I never learn xaml before!

My personal wish will be, if there is any sample xaml I can look at then I might be able to figure out. But I can live without it as well cause the file is working with the one I attached here. Thanks a lot!
 
User avatar
sfernandez
Site Admin
Posts: 3363
Joined: 22 Dec 2011, 19:20

Re: ListView / ListBox: Insert single special data into them

16 Jul 2025, 11:58

Could you please indicate what xaml code is not working for you, I can help you get what you need.

Who is online

Users browsing this forum: No registered users and 3 guests