SilverLight on an existing asp.net website
9 views
Skip to first unread message
SA
Apr 23, 2011, 10:34:30 AM4/23/11
to UI Binders
Hello,
Is there a way to emulate a circle expanding concept (see sony.com or
other such websites) using SilverLight 3.x, on an existing website
(.net3.5/vs2008)?
I have had limited exposure to it, so any guidance/pointers will be
highly appreciated.
Thanks in advance.
Regards.
SA.
Is there a way to emulate a circle expanding concept (see sony.com or
other such websites) using SilverLight 3.x, on an existing website
(.net3.5/vs2008)?
I have had limited exposure to it, so any guidance/pointers will be
highly appreciated.
Thanks in advance.
Regards.
SA.
Steve Ruben
Apr 23, 2011, 10:39:42 AM4/23/11
to ui-bi...@googlegroups.com
I would create a ellipse element with radial background gradient, animate the gradient stop opacities and the height / width of the ellipse. Be sure the ellipse is not nested with other content and sits at a higher zIndex.
-Steve Ruben.
Follow me on Twitter: http://www.twitter.com/CSharpYouDull
-Steve Ruben.
Follow me on Twitter: http://www.twitter.com/CSharpYouDull
SA
Apr 24, 2011, 2:46:20 PM4/24/11
to UI Binders
Is it possible to get some sample code pls? Also, I already have the
asp.net website, so I am not sure how I can play the silverlight on
top of the asp.net website and get the same effect.
Thanks,
Ashoo
On Apr 23, 10:39 am, Steve Ruben <steveru...@gmail.com> wrote:
> I would create a ellipse element with radial background gradient, animate
> the gradient stop opacities and the height / width of the ellipse. Be sure
> the ellipse is not nested with other content and sits at a higher zIndex.
>
> -Steve Ruben.
>
asp.net website, so I am not sure how I can play the silverlight on
top of the asp.net website and get the same effect.
Thanks,
Ashoo
On Apr 23, 10:39 am, Steve Ruben <steveru...@gmail.com> wrote:
> I would create a ellipse element with radial background gradient, animate
> the gradient stop opacities and the height / width of the ellipse. Be sure
> the ellipse is not nested with other content and sits at a higher zIndex.
>
> -Steve Ruben.
>
Steve Ruben
Apr 24, 2011, 3:07:46 PM4/24/11
to SA, UI Binders
You can set the Silverlight control to windowless then use CSS and
JavaScript to manipulate the zindex see html overlay
JavaScript to manipulate the zindex see html overlay
Sent from my Windows Phone From: SA
Sent: Sunday, April 24, 2011 1:46 PM
To: UI Binders
Subject: Re: SilverLight on an existing asp.net website
Message has been deleted
SA
Apr 25, 2011, 3:06:13 PM4/25/11
to UI Binders
Here is my xaml code ...... I start the animation in the Loaded even
of the UserControl
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.Resources>
<Storyboard x:Name="ellipsStoryBoard">
<DoubleAnimation Duration="0:0:2"
Storyboard.TargetName="myEllipse"
Storyboard.TargetProperty="Height"
To="700"></DoubleAnimation>
<DoubleAnimation Duration="0:0:2"
Storyboard.TargetName="myEllipse"
Storyboard.TargetProperty="Width"
To="700"></DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="Stop1"
Storyboard.TargetProperty="Offset"
From="1.0" To="1.0"
Duration="0:0:1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="Stop2"
Storyboard.TargetProperty="Offset"
From="0.5" To="1.0"
Duration="0:0:2">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="Stop3"
Storyboard.TargetProperty="Offset"
From="0.0" To="1.0"
Duration="0:0:2">
</DoubleAnimation>
<ColorAnimation
Storyboard.TargetName="Stop1"
Storyboard.TargetProperty="Color"
From="Red" To="Transparent"
Duration="0:0:2"
BeginTime="0:0:0.2" />
<ColorAnimation
Storyboard.TargetName="Stop2"
Storyboard.TargetProperty="Color"
From="Yellow" To="Transparent"
Duration="0:0:2"
BeginTime="0:0:0.2" />
<DoubleAnimation
Storyboard.TargetName="myEllipse"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:2"
BeginTime="0:0:0.5"></DoubleAnimation>
</Storyboard>
</Grid.Resources>
<Ellipse x:Name="myEllipse" Height="0" Width="0"
Visibility="Collapsed" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop x:Name="Stop1" Color="Red"
Offset="1" />
<GradientStop x:Name="Stop2" Color="Yellow"
Offset="0.5"/>
<GradientStop x:Name="Stop3"
Color="Transparent" Offset="0"></GradientStop>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
Here is where I call the silverlight app in the master page of the
aps.net app
<head id="MainHead" runat="server">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /
>
<meta name="description" content="Report"/>
<style type="text/css"> .OverLay { position: absolute; z-
index: 3000000; opacity: 100; filter: alpha(opacity = 100);
top: 0; bottom: 0; left: 0; right: 0; width: 100%; height:
100%; }
body { height: 100%; }
html { height: 100%; }
</style>
</head>
<body>
<div style="height: 100%; width: 100%; position: relative; ">
<form id="MainForm" runat="server">
<table id="Container" cellpadding="0px" cellspacing="0px"><tr><td
style="vertical-align:top;height:100%;">
</table><!--end Container-->
</form>
</div>
<object class="OverLay" id="myObj" data="data:application/x-
silverlight-2," type="application/x-silverlight-2"
style="position:absolute; ">
<param name="source" value="SilverlightAnimationDemo.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="windowless" value="true"/>
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
</object><%--<iframe id="sl_Frame" style="height:0px;width:
0px;border:0px;"></iframe>--%>
</body>
The silverlight runs above the ASP.Net app but the main page doesn't
show. If I set the Opacity in the OverLay to 50 then the page always
shows. Also I want that the page not show at all in the begining and
when the circle opens the page starts to show in the center of the
ellipse and then fully shows when the animation is over and the whole
ellipse is transparent. Currently when the opacity is 50 the page
outside the ellipse also shows.
Any idea what I am doing wrong?
Thanks in advance,
Regards,
SA.
On Apr 24, 3:07 pm, Steve Ruben <steveru...@gmail.com> wrote:
> You can set the Silverlight control to windowless then use CSS and
> JavaScript to manipulate the zindex see html overlay
>
> Sent from my Windows Phone From: SA
> Sent: Sunday, April 24, 2011 1:46 PM
> To: UI Binders
> Subject: Re: SilverLight on an existing asp.net website
> Is it possible to get some sample code pls? Also, I already have the
> asp.net website, so I am not sure how I can play the silverlight on
> top of the asp.net website and get the same effect.
>
> Thanks,
> Ashoo
>
> On Apr 23, 10:39 am, Steve Ruben <steveru...@gmail.com> wrote:
>
>
>
> > I would create a ellipse element with radial background gradient, animate
> > the gradient stop opacities and the height / width of the ellipse. Be sure
> > the ellipse is not nested with other content and sits at a higher zIndex.
>
> > -Steve Ruben.
>
>
> - Show quoted text -
of the UserControl
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.Resources>
<Storyboard x:Name="ellipsStoryBoard">
<DoubleAnimation Duration="0:0:2"
Storyboard.TargetName="myEllipse"
Storyboard.TargetProperty="Height"
To="700"></DoubleAnimation>
<DoubleAnimation Duration="0:0:2"
Storyboard.TargetName="myEllipse"
Storyboard.TargetProperty="Width"
To="700"></DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="Stop1"
Storyboard.TargetProperty="Offset"
From="1.0" To="1.0"
Duration="0:0:1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="Stop2"
Storyboard.TargetProperty="Offset"
From="0.5" To="1.0"
Duration="0:0:2">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="Stop3"
Storyboard.TargetProperty="Offset"
From="0.0" To="1.0"
Duration="0:0:2">
</DoubleAnimation>
<ColorAnimation
Storyboard.TargetName="Stop1"
Storyboard.TargetProperty="Color"
From="Red" To="Transparent"
Duration="0:0:2"
BeginTime="0:0:0.2" />
<ColorAnimation
Storyboard.TargetName="Stop2"
Storyboard.TargetProperty="Color"
From="Yellow" To="Transparent"
Duration="0:0:2"
BeginTime="0:0:0.2" />
<DoubleAnimation
Storyboard.TargetName="myEllipse"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:2"
BeginTime="0:0:0.5"></DoubleAnimation>
</Storyboard>
</Grid.Resources>
<Ellipse x:Name="myEllipse" Height="0" Width="0"
Visibility="Collapsed" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop x:Name="Stop1" Color="Red"
Offset="1" />
<GradientStop x:Name="Stop2" Color="Yellow"
Offset="0.5"/>
<GradientStop x:Name="Stop3"
Color="Transparent" Offset="0"></GradientStop>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
Here is where I call the silverlight app in the master page of the
aps.net app
<head id="MainHead" runat="server">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /
>
<meta name="description" content="Report"/>
<style type="text/css"> .OverLay { position: absolute; z-
index: 3000000; opacity: 100; filter: alpha(opacity = 100);
top: 0; bottom: 0; left: 0; right: 0; width: 100%; height:
100%; }
body { height: 100%; }
html { height: 100%; }
</style>
</head>
<body>
<div style="height: 100%; width: 100%; position: relative; ">
<form id="MainForm" runat="server">
<table id="Container" cellpadding="0px" cellspacing="0px"><tr><td
style="vertical-align:top;height:100%;">
</table><!--end Container-->
</form>
</div>
<object class="OverLay" id="myObj" data="data:application/x-
silverlight-2," type="application/x-silverlight-2"
style="position:absolute; ">
<param name="source" value="SilverlightAnimationDemo.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="windowless" value="true"/>
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
</object><%--<iframe id="sl_Frame" style="height:0px;width:
0px;border:0px;"></iframe>--%>
</body>
The silverlight runs above the ASP.Net app but the main page doesn't
show. If I set the Opacity in the OverLay to 50 then the page always
shows. Also I want that the page not show at all in the begining and
when the circle opens the page starts to show in the center of the
ellipse and then fully shows when the animation is over and the whole
ellipse is transparent. Currently when the opacity is 50 the page
outside the ellipse also shows.
Any idea what I am doing wrong?
Thanks in advance,
Regards,
SA.
On Apr 24, 3:07 pm, Steve Ruben <steveru...@gmail.com> wrote:
> You can set the Silverlight control to windowless then use CSS and
> JavaScript to manipulate the zindex see html overlay
>
> Sent from my Windows Phone From: SA
> Sent: Sunday, April 24, 2011 1:46 PM
> To: UI Binders
> Subject: Re: SilverLight on an existing asp.net website
> Is it possible to get some sample code pls? Also, I already have the
> asp.net website, so I am not sure how I can play the silverlight on
> top of the asp.net website and get the same effect.
>
> Thanks,
> Ashoo
>
> On Apr 23, 10:39 am, Steve Ruben <steveru...@gmail.com> wrote:
>
>
>
> > I would create a ellipse element with radial background gradient, animate
> > the gradient stop opacities and the height / width of the ellipse. Be sure
> > the ellipse is not nested with other content and sits at a higher zIndex.
>
> > -Steve Ruben.
>
> > Follow me on Twitter:http://www.twitter.com/CSharpYouDullOnSat, Apr 23, 2011 at 9:34 AM, SA <ashoo.sha...@gmail.com> wrote:
> > > Hello,
>
> > > Is there a way to emulate a circle expanding concept (see sony.com or
> > > other such websites) using SilverLight 3.x, on an existing website
> > > (.net3.5/vs2008)?
> > > I have had limited exposure to it, so any guidance/pointers will be
> > > highly appreciated.
>
> > > Thanks in advance.
> > > Regards.
> > > SA.- Hide quoted text -
> > > Hello,
>
> > > Is there a way to emulate a circle expanding concept (see sony.com or
> > > other such websites) using SilverLight 3.x, on an existing website
> > > (.net3.5/vs2008)?
> > > I have had limited exposure to it, so any guidance/pointers will be
> > > highly appreciated.
>
> > > Thanks in advance.
> > > Regards.
>
> - Show quoted text -
Reply all
Reply to author
Forward
0 new messages