(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .

Tip: Resizing the Silverlight object from the Silverlight application

(3 votes)
Martin Mihaylov
>
Martin Mihaylov
Joined Oct 29, 2007
Articles:   50
Comments:   70
More Articles
12 comments   /   posted on Aug 19, 2008
Categories:   General

This article is compatible with the latest version of Silverlight.

This tip is about adjusting the size of the Silverlight object in the Html to the size of the content in our Silverlight application. The example I will use will manipulate only the height, because the width can be manipulated in analogical way.

Let's start with explanation of how we're going to access the Silverlight object in the HTML. We use the HtmlPage object in the codebehind. With its help we invoke a javascript function, which will deal with Silverlight object in the mark up:

private void ResizeSilverlightOnject( double height )
{
    HtmlPage.Window.Invoke( "ResizeObject", new object[] { height } );
}

The function is placed in the markup and is called ResizeObject. It takes as parameter the desired height. Note that to declare the Silverlight plug-in I use a div and an object element. Here it is:

function ResizeObject( height )
{     
    var host = document.getElementById( "silverlightControlHost" );
 
    host.style.height = height + "px";
}

We simply get the div that hosts the Silverlight object and set the height in its style property to the passed height. If you don't want the div to be smaller than the content area of the browser the function should look like that:

function ResizeObject( height )
{     
    var host = document.getElementById( "silverlightControlHost" );
    if( document.documentElement.clientHeight < height )
    {
        host.style.height = height + "px";
    }
    else
    {
        host.style.height = document.documentElement.clientHeight.toString() + "px";
    }
}

Here we use the clientHeight property of the documentElement. It returns the size of the height of the content area of the browser. We compare it to the passed height and in dependance of the result we set the div's height either to the height sent as function's argument or to the clientHeight.

That's it, not hard at all. Hope it solves some problems. Here is also a very simple demo and its source code if you want to see this tip in action. Notice that when the content of the grid grows bigger than the content area of the browser the browser's scrollbar appears. Of course it can be used in other cases. For example a silverlight control placed in the mark up can also be resized depending on the content in it like Silverlightshow's Highlights control.


Subscribe

Comments

  • -_-

    RE: Tip: Resizing the Silverlight object from the Silverlight application


    posted by David Roh on Aug 20, 2008 07:28
    Hi Martin,
     
    Thanks for sharing this important tip.
     
    HtmlPage.Window.Invoke("ResizeObject", new object[] { height });
     
    throws   "Failed to Invoke: ResizeObject." exception
     
    on my system - Windows Server 2008 with all of the latest updates for Silverlight and Visual Studio 2008
     
    David Roh
  • Enrai

    RE: Tip: Resizing the Silverlight object from the Silverlight application


    posted by Enrai on Aug 20, 2008 08:33

    Hm...I hadn't updated my studio fully yet, maybe that's the reason. Try adding these attributes to the class and the memebers that are used to access the HTML:

     

    [ScriptableType]
    public partial class Page : UserControl
    {
        public Page(){...}
        
        //the methods that are not involved in accessing the HTML don't need such attributes.
        
        [ScriptableMember]
        private void ResizeSilverlightOnject( double height )
        {
            HtmlPage.Window.Invoke( "ResizeObject", new object[] { height } );
        }
    }

     

    and tell me if it worked. :)

  • -_-

    RE: Tip: Resizing the Silverlight object from the Silverlight application


    posted by samvayn on Aug 20, 2008 12:59

    The problem actually is in ..\ResizeSilverlightObject\LayoutExperiments\Bin\Debug\TestPage.html - it is missing the function. If running from VisualStudio - then make sure that your Web project is set as a StartUp project - page in it is correct.

     

  • Enrai

    RE: Tip: Resizing the Silverlight object from the Silverlight application


    posted by Enrai on Aug 20, 2008 13:27

    Yes, I used the TestPage in the Web Site porject while writing the example. In the automatically generated HTML page in the Silverlight project the javascript function is missing.

  • -_-

    RE: Tip: Resizing the Silverlight object from the Silverlight application


    posted by Anna on Aug 21, 2008 05:29

    Thanks a lot! My boss wanted me to do something similar and I just did it with your tutorial.

     

    math-geek-rock-chick.blogspot.com

  • -_-

    RE: Tip: Resizing the Silverlight object from the Silverlight application


    posted by Basit on Nov 21, 2008 00:36

    Wow !  will i do this technique with  asp:silvertight   tag .

  • Enrai

    RE: Tip: Resizing the Silverlight object from the Silverlight application


    posted by Enrai on Nov 24, 2008 02:57

    Yes you can use that trick with the <asp:Silverlight />. The browser renders it as <span /> and in it the object element is created via javascript. So place your asp:Silverlight control in a div and give it a proper id. And use the same method. :)

  • -_-

    RE: Tip: Resizing the Silverlight object from the Silverlight application


    posted by Immu on Oct 08, 2009 17:56
    "Hi,

    I am new to learn about how to call Javascript function from silverlight.

    I read few articles , blogs and forum, guess this is a right platform and hope here my problem could be resolved.

    below I pasted  my code ( I am trying as a startup to test the communication between SilverLight and Javascript)

    Error is  "Failed to Invoke: updateText."

    at MainPage.XAML.cs

    namespace CallJavaScriptfrmSilverlit
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();

                         
            }

            private void CallJavaScript_Click(object sender, RoutedEventArgs e)
            {
                HtmlPage.Window.Invoke("updateText", this.Result.Text);

            }

                }
    }

    at Mainpage.xaml


    <UserControl x:Class="CallJavaScriptfrmSilverlit.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
            <Grid x:Name="LayoutRoot" Background="White">         
                    
            <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
                <TextBox x:Name="Result" HorizontalAlignment="Stretch" Width="200" Height="24"/>
                <Button x:Name="CallJavaScript" Content="UpdateJavaScript"
                        Width="130" Height="24" Margin="10,0,0,0" Click="CallJavaScript_Click"/>
            </StackPanel>

        </Grid>
    </UserControl>

     at default.ASPX

     

    <body>
        <form id="form1" runat="server">
        <div>

        <script type="text/javascript">

            // called from silverlight

            function updateText(text)
            {

                document.getElementById("result").value = text;
                control.Content.Page.Update(text("text"));
            }</script>  
       
        </div>
        </form>
    </body>
    </html>

     

    I cannot understand why SilverApplication unable to invoke javascript? In theory it should work.

    Your Input is highly appreciable.

    Thanks!


  • hafizmsuleman

    RE: Tip: Resizing the Silverlight object from the Silverlight application


    posted by hafizmsuleman on Oct 09, 2009 07:43
    Hi Enrai,

    the source code you attahced with this article is not working and throwing exceptoin "Failed to Invoke: ResizeObject".

    Please  have a look.

    Thanks

     



  • -_-

    RE: Tip: Resizing the Silverlight object from the Silverlight application


    posted by lwatzon on Jul 26, 2010 19:23

    could you not just do it in Silverlight its self? you can in version 3 at least. 


    Dim thisapp As HtmlElement = HtmlPage.Document.GetElementById("silverlightObject")

     thisapp.SetStyleAttribute("height", "20")
            thisapp.SetStyleAttribute("width", "100")

  • lnikolov

    RE: Tip: Resizing the Silverlight object from the Silverlight application


    posted by lnikolov on Jan 14, 2011 12:06
    The article has been updated to the latest version of Silverlight and Visual Studio.
  • rrd

    Re: Tip: Resizing the Silverlight object from the Silverlight application


    posted by rrd on Apr 11, 2012 15:11

    thanks thanks thanks...!

    i just doing some stupidity to gain this stuff...

    thanks 

Add Comment

Login to comment:
  *      *