WhileCount not working properly

How-to Discussions
1

HI i’m building a rating star component using whileCount , but it seems to not works as expected.

          <StackPanel Margin="10" Orientation="Horizontal" ItemSpacing="5" Alignment="Center">
            <WhileCount Items="{note}"   EqualTo="0">
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}"   EqualTo="1">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}"   GreaterThan="1" LessThan="2">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe839;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}"   EqualTo="2">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}"   GreaterThan="2" LessThan="3">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe839;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}"   EqualTo="3">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}"   GreaterThan="3" LessThan="4">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe839;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}"   EqualTo="4">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}"   GreaterThan="4" LessThan="5">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}"  EqualTo="5">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <Text Value="{NumberVote}" Alignment="Center" FontSize="14"/>
          </StackPanel>

&#xe83a; represent a empty star , &#xe838; represent a full star, &#xe839;; represent a half star.
no matter how much the note observable is equal , the value of my stars still the same, one full stars and 4 empty.

2

Sorry for not reading well the doc , so the Items need to be a collection, but what in fuse can help me to build a fully working rating component ?

3

Something like this:

	<StackPanel Orientation="Horizontal">
		<Each Count="{starcount}">
			<Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
		</Each>
	</StackPanel>
4

Thank you but with this way i cannot display half rate stars

5

Ah, I didn’t notice you had those.
In that case you should just write a small javascript function which creates a string with whole and half stars based on the rating and then exposes that string as an observable,