RadWindow as a flyout

[GEB]

I want to use the RadWindow as a flyout.  It would only have the close button, and would not be moveable or resizeable by the user.  But, when it initially appears, I want to have it appear as a flyout.  And when it closes, I want it to fly back in.  Any easy way to do this using the RadWindow?

[Hristo Borisov]

Hi Gary,

You can hide the minimize and pin buttons using the PinMode and ResizeMode properties like this, moreover using the Fixed value of the PinMode property prevents the user from moving the control around the page.

<nav:RadWindow PinMode="Fixed" ResizeMode="NoResize" x:Name="window"/>

Even though, the window is not resizable by the client, you can still move the window by using the left and top properties of the control. It's much easier to define an animation in xaml to do that for you instead of creating you own code-behind logic for moving the control around. You can use the sample code below to move RadWindow around the screen by using storyboard.

  <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <Storyboard x:Name="transform">
                <DoubleAnimation
            Storyboard.TargetName="window"
            Storyboard.TargetProperty="Left"
            From="0" To="300" Duration="0:0:5"
            AutoReverse="True" RepeatBehavior="Forever" />
                <DoubleAnimation
            Storyboard.TargetName="window"
            Storyboard.TargetProperty="Top"
            From="0" To="300" Duration="0:0:5"
            AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
        </Grid.Resources>
        <Button Content="Click" Click="Button_Click" />
        <nav:RadWindow PinMode="Fixed" ResizeMode="NoResize" x:Name="window"/>
    </Grid>

And the code-behind logic for this:

        public Page()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(Page_Loaded);
        }

        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            window.Show();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            transform.Begin();
        }

I hope this will help you to achieve your goals. Feel free to contact us for any further assistance.

Best wishes,
Hristo Borisov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[GEB]

Thank you for the quick response.

I did try your sample code, and it works great.  However, when I try this in my application, it does not recognize the RadWindow's name in the "transform" animation.  I have obviously tried other names to make sure that it wasn't something specific to the name that was being used.  Now, one major difference in my application from your working example is that my RadWindow and the animations is in a seperate UserControl so that my code can be as componentized as possible.  I am able to access the RadWindow name from the code-behind in that the TestWindow.Show() works great. But, when TestWindow is the target in the animation, it fails.

The error is being generrated at run-time by the debugger, and is not being caught by the compiler.  Any idea as to why this is happening?

[Hristo Borisov]

Hi again Gary,

Would you send us a sample application or some code snippets in which we can reproduce your problem in order to have a better response?

Greetings,
Hristo Borisov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[GEB]

Here is page.xaml:

<

 

UserControl x:Class="TestRadWindow.Page"

 

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

 

xmlns:mycontrols="clr-namespace:TestRadWindow"

 

 

Width="400" Height="300">

 

 

 

 

<Grid x:Name="LayoutRoot" Background="White">

 

 

 

<mycontrols:TestPage></mycontrols:TestPage>

 

 

 

</Grid>

 

</

 

UserControl>

Here is page.xaml.cs:

 

using

 

System;

 

 

 

using

 

System.Collections.Generic;

 

 

 

using

 

System.Linq;

 

 

 

using

 

System.Net;

 

 

 

using

 

System.Windows;

 

 

 

using

 

System.Windows.Controls;

 

 

 

using

 

System.Windows.Documents;

 

 

 

using

 

System.Windows.Input;

 

 

 

using

 

System.Windows.Media;

 

 

 

using

 

System.Windows.Media.Animation;

 

 

 

using

 

System.Windows.Shapes;

 

 

 

namespace

 

TestRadWindow

 

{

 

public partial class Page : UserControl

 

 

 

 

{

 

public Page()

 

{

InitializeComponent();

}

}

}

Here is TestPage.xaml (my User Control that is called from page.xaml):

 

<

 

UserControl x:Class="TestRadWindow.TestPage"

 

 

 

 

 

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

 

xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation">

 

 

 

 

 

 

 

 

<Grid>

 

 

 

 

 

 

 

<Grid.Resources>

 

 

 

 

 

 

 

<Storyboard x:Name="transform">

 

 

 

 

 

 

 

<DoubleAnimation

 

 

Storyboard.TargetName="window"

 

 

Storyboard.TargetProperty="Left"

 

 

