[Silverlight] Visualstatemanager icm control visibility

[Jay-P]

Ben een custom control aan het maken in silverlight, simpel ding met een header, content en footer. Werkt ook allemaal prima, het enige probleem is dat ik de toegevoegde visualstates niet aan de praat krijg. De bedoeling is dat als de visibility veranderd er een transition plaats moet vinden. Nu ben ik me er van bewust dat er makkelijkere oplossingen voor zijn maar aangezien ik nog niet zolang met Silverlight bezig ben (kom van wpf, lang leve de triggers) wil ik graag begrijpen wat ik fout doe.

Custom Control:

Visual Basic .NET:

Namespace MyControls
    <TemplateVisualState(Name:="Visible", GroupName:="VisibilityStates")> _
    <TemplateVisualState(Name:="Invisible", GroupName:="VisibilityStates")> _
    Public Class ItemControl
        Inherits ContentControl

        Public Shared HeaderProperty As DependencyProperty = DependencyProperty.Register("Header", GetType(String), GetType(ItemControl), Nothing)
        Public Shared IsControlVisibleProperty As DependencyProperty = DependencyProperty.Register("IsControlVisible", GetType(Visibility), GetType(ItemControl), _
                                                                                                   New PropertyMetadata(New PropertyChangedCallback(AddressOf VisibilityChanged)))
        Public Shared FooterProperty As DependencyProperty = DependencyProperty.Register("Footer", GetType(String), GetType(ItemControl), Nothing)
        Public Shared HasFooterProperty As DependencyProperty = DependencyProperty.Register("HasFooter", GetType(Visibility), GetType(ItemControl), Nothing)
        Public Shared FooterURLProperty As DependencyProperty = DependencyProperty.Register("FooterURL", GetType(Uri), GetType(ItemControl), Nothing)

        Sub New()
            'DefaultStyleKey = GetType(ItemControl)
        End Sub

        Public Delegate Sub OnVisibilityChanged(ByVal Sender As Object, ByVal e As Visibility)
        Public Event VisibilityChangedEvent As OnVisibilityChanged

        Private Shared Sub VisibilityChanged(ByVal d As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)
            If e.NewValue = Visibility.Visible Then
                VisualStateManager.GoToState(CType(d, ItemControl), "Visible", True)
            Else
                VisualStateManager.GoToState(CType(d, ItemControl), "Invisible", True)
            End If
        End Sub

...................................................

Volgens mij zit hier het probleem NIET, VisualStateManager.GoToState returned netjes True. Defaultstylekey is wegecomment aangezien ik in Xaml een expliciete Style meegeef.

De Control Style resource

XML:

<Style x:Key="ItemControl" TargetType="MyCon:ItemControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="MyCon:ItemControl">
                <Grid Visibility="{TemplateBinding IsControlVisible}" x:Name="LayoutRoot">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="VisibilityStates">
                                <VisualState x:Name="Visible">
                                    <Storyboard Duration="00:00:01">
                                        <DoubleAnimation To="5" Storyboard.TargetName="Header"
                                                        Storyboard.TargetProperty="(TextBlock.Width)"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Invisible">
                                    <Storyboard Duration="00:00:01">
                                        <DoubleAnimation To="25" Storyboard.TargetName="Header"
                                                        Storyboard.TargetProperty="(TextBlock.Width)"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualStateGroup.Transitions>
                                <VisualTransition From="Invisible" To="Visible" GeneratedDuration="00:00:4">
                                    <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="LayoutRoot"
                                                     Storyboard.TargetProperty="(Grid.Height)"
                                                     To="1000"/>
                                        </Storyboard>
                                </VisualTransition>
                                
                                <VisualTransition From="Visible" To="Invisible" GeneratedDuration="00:00:4">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="LayoutRoot"
                                                     Storyboard.TargetProperty="(Grid.Height)"
                                                     To="10"/>
                                        </Storyboard>
                                    </VisualTransition>                                    
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Border x:Name="bdIntro" Style="{StaticResource ContentBorderStyle}">
                        <Border Style="{StaticResource InnerContentBorderStyle}" >
                            <Grid>
                               
...........................
Grid column/rowdefinities
...........................

                                <TextBlock Style="{StaticResource HeaderTextStyle}" x:Name="Header"
                                    Text="{TemplateBinding Header}" Grid.Column="1" Grid.ColumnSpan="3"/>
                                <Rectangle  Style="{StaticResource ItemDividerStyle}" Grid.Row="1" Grid.ColumnSpan="4" />
                                <Border Background="#ece9e4" CornerRadius="4" Grid.Row="2" Grid.ColumnSpan="4" Margin="5"
                                        Style="{StaticResource ContentBorderStyle}">
                                    <ContentControl HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                    Content="{TemplateBinding Content}"/>
                                </Border>
                                <Rectangle Style="{StaticResource ItemDividerStyle}" Grid.Row="3" Grid.ColumnSpan="4" />
                                <HyperlinkButton NavigateUri="{TemplateBinding FooterURL}" Content="{TemplateBinding Footer}" Visibility="{TemplateBinding HasFooter}"
                                                  Grid.Row="4" Grid.ColumnSpan="4" Style="{StaticResource LinkItemControl}" TargetName="ContentFrame"/>
                            </Grid>
                        </Border>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
  </Style>

Enig idee? Zoals je kan zien heb ik al een aantal verschillende storyboards toegevoegd om te checken of daar de fout niet inzit. Zat ook al te denken dat ik de animaties niet zie omdat ze uitgevoerd worden voordat de control visible is maar bij de transitie van invisible naar visible zie ik ook niets.

[CodeIT]

Werkt het wel als je de GotoState code in een button click handler zet?
Heb je de beschikking over Blend? Daar kun je de verschillende states en transities goed mee bekijken/wijzigen (ze zien er imo goed uit).