# Rating stars issue

**URL:** <https://forums.fusetools.com/t/rating-stars-issue/579>\
**Category:** How-to Discussions\
**Created:** [May 4, 2016, 4:19pm UTC](https://forums.fusetools.com/t/rating-stars-issue/579 "2016-05-04T16:19:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [May 4, 2016, 4:19pm UTC](https://forums.fusetools.com/t/rating-stars-issue/579/1 "2016-05-04T16:19:06Z")

</div>

Hi , i’m facing a little issue with my rating stars, so for example when rate 5 , the rating comes normaly , but after when i try to rerate 1 , no effect. can anyone help me

```auto

                            <StackPanel Orientation="Horizontal" Alignment="Center">
                                          <Star ux:Name="Za" Width="34" Height="34" Margin="1" HitTestMode="LocalBounds">
                                            <Clicked>
                                              <Set Stars1.Value="true"/>
                                            </Clicked>
                                            <Stroke Width="2" Brush="#ff0" />
                                          </Star>
                                          <Star ux:Name="ba" Width="34" Height="34" Margin="1" HitTestMode="LocalBounds">
                                            <Clicked>
                                              <Set Stars2.Value="true"/>
                                            </Clicked>
                                            <Stroke Width="2" Brush="#ff0" />
                                          </Star>
                                          <Star ux:Name="va" Width="34" Height="34" Margin="1" HitTestMode="LocalBounds">
                                            <Clicked>
                                              <Set Stars3.Value="true"/>
                                            </Clicked>
                                            <Stroke Width="2" Brush="#ff0" />
                                          </Star>
                                          <Star ux:Name="pa" Width="34" Height="34" Margin="1" HitTestMode="LocalBounds">
                                            <Clicked>
                                              <Set Stars4.Value="true"/>
                                            </Clicked>
                                            <Stroke Width="2" Brush="#ff0" />
                                          </Star>
                                          <Star ux:Name="ka" Width="34" Height="34" Margin="1" HitTestMode="LocalBounds">
                                            <Clicked>
                                              <Set Stars5.Value="true"/>
                                            </Clicked>
                                            <Stroke Width="2" Brush="#ff0" />
                                          </Star>
                                          <WhileTrue ux:Name="Stars1">
                                            <Change Za.Color="#ff0" Easing="ElasticIn"/>
                                          </WhileTrue>
                                          <WhileTrue ux:Name="Stars2">
                                            <Change Za.Color="#ff0" Easing="ElasticIn"/>
                                            <Change ba.Color="#ff0" Easing="ElasticIn"/>
                                          </WhileTrue>
                                          <WhileTrue ux:Name="Stars3">
                                            <Change Za.Color="#ff0" Easing="ElasticIn"/>
                                            <Change ba.Color="#ff0" Easing="ElasticIn"/>
                                            <Change va.Color="#ff0" Easing="ElasticIn"/>
                                          </WhileTrue>
                                          <WhileTrue ux:Name="Stars4">
                                            <Change Za.Color="#ff0" Easing="ElasticIn"/>
                                            <Change ba.Color="#ff0" Easing="ElasticIn"/>
                                            <Change va.Color="#ff0" Easing="ElasticIn"/>
                                            <Change pa.Color="#ff0" Easing="ElasticIn"/>
                                          </WhileTrue>
                                          <WhileTrue ux:Name="Stars5">
                                            <Change Za.Color="#ff0" Easing="ElasticIn"/>
                                            <Change ba.Color="#ff0" Easing="ElasticIn"/>
                                            <Change va.Color="#ff0" Easing="ElasticIn"/>
                                            <Change pa.Color="#ff0" Easing="ElasticIn"/>
                                            <Change ka.Color="#ff0" Easing="ElasticIn"/>
                                          </WhileTrue>
                                        </StackPanel>

```

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [May 4, 2016, 5:23pm UTC](https://forums.fusetools.com/t/rating-stars-issue/579/2 "2016-05-04T17:23:20Z")

</div>

The problem is that the colors of the stars are not reset when you click again.

A [StateGroup](https://www.fusetools.com/learn/fuse#state-groups) is more suitable for this case.

You can also subclass the star to avoid a bit of typing. 🙂

```auto
<App Theme="Basic" ClearColor="#000">
    <Star ux:Class="myStar" Width="34" Height="34" Margin="1" HitTestMode="LocalBounds">
        <Stroke Width="2" Brush="#ff0" />
    </Star>

    <StackPanel Orientation="Horizontal" Alignment="Center">
        <myStar ux:Name="Za">
            <Clicked>
                <Set stateGroup.Active="Stars1"/>
            </Clicked>
        </myStar>
        <myStar ux:Name="ba">
            <Clicked>
                <Set stateGroup.Active="Stars2"/>
            </Clicked>
        </myStar>
        <myStar ux:Name="va">
            <Clicked>
                <Set stateGroup.Active="Stars3"/>
            </Clicked>
        </myStar>
        <myStar ux:Name="pa">
            <Clicked>
                <Set stateGroup.Active="Stars4"/>
            </Clicked>
        </myStar>
        <myStar ux:Name="ka">
            <Clicked>
                <Set stateGroup.Active="Stars5"/>
            </Clicked>
        </myStar>

        <StateGroup ux:Name="stateGroup" Active="noStars">
            <State ux:Name="noStars"/>
            <State ux:Name="Stars1">
                <Change Za.Color="#ff0" Easing="ElasticIn"/>
            </State>
            <State ux:Name="Stars2">
                <Change Za.Color="#ff0" Easing="ElasticIn"/>
                <Change ba.Color="#ff0" Easing="ElasticIn"/>
            </State>
            <State ux:Name="Stars3">
                <Change Za.Color="#ff0" Easing="ElasticIn"/>
                <Change ba.Color="#ff0" Easing="ElasticIn"/>
                <Change va.Color="#ff0" Easing="ElasticIn"/>
            </State>
            <State ux:Name="Stars4">
                <Change Za.Color="#ff0" Easing="ElasticIn"/>
                <Change ba.Color="#ff0" Easing="ElasticIn"/>
                <Change va.Color="#ff0" Easing="ElasticIn"/>
                <Change pa.Color="#ff0" Easing="ElasticIn"/>
            </State>
            <State ux:Name="Stars5">
                <Change Za.Color="#ff0" Easing="ElasticIn"/>
                <Change ba.Color="#ff0" Easing="ElasticIn"/>
                <Change va.Color="#ff0" Easing="ElasticIn"/>
                <Change pa.Color="#ff0" Easing="ElasticIn"/>
                <Change ka.Color="#ff0" Easing="ElasticIn"/>
            </State>
        </StateGroup>
    </StackPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [May 4, 2016, 5:26pm UTC](https://forums.fusetools.com/t/rating-stars-issue/579/3 "2016-05-04T17:26:36Z")

</div>

You can save even more typing by moving the clicked actions into the subclassed `myStar`as well but because of a bug this will _only work in full builds and not preview_ right now.

In that case you could do:

```auto
    <Star ux:InnerClass="myStar" Width="34" Height="34" Margin="1" HitTestMode="LocalBounds" >
        <State ux:Property="State"/>
        <Stroke Width="2" Brush="#ff0" />
        <Clicked>
            <Set Target="stateGroup.Active" Value="{Property this.State}"/>
        </Clicked>
    </Star>

```

and

```auto
        <myStar ux:Name="Za" State="Stars1"/>
        <myStar ux:Name="ba" State="Stars2"/>
        <myStar ux:Name="va" State="Stars3"/>
        <myStar ux:Name="pa" State="Stars4"/>
        <myStar ux:Name="ka" State="Stars5"/>

```

---

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [May 5, 2016, 5:33am UTC](https://forums.fusetools.com/t/rating-stars-issue/579/4 "2016-05-05T05:33:16Z")

</div>

many thanks remi for this