Rating stars issue

How-to Discussions
1

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


                            <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>
2

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

A StateGroup is more suitable for this case.

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

<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>
3

You can save even more typing by moving the clicked actions into the subclassed myStaras well but because of a bug this will only work in full builds and not preview right now.

In that case you could do:

    <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

        <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"/>
4

many thanks remi for this