How to apply RadSlideAnimation to WebBrowser

6 posts, 1 answers
  1. Cesar Vinas
    Cesar Vinas avatar
    13 posts
    Member since:
    May 2003

    Posted 19 Oct 2014 Link to this post

    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
  2. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    550 posts

    Posted 22 Oct 2014 Link to this post

    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.

     
  3. DevCraft banner
  4. Cesar Vinas
    Cesar Vinas avatar
    13 posts
    Member since:
    May 2003

    Posted 24 Oct 2014 in reply to Rosy Topchiyska Link to this post

    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
  5. Cesar Vinas
    Cesar Vinas avatar
    13 posts
    Member since:
    May 2003

    Posted 24 Oct 2014 in reply to Rosy Topchiyska Link to this post

    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
  6. Cesar Vinas
    Cesar Vinas avatar
    13 posts
    Member since:
    May 2003

    Posted 24 Oct 2014 in reply to Rosy Topchiyska Link to this post

    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
  7. Answer
    Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    550 posts

    Posted 28 Oct 2014 Link to this post

    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.

     
Back to Top
DevCraft banner