locked
Blend 4 - Viewbox RRS feed

  • Question

  • Hiya

    Just starting to learn Blend / Silverlight and trying to understand how the viewbox works, my understanding is that as I resize a web page I can get the graphics / text to automatically resize with it, so with the code:

    <UserControl
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="SilverlightApplication1.MainPage"
        Width="800" Height="600">
        <Viewbox Width="800" Height="600" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid Height="600" Width="800" Background="White">
                <Rectangle Fill="Black" HorizontalAlignment="Left" Height="138" Margin="8,8,0,0" Stroke="Black" VerticalAlignment="Top" Width="358"/>
                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Text box" VerticalAlignment="Top" Margin="8,164,0,0" FontSize="26.667"/>
            </Grid>
        </Viewbox>
    </UserControl>

    I was hoping that the text and black rectange would resize as I changed the window size, but it doesnt.

    Hoping that someone can show me the error of my ways.

     

    Thanks

    Wednesday, June 23, 2010 1:58 PM

All replies

  • Your grid inside the viewbox has an explicit height/width, I believe you need to remove that and set it to stretch inside the viewbox. You may also need to remove the explicit height/width of the viewbox. Same with the usercontrol itself.  Here is an example that resizes with the browser window and fills the entire area:

     

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="SilverlightApplication13.MainPage">
    
    	<Viewbox>
    
    		<Grid x:Name="LayoutRoot" Background="#FFFFBABA" Height="480" Width="640">
    			<Button Content="Button" HorizontalAlignment="Left" Height="31" Margin="52,41,0,0" VerticalAlignment="Top" Width="48"/>
    			<Button Content="Button" HorizontalAlignment="Right" Height="45" Margin="0,0,126,72" VerticalAlignment="Bottom" Width="46"/>
    		</Grid>
    	</Viewbox>
    </UserControl>

    Thursday, June 24, 2010 12:44 PM
    Moderator