views:

39

answers:

0

I have created a custom ToggleButton where the content is a TextBlock (not just a string) pasted in manually into the right place in XAML. The parent layout in the ToggleButton is a Grid with 2 columns, where the toggling swaps the ContentPresenter and some graphics between the columns.

The graphics animate perfectly when FluidMoveBehavior button is turned on (I`m using Expression Blend), but the TextBlock inside ContentPresenter jumps without any animation.

Not sure why this happens, is there any known limitations I don`t know about?

Edit: adding XAML example of the erratic behaviour

<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d">
<UserControl.Resources>
    <Style x:Key="SelectToggleButtonStyle" TargetType="ToggleButton">
        <Setter Property="Background" Value="#FF1F3B53"/>
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="Padding" Value="3"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid x:Name="RootGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.5*"/>
                            <ColumnDefinition Width="0.5*"/>
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                </VisualState>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates" ei:ExtendedVisualStateManager.UseFluidLayout="True">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.3">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <CubicEase EasingMode="EaseOut"/>
                                        </VisualTransition.GeneratedEasingFunction>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="contentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Int32>1</System:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="ButtonFill">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Int32>0</System:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="ButtonInnerStroke">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Int32>0</System:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="ButtonStroke">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Int32>0</System:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <VisualStateManager.CustomVisualStateManager>
                            <ei:ExtendedVisualStateManager/>
                        </VisualStateManager.CustomVisualStateManager>
                        <Path x:Name="InnerShadow" Data="F1M4,2C4,2 80,2 80,2 81.105,2 82,2.895 82,4 82,4 82,20 82,20 82,21.105 81.105,22 80,22 80,22 4,22 4,22 2.895,22 2,21.105 2,20 2,20 2,4 2,4 2,2.895 2.895,2 4,2z" Margin="-2,-2,-1,-2" UseLayoutRounding="False" Grid.ColumnSpan="2">
                            <Path.Fill>
                                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                                    <GradientStop Color="#FFF1F3F5" Offset="0.85"/>
                                    <GradientStop Color="#FFCDCFCF" Offset="1"/>
                                </LinearGradientBrush>
                            </Path.Fill>
                        </Path>
                        <Path x:Name="Stroke" Data="F1M3,3C2.449,3 2,3.449 2,4 2,4 2,20 2,20 2,20.552 2.449,21 3,21 3,21 79,21 79,21 79.552,21 80,20.552 80,20 80,20 80,4 80,4 80,3.449 79.552,3 79,3 79,3 3,3 3,3z M3,2C3,2 79,2 79,2 80.105,2 81,2.895 81,4 81,4 81,20 81,20 81,21.105 80.105,22 79,22 79,22 3,22 3,22 1.896,22 1,21.105 1,20 1,20 1,4 1,4 1,2.895 1.896,2 3,2z" Fill="#FFB1B7BD" Margin="-1,-2,-2,-2" UseLayoutRounding="False" Grid.ColumnSpan="2"/>
                        <Rectangle x:Name="ButtonFill" RadiusX="2" RadiusY="2" UseLayoutRounding="False" Grid.Column="1" Margin="0.5">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                                    <GradientStop Color="#FFB1B7BD" Offset="0"/>
                                    <GradientStop Color="#FFF1F3F5" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Rectangle x:Name="ButtonInnerStroke" RadiusY="0.5" RadiusX="0.5" Stroke="White" Margin="1" Grid.Column="1" Opacity="0"/>
                        <Rectangle x:Name="ButtonStroke" RadiusY="2" RadiusX="2" Stroke="#FF7B8389" Grid.Column="1"/>
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>                          
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot">
    <ToggleButton x:Name="SelectToggleButton" HorizontalAlignment="Left" Width="80" Height="20" Style="{StaticResource SelectToggleButtonStyle}" VerticalAlignment="Top" d:LayoutOverrides="Height" Margin="10">
        <TextBlock x:Name="TextLabel" Foreground="#FF4B4B4B" FontWeight="Bold" FontSize="11" FontFamily="Arial" LineStackingStrategy="BlockLineHeight" LineHeight="11" TextAlignment="Center" TextWrapping="Wrap" Text="Text" HorizontalAlignment="Center"/>
    </ToggleButton>
</Grid>
</UserControl>

Note: I'm doing things slightly differently since the question, but still interested to know why is this happening, so isolated the problematic button.