tags:

views:

13

answers:

0

I am trying to mimic a game of bingo (lotto) and i am having problems with my display grid. The way i have done it is by showing a design for 1 - a number not called (notCalled) 2 - the number which is being called (myLabelJustCalled) 3 - numbers that have been called in the past. (myLabelCalled)

The issue of have is when the number is called i have animated it to spin in a circle however when it changes to the style 3 the next number (which should take on style 2) does not spin it freezes. I think i need to stop my storyboard and rerun it with the new label.

Hope this makes sense!

code attached:

    <Label Name="labelNumber" Content="{Binding Number}" Height="50" Width="70"/>

<Style x:Key="numberDesign" TargetType="{x:Type Label}">
    <Setter Property="Foreground" Value="Red"/>

</Style>

<Style x:Key="notCalled" TargetType="{x:Type Label}">
    <Setter Property="Margin" Value="2,2,2,2"/>
    <Setter Property="FontFamily" Value="Arial Black"/>
    <Setter Property="Foreground" Value="Red"/>
    <Setter Property="FontSize" Value="18"/>
     <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Label}">
                <Border BorderBrush="Red" 
                        BorderThickness="2" 
                        Background="Transparent" 
                        CornerRadius="10">
                    <ContentPresenter
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                    />
                </Border>                   
            </ControlTemplate>
        </Setter.Value>
    </Setter>      

</Style>

<Style x:Key="myLabelJustCalled" TargetType="{x:Type Label}">
    <Setter Property="Margin" Value="2,2,2,2"/>
    <Setter Property="FontFamily" Value="Arial Black"/>  
    <Setter Property="FontSize" Value="18"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Label}">
                <Border BorderBrush="Red" 
                        BorderThickness="2" 
                        Background="Blue" 
                        CornerRadius="10">
                    <Canvas 
                        x:Name="canvas2"  
                        Height="50" 
                        Width="70"  
                        Visibility="Visible"

                        >
                        <Canvas.RenderTransform>
                            <RotateTransform x:Name="spin" Angle="90" CenterX="25" CenterY="25" />                               
                        </Canvas.RenderTransform>
                        <ContentPresenter
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Canvas.Top="13"
                            Canvas.Right="25"
                            Name="labelNumber"
                    />
                    </Canvas>
                </Border>                  
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="Canvas.LayoutUpdated">
                            <BeginStoryboard Name="myStoryBoard">
                            <Storyboard x:Name="spinningAnimation">
                                <DoubleAnimation
                                Storyboard.TargetName="canvas2"   
                                Storyboard.TargetProperty="(Canvas.RenderTransform).(RotateTransform.Angle)"  
                                From="0" 
                                To="360" 
                                SpeedRatio="1" 
                                RepeatBehavior="Forever"
                               />

                            </Storyboard>
                        </BeginStoryboard>                           
                    </EventTrigger>    
                </ControlTemplate.Triggers>
            </ControlTemplate>          
        </Setter.Value>
    </Setter>


</Style>



<Style x:Key="myLabelCalled" TargetType="{x:Type Label}">
    <Setter Property="Margin" Value="2,2,2,2"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="FontFamily" Value="Arial Black"/>
    <Setter Property="FontSize" Value="18"/>
    <Setter Property="Background" Value="Green"/>
</Style>