[Solved] How to apply RadSlideAnimation to WebBrowser

[Cesar Vinas]

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    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

[Rosy Topchiyska]

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

 

 

[Cesar Vinas]

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

[Cesar Vinas]

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

[Cesar Vinas]

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

[Rosy Topchiyska]

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