locked
What is this? RRS feed

  • Question

  • On this website, if you click the "Quick Reply" button, you're presented with a screen that looks like this screenshot:

    http://cid-e5f2b88c9f4f12c4.skydrive.live.com/self.aspx/.Public/whatisthis.JPG

    This a dialog-looking screen where the "background" is grayed-out. What is this? Is this Silverlight doing this? How is this done? What's it called? Thanks.
    Thursday, April 22, 2010 2:45 PM

Answers

  • No. I just was not sure if this was something Silverlight produced. What I'm getting from this posts is that this is really AJAX. Thanks for the help.

    Friday, April 23, 2010 7:17 AM

All replies

  •  Looks like a custom child window..

    To get something similar without all the functionality you see inside you can just style and template the child window.

    To get resizing or other functionality you can use the floatable window

    FloatableWindow

    Thursday, April 22, 2010 4:56 PM
  •  Here is a quick start to a repro..

      

    <basics:ChildWindow
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	x:Class="SandBox_Test.ChildWindow1"
    	Title="ChildWindow1"
    	Width="400" Height="300" mc:Ignorable="d"&gt;
    	<basics:ChildWindow.Resources>
    		<Style x:Key="ButtonStyle1" TargetType="Button"&gt;
    			<Setter Property="Template"&gt;
    				<Setter.Value>
    					<ControlTemplate TargetType="Button"&gt;
    						<Grid>
    							<VisualStateManager.VisualStateGroups>
    								<VisualStateGroup x:Name="FocusStates"&gt;
    									<VisualState x:Name="Focused"/>
    									<VisualState x:Name="Unfocused"/>
    								</VisualStateGroup>
    								<VisualStateGroup x:Name="CommonStates"&gt;
    									<VisualState x:Name="Normal"/>
    									<VisualState x:Name="MouseOver"/>
    									<VisualState x:Name="Pressed"/>
    									<VisualState x:Name="Disabled"/>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<Ellipse Height="32" HorizontalAlignment="Left" VerticalAlignment="Top" Width="32"&gt;
    								<Ellipse.Fill>
    									<RadialGradientBrush>
    										<GradientStop Color="#FFFF5A5A" Offset="0"/>
    										<GradientStop Color="#FFEA0D0D" Offset="1"/>
    									</RadialGradientBrush>
    								</Ellipse.Fill>
    								<Ellipse.Effect>
    									<DropShadowEffect ShadowDepth="1"/>
    								</Ellipse.Effect>
    							</Ellipse>
    							<ContentPresenter HorizontalAlignment="Left" Margin="9,6,0,0" VerticalAlignment="Top"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    			<Setter Property="FontWeight" Value="Bold"/>
    			<Setter Property="FontSize" Value="16"/>
    			<Setter Property="Foreground" Value="White"/>
    		</Style>
    		<Style x:Key="ChildWindowStyle1" TargetType="basics:ChildWindow"&gt;
    			<Setter Property="IsTabStop" Value="false"/>
    			<Setter Property="TabNavigation" Value="Cycle"/>
    			<Setter Property="HorizontalAlignment" Value="Center"/>
    			<Setter Property="VerticalAlignment" Value="Center"/>
    			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    			<Setter Property="VerticalContentAlignment" Value="Stretch"/>
    			<Setter Property="BorderThickness" Value="1"/>
    			<Setter Property="BorderBrush"&gt;
    				<Setter.Value>
    					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt;
    						<GradientStop Color="#FFA3AEB9" Offset="0"/>
    						<GradientStop Color="#FF8399A9" Offset="0.375"/>
    						<GradientStop Color="#FF718597" Offset="0.375"/>
    						<GradientStop Color="#FF617584" Offset="1"/>
    					</LinearGradientBrush>
    				</Setter.Value>
    			</Setter>
    			<Setter Property="OverlayBrush" Value="#7F000000"/>
    			<Setter Property="OverlayOpacity" Value="1"/>
    			<Setter Property="Template"&gt;
    				<Setter.Value>
    					<ControlTemplate TargetType="basics:ChildWindow"&gt;
    						<Grid x:Name="Root"&gt;
    							<Grid.Resources>
    								<Style x:Key="ButtonStyle" TargetType="Button"&gt;
    									<Setter Property="Background" Value="#FF1F3B53"/>
    									<Setter Property="Foreground" Value="#FF000000"/>
    									<Setter Property="Padding" Value="3"/>
    									<Setter Property="BorderThickness" Value="1"/>
    									<Setter Property="BorderBrush"&gt;
    										<Setter.Value>
    											<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt;
    												<GradientStop Color="#FFA3AEB9" Offset="0"/>
    												<GradientStop Color="#FF8399A9" Offset="0.375"/>
    												<GradientStop Color="#FF718597" Offset="0.375"/>
    												<GradientStop Color="#FF617584" Offset="1"/>
    											</LinearGradientBrush>
    										</Setter.Value>
    									</Setter>
    									<Setter Property="Template"&gt;
    										<Setter.Value>
    											<ControlTemplate TargetType="Button"&gt;
    												<Grid x:Name="grid" Height="14" HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Background="#02FFFFFF"&gt;
    													<VisualStateManager.VisualStateGroups>
    														<VisualStateGroup x:Name="CommonStates"&gt;
    															<VisualState x:Name="Normal"/>
    															<VisualState x:Name="MouseOver"&gt;
    																<Storyboard>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz2" Storyboard.TargetProperty="Visibility"&gt;
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz1" Storyboard.TargetProperty="Visibility"&gt;
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz0" Storyboard.TargetProperty="Visibility"&gt;
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.95"/>
    																</Storyboard>
    															</VisualState>
    															<VisualState x:Name="Pressed"&gt;
    																<Storyboard>
    																	<DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.85"/>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz2" Storyboard.TargetProperty="Visibility"&gt;
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz1" Storyboard.TargetProperty="Visibility"&gt;
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz0" Storyboard.TargetProperty="Visibility"&gt;
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
    																	</ObjectAnimationUsingKeyFrames>
    																</Storyboard>
    															</VisualState>
    															<VisualState x:Name="Disabled"&gt;
    																<Storyboard>
    																	<DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.5"/>
    																</Storyboard>
    															</VisualState>
    														</VisualStateGroup>
    													</VisualStateManager.VisualStateGroups>
    													<Path x:Name="X_Fuzz2" Fill="#14C51900" Stretch="Fill" Stroke="#14C51900" Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0" VerticalAlignment="Center" Width="9" Opacity="1" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z"&gt;
    														<Path.RenderTransform>
    															<TransformGroup>
    																<ScaleTransform ScaleX="1.3" ScaleY="1.3"/>
    															</TransformGroup>
    														</Path.RenderTransform>
    													</Path>
    													<Path x:Name="X_Fuzz1" Fill="#1EC51900" Stretch="Fill" Stroke="#1EC51900" Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0" VerticalAlignment="Center" Width="9" Opacity="1" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z"&gt;
    														<Path.RenderTransform>
    															<TransformGroup>
    																<ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
    															</TransformGroup>
    														</Path.RenderTransform>
    													</Path>
    													<Path x:Name="X_Fuzz0" Fill="#FFC51900" Stretch="Fill" Stroke="#FFC51900" Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0" VerticalAlignment="Center" Width="9" Opacity="1" Visibility="Collapsed" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z"/>
    													<Path x:Name="X" Fill="#FFFFFFFF" Stretch="Fill" Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0" VerticalAlignment="Center" Width="9" Opacity="0.7" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z"&gt;
    														<Path.Stroke>
    															<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt;
    																<GradientStop Color="#FF313131" Offset="1"/>
    																<GradientStop Color="#FF8E9092" Offset="0"/>
    															</LinearGradientBrush>
    														</Path.Stroke>
    													</Path>
    												</Grid>
    											</ControlTemplate>
    										</Setter.Value>
    									</Setter>
    								</Style>
    							</Grid.Resources>
    							<VisualStateManager.VisualStateGroups>
    								<VisualStateGroup x:Name="WindowStates"&gt;
    									<VisualState x:Name="Open"&gt;
    										<Storyboard>
    											<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="Opacity"&gt;
    												<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="1"/>
    											</DoubleAnimationUsingKeyFrames>
    											<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX"&gt;
    												<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
    												<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
    												<SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
    												<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="1.05" KeySpline="0,0,0.5,1"/>
    												<SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1"/>
    											</DoubleAnimationUsingKeyFrames>
    											<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY"&gt;
    												<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
    												<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
    												<SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
    												<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="1.05" KeySpline="0,0,0.5,1"/>
    												<SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1"/>
    											</DoubleAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Closed"&gt;
    										<Storyboard>
    											<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="Opacity"&gt;
    												<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
    												<EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="0"/>
    											</DoubleAnimationUsingKeyFrames>
    											<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX"&gt;
    												<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
    												<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05"/>
    												<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0"/>
    											</DoubleAnimationUsingKeyFrames>
    											<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY"&gt;
    												<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
    												<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05"/>
    												<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0"/>
    											</DoubleAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<Grid x:Name="Overlay" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Top" Opacity="{TemplateBinding OverlayOpacity}" Background="{TemplateBinding OverlayBrush}"/>
    							<Grid x:Name="ContentRoot" Height="{TemplateBinding Height}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Width="{TemplateBinding Width}" RenderTransformOrigin="0.5,0.5"&gt;
    								<Grid.RenderTransform>
    									<TransformGroup>
    										<ScaleTransform/>
    										<SkewTransform/>
    										<RotateTransform/>
    										<TranslateTransform/>
    									</TransformGroup>
    								</Grid.RenderTransform>
    								<Border HorizontalAlignment="Stretch" Margin="-1" VerticalAlignment="Stretch" BorderThickness="1" CornerRadius="2"/>
    								<Border HorizontalAlignment="Stretch" Margin="-2" VerticalAlignment="Stretch" BorderThickness="1" CornerRadius="2.25"/>
    								<Border HorizontalAlignment="Stretch" Margin="-3" VerticalAlignment="Stretch" BorderThickness="1" CornerRadius="2.5"/>
    								<Border HorizontalAlignment="Stretch" Margin="-4" VerticalAlignment="Stretch" BorderThickness="1" CornerRadius="2.75"/>
    								<Border BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"&gt;
    									<Border Margin="1" CornerRadius="1.5" Padding="20"&gt;
    										<Grid>
    											<Grid.RowDefinitions>
    												<RowDefinition Height="Auto"/>
    												<RowDefinition/>
    											</Grid.RowDefinitions>
    											<Border Margin="7" Grid.Row="1" Background="{TemplateBinding Background}"&gt;
    												<ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
    											</Border>
    										</Grid>
    									</Border>
    								</Border>
    								<Button x:Name="CloseButton" Height="32" Margin="351,16,17,252" Style="{StaticResource ButtonStyle1}" Width="32" Content="X"/>
    							</Grid>
    							<!-- Button x:Name="CloseButton" Height="32" Width="32" IsTabStop="False" Margin="378,-14,-10,282"/-->
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    	</basics:ChildWindow.Resources>
    	<basics:ChildWindow.Style>
    		<StaticResource ResourceKey="ChildWindowStyle1"/>
    	</basics:ChildWindow.Style>
    	<Grid x:Name="LayoutRoot" Background="White"&gt;
    		<Grid.RowDefinitions>
    			<RowDefinition />
    			<RowDefinition Height="Auto" />
    		</Grid.RowDefinitions>
    
    		<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Grid.Row="1" />
    		<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right"  Margin="0,0,79,0" Grid.Row="1" />
    	</Grid>
    </basics:ChildWindow>
     
    Thursday, April 22, 2010 5:22 PM
  • Hmmmm... Looks to me more like some good old Javascript custom function
    with an iframe... we used in the old days and even still today. 

    If you run the following code at the following link, you should get a similar effect...
    http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/demo-modal.htm


    Just click on "sign up for newsletter", you'll see a window open with a web form inside
    Then make a right click inside, you won't see any "Silverlight" in the menu
    but the Properties down at the very bottom giving you the link of the form
    http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/modalfiles/newsletter.htm

    Now if you do the same action by clicking on Quick Reply on this page thread, it won't show any "Silverlight" either in the menu but
    but the Properties down at the very bottom giving you the link of the form
    http://forums.silverlight.net/forums/quickreply.aspx?ReplyToPostID=400633&iframee

    Also if you drag your mouse over the the Quick Reply,
    in you're running on good old Windows XP..., you'll see the link appear down on the task bar...

    If this answers your question, please Mark as an answer. Thank you.

    Thursday, April 22, 2010 6:44 PM
  •  I'm going to venture to guess that's it's an AJAX modal dialog popup. In fact I can almost guarantee it.

     

    http://www.asp.net/ajax/ajaxcontroltoolkit/samples/modalpopup/modalpopup.aspx

    Thursday, April 22, 2010 7:25 PM
  • Re: natedev22 

     I'm going to venture to guess that's it's an AJAX modal dialog popup. In fact I can almost guarantee it.

     I guess you may be right about Ajax modal popup...

    The example I gave above was an earlier "modal dialog" version done in Javascript... prior to
    Ajax(Asynchronous Javascript + XML) Toolkit
    I mean modal dialog ain't nothing really new... and the effect is still about the same... 
    just an earlier different approach that's all ...

    I'll agree with you, modal popup makes Ajax senses :)

     

     

     

    Thursday, April 22, 2010 9:15 PM
  • The example I gave above was an earlier "modal dialog" version done in Javascript... prior to
    Ajax(Asynchronous Javascript + XML) Toolkit
    I mean modal dialog ain't nothing really new... and the effect is still about the same... 
    just an earlier different approach that's all ...

     

     Uh... ok?

    Thursday, April 22, 2010 10:47 PM
  • Just a quick question, do you need this functionallity implemented on Silverlight?

    Friday, April 23, 2010 3:58 AM
  • No. I just was not sure if this was something Silverlight produced. What I'm getting from this posts is that this is really AJAX. Thanks for the help.

    Friday, April 23, 2010 7:17 AM
  • Silverlight.net has some tiny SL components, e.g. in the main page the showcase.

    I guess it could be enhanced quite a lot and start using SL more heavily.

    Cheers

      Braulio

    Friday, April 23, 2010 8:23 AM