CODEWITHSUNDEEP
c#animationwindows-phone-8windows-phone-7.1
user2432627
user2432627

Reputation: 157

Windows phone: Animate a PhoneTextBox like the search text box in People hub app

Im developing a Windows phone 7.1 app and I need to animate the search textbox(toolkit:PhoneTextBox) just like it happens in people app. Slide in from the top of the screen on becoming Visible and slide out on Collapsed.

I searched for resources online but did not find any.

EDIT: My code for starting the animations. The slide in works, I tried slide out similarly, it doesnt.

 void SearchBox_Click(object sender, System.EventArgs e)
        {
            {
                if (SearchBox.Visibility == System.Windows.Visibility.Collapsed)
                {
                    (this.Resources["ShowSearchTextbox"] as Storyboard).Begin();
                    SearchBox.Focus();
                    SearchBox.Visibility = System.Windows.Visibility.Visible;
                    SearchBox.Foreground = new SolidColorBrush(Colors.Gray);
                }
                else
                {
                    SearchFilter.Instance.SearchText = String.Empty;
                    SearchBox.Text = string.Empty;
                    (this.Resources["HideSearchTextbox"] as Storyboard).Begin(); 
                    SearchBox.Visibility = System.Windows.Visibility.Collapsed;
                }
            }
        }

Upvotes: 1

Views: 1228

Answers (1)

Philippe Maes
Philippe Maes

Reputation: 510

You could use a Storyboard:

<Storyboard x:Key="showsearchtextbox">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Storyboard.TargetName="searchtextbox">
        <DiscreteDoubleKeyFrame KeyTime="0" Value="-100"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.500" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

With following TextBox:

<TextBlock x:Name="searchtextbox">
    <TextBlock.RenderTransform>
        <TranslateTransform Y="-100"/>
    </TextBlock.RenderTransform>
</TextBlock>

And then when the user presses on the search icon:

(this.Resources["showsearchtextbox"] as Storyboard).Begin();
searchtextbox.Focus();

Upvotes: 2

Related Questions