From="-800" To="0" Duration="0:0:.4"

 

 

AutoReverse="False" />

 

 

 

 

 

 

 

</Storyboard>

 

 

 

 

 

 

 

</Grid.Resources>

 

 

 

 

 

 

 

<Button Content="Click" Width="100" Height="30" Click="Button_Click" />

 

 

 

 

 

 

 

<telerik:RadWindow PinMode="Fixed" Width="800" Height="300" ResizeMode="NoResize" x:Name="window"/>

 

 

 

 

 

 

 

</Grid>

 

</

 

UserControl>

Here is my TestPage.xaml.cs:

 

using

 

System;

 

 

 

using

 

System.Collections.Generic;

 

 

 

using

 

System.Linq;

 

 

 

using

 

System.Net;

 

 

 

using

 

System.Windows;

 

 

 

using

 

System.Windows.Controls;

 

 

 

using

 

System.Windows.Documents;

 

 

 

using

 

System.Windows.Input;

 

 

 

using

 

System.Windows.Media;

 

 

 

using

 

System.Windows.Media.Animation;

 

 

 

using

 

System.Windows.Shapes;

 

 

 

namespace

 

TestRadWindow

 

{

 

public partial class TestPage : UserControl

 

 

 

 

{

 

public TestPage()

 

{

InitializeComponent();

}

 

private void Button_Click(object sender, RoutedEventArgs e)

 

{

window.Show();

transform.Begin();

}

}

}

I get a runtime error on transform.begin(), where the name "transform" cannot be found.  This does not occur when the code is combined, as in your example, without a seperate UserControl.  No compile errors or warnings are generated.

[GEB]

Here is the same code, formatted as a code block.

Page.xaml:

<UserControl x:Class="TestRadWindow.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mycontrols="clr-namespace:TestRadWindow"
    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">
        <mycontrols:TestPage></mycontrols:TestPage>
    </Grid>
</UserControl>

Page.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace TestRadWindow
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

    }
}

TestPage.xaml:

<UserControl x:Class="TestRadWindow.TestPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation">

    <Grid>
        <Grid.Resources>
            <Storyboard x:Name="transform">
                <DoubleAnimation
            Storyboard.TargetName="window"
            Storyboard.TargetProperty="Left"
            From="-800" To="0" Duration="0:0:.4"
            AutoReverse="False" />
            </Storyboard>
        </Grid.Resources>
        <Button Content="Click" Width="100" Height="30" Click="Button_Click" />
        <telerik:RadWindow PinMode="Fixed" Width="800" Height="300" ResizeMode="NoResize" x:Name="window"/>
    </Grid>
</UserControl>

TestPage.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace TestRadWindow
{
    public partial class TestPage : UserControl
    {
        public TestPage()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            window.Show();
            transform.Begin();
        }

    }
}

[Hristo Borisov]

Hello Gary,

We also experience the same behavior, unfortunately there is some issue with the storyboard and our control we cannot resolve immediately. The only workaround, I can think of right now, is to define your storyboard in code-behind in which you have a reference to RadWindow and bind the animation explicitly like this:

            DoubleAnimation animLeft = new DoubleAnimation()
            {
                Duration = new Duration(TimeSpan.FromSeconds(0.8)),
                From = 0,
                To = 400,
            };

            DoubleAnimation animTop = new DoubleAnimation()
            {
                Duration = new Duration(TimeSpan.FromSeconds(0.8)),
                From = 0,
                To = 400,
            };

            Storyboard storyBoard = new Storyboard();
            storyBoard.Children.Add(animLeft);
            storyBoard.Children.Add(animTop);

            Storyboard.SetTarget(animLeft, window);
            Storyboard.SetTarget(animTop, window);
            Storyboard.SetTargetProperty(animLeft, new PropertyPath("Left"));
            Storyboard.SetTargetProperty(animTop, new PropertyPath("Top"));

            storyBoard.Begin();

Best wishes,
Hristo Borisov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[GEB]

Has anyone had a chance to take a look at this issue yet?

[Hristo Borisov]

Hi Gary,

It is in our priority list for our next release, but unfortunately there are some other features and issues that are to be sorted out. Thank you for your patience and look forward from receiving more feedback about our controls.

Sincerely yours,
Hristo Borisov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.