This is a migrated thread and some comments may be shown as answers.

How to apply RadSlideAnimation to WebBrowser

5 Answers 51 Views
Animation
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Cesar Vinas
Top achievements
Rank 1
Cesar Vinas asked on 19 Oct 2014, 11:47 PM
Hi.

I have a page with two WebBrowsers in a Windows Phone 8.1 Silverlight app. One of the web browsers is visible and the other one hidden and at the bottom of the screen, out of it:

1. I want that when tapping on a link of the web page in the visible WebBrowser the one that is hidden gets visible and slides in from the bottom of the screen to the top. I've tried this with the code below, but the animation is not working. I've also tried with RadMoveAnimation, but it does not work either. What am I missing. I've also tried with a duration of 25' as I thought that 500ms was to little and it was because of that that I didn't see the animation happening, but nothing. Should I be using a different Telerik component?

2. I also want that when users tap on the back button, the WebBrowser that slid in, slides out now from top to bottom until it is out of the screen.

This is my XAML:

<phone:PhoneApplicationPage
    x:Class="PhoneApp5.MainPage"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    shell:SystemTray.Opacity="0"
    shell:SystemTray.ForegroundColor="White">
 
    <Grid Margin="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <StackPanel Grid.Row="0" Background="#FFDF0084" Margin="0" Height="80" VerticalAlignment="Top">
            <Canvas>
                <TextBlock TextWrapping="Wrap" Text="TestApp" Canvas.Left="20" Foreground="#FFFFFFFF" FontSize="30" Canvas.Top="34"/>
            </Canvas>
        </StackPanel>
        <phone:WebBrowser Name="signupWebBrowser" Grid.Row="1" HorizontalAlignment="Stretch" IsScriptEnabled="True" Margin="0" VerticalAlignment="Stretch" Loaded="signupWebBrowser_Loaded" Navigating="WebBrowser_Navigating" />
        <phone:WebBrowser Name="contactUsWebBrowser" Grid.Row="1" Visibility="Collapsed" HorizontalAlignment="Stretch" IsScriptEnabled="True" VerticalAlignment="Stretch">
            <phone:WebBrowser.Resources>
                <telerikCore:RadSlideAnimation x:Key="contactUsWebBrowserEntranceAnimation" MoveDirection="TopIn" Duration="0:0:25.500" />
            </phone:WebBrowser.Resources>
        </phone:WebBrowser>
    </Grid>
</phone:PhoneApplicationPage>

and this is my C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using PhoneApp5.Resources;
using Telerik.Windows.Controls;
 
namespace PhoneApp5
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
 
            signupWebBrowser.Source = new Uri("Html/sign-up.html", UriKind.Relative);
            contactUsWebBrowser.Source = new Uri("Html/contact-us.html", UriKind.Relative);
        }
 
        private void WebBrowser_Navigating(object sender, NavigatingEventArgs e)
        {
            if (e.Uri.ToString().Contains("video.html"))
            {
                e.Cancel = true;
                NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
                 
            }
            else if (e.Uri.ToString().Contains("contact-us.html"))
            {
                e.Cancel = true;
                contactUsWebBrowser.Visibility = System.Windows.Visibility.Visible;
 
                RadSlideAnimation contactUsWebBrowserEntranceAnimation = this.Resources["contactUsWebBrowserEntranceAnimation"] as RadSlideAnimation;
                if (contactUsWebBrowserEntranceAnimation != null)
                {
                    RadAnimationManager.Play(this.contactUsWebBrowser, contactUsWebBrowserEntranceAnimation);
                }
            }
        }
 
        private void signupWebBrowser_Loaded(object sender, RoutedEventArgs e)
        {
        }
    }
}

Thanks,
Cesar Vinas

5 Answers, 1 is accepted

Sort by
0
Rosy Topchiyska
Telerik team
answered on 22 Oct 2014, 05:59 PM
Hello Cesar,

Thank you for contacting us.

The problem is that you search the animation in the Page resources, but it is defined in the resources of the WebBrowser. For your second question - you can use another animation and play it when the back button is pressed. To do that, you can override the PhoneApplicationPage.OnBackKeyPress method.

I hope this helps.

Regards,
Rosy Topchiyska
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Cesar Vinas
Top achievements
Rank 1
answered on 24 Oct 2014, 04:30 PM
Thank you, Rosy. I've tried what you said, but it still doesn't work. I'm attaching an example project that I hope you can review.

Thanks,
Cesar Vinas
0
Cesar Vinas
Top achievements
Rank 1
answered on 24 Oct 2014, 04:32 PM
Sorry, I forgot to mention that you'll have to change the extension of file PhoneApp7 from JPG to ZIP so you can unzip the VS project. I had to do this because the forum doesn't allow me to attach zip files. Please let me know if I should be sending the attachment in a different way.

Thanks,
Cesar Vinas
0
Cesar Vinas
Top achievements
Rank 1
answered on 25 Oct 2014, 03:44 AM
Rosy, I was able to make it work by using StartPoint and EndPoint instead of MoveDirection. Now I have a different problem, when I tap on the back button and the WebBrowser is sliding back to the bottom of the screen, the HTML content disappears. I'm attaching an example project again. You have to change the extension to zip. I hope you can help me.

Thanks,
Cesar Vinas
0
Accepted
Rosy Topchiyska
Telerik team
answered on 28 Oct 2014, 12:59 PM
Hi Cesar,

Thank you for the provided example. This problem seems to appear when the StartPoint of the animation is set to (0, 0). We are not completely sure what causes this issue and we will further investigate it. As a workaround you can use a different value, (0, 0.001) for example, which will make no difference to the user.

I hope this helps.

Regards,
Rosy Topchiyska
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Animation
Asked by
Cesar Vinas
Top achievements
Rank 1
Answers by
Rosy Topchiyska
Telerik team
Cesar Vinas
Top achievements
Rank 1
Share this question
or