locked
design cut off in browser (Nancyeb01) - 11/11/2007 1:32 PM PST RRS feed

  • Question

  • By: Nancyeb01


    Hi,
    I am successfully creating animations and graphics with Blend for 
    Silverlight 1.0 and they build ok. But, if I make anything bigger than 
    640x480 it keeps 'applying' a size constraint of 640 x 480 no matter what 
    size my design really is. So, the design is cut off on the right and bottom.
    
    Would you have any ideas about this? Here a simple test xaml from blend 
    where I made the page canvas 1200x800:
    
    <Canvas
    	xmlns="http://schemas.microsoft.com/client/2007"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	Width="1200" Height="800"
    	x:Name="Page"
    	>
    	<Canvas.Background>
    		<LinearGradientBrush EndPoint="0.373,0.008" StartPoint="0.397,0.923">
    			<GradientStop Color="#FF35444D" Offset="0"/>
    			<GradientStop Color="#FFFFFFFF" Offset="1"/>
    		</LinearGradientBrush>
    	</Canvas.Background>
    	<Canvas Width="976" Height="528" Canvas.Left="166" Canvas.Top="124" 
    x:Name="shapes">
    		<Rectangle Width="299" Height="265" Stroke="#FFF6921C" StrokeThickness="3" 
    Canvas.Top="119">
    			<Rectangle.Fill>
    				<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
    					<GradientStop Color="#FFCC8826" Offset="0"/>
    					<GradientStop Color="#FFFFFFFF" Offset="1"/>
    				</LinearGradientBrush>
    			</Rectangle.Fill>
    		</Rectangle>
    		<Ellipse Width="352" Height="272" Stroke="#FFF6921C" StrokeThickness="3" 
    Canvas.Left="240" Canvas.Top="256">
    			<Ellipse.Fill>
    				<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
    					<GradientStop Color="#FF81CC26" Offset="0"/>
    					<GradientStop Color="#FFFFFFFF" Offset="1"/>
    				</LinearGradientBrush>
    			</Ellipse.Fill>
    		</Ellipse>
    		<Rectangle Width="434" Height="354" Stroke="#FFF6921C" StrokeThickness="3" 
    Canvas.Left="542">
    			<Rectangle.Fill>
    				<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
    					<GradientStop Color="#FFA0B4BF" Offset="0"/>
    					<GradientStop Color="#FFFFFFFF" Offset="1"/>
    				</LinearGradientBrush>
    			</Rectangle.Fill>
    		</Rectangle>
    	</Canvas>
    </Canvas>
    
    Nancy Boyle
    Graphic Designer
    Thursday, February 21, 2008 7:24 PM

All replies

  • rsampson


    When the project builds it creates a default.html page which seems to create 
    a 640x480 silverlight object host.  I modifed my default.html page in notepad 
    to match the size of the canvas in blend.    So just modify the file like 
    this:
    
    <style type="text/css">
    		.silverlightHost {
    			height: 800px;
    			width: 1200px;
    		}
    	</style>
    Friday, February 22, 2008 10:43 PM
  • I'm having a problem that is similar but probably has a different root cause.  The height of my silverlight app is actually 825 pixels and I have the height style tags set as you described above.  And indeed when I view my site on my desktop pc which has a large monitor I can see my entire silverlight app.  However when I view the site on my laptop web browser which has a window that is probably about 800 pixels high, the app is cutoff and there is no scroll bars that let me see the full silverlight app.

    I tried setting the overflow style to scroll to see if that made a difference with no luck.  My site is at:

    http://www.silverlightwebapps.com/
    Thursday, June 26, 2008 1:24 AM