Programming with .NET - General

How to specify the height and width of Canvas by percentage.?

The code below doesn't work. Can anyone tell me how to specify the height or width of Canvas by percentage? Thanks.

Re: How to specify the height and width of Canvas by percentage.?

I guess the 100% should be related to some value.

you can specify the percentage of silverlight host in de createsilverlight function:

function createSilverlight(xaml){
Silverlight.createObject(xaml, document.getElementById("SilverlightControlHost"),
"SilverlightControl",
{width:'100%', height:'100%', version:'1.1'},
{onError:null, onLoad:null},null); }

Or you can calculate the size of the canvas in relation to the browser size or html element
(haven't tested this, but i think it should work):

public void Page_Loaded(object sender, EventArgs e){

HtmlDocument _document = HtmlPage.Document;

Canvas root = FindName("root") as Canvas;
ScaleTransform scale = new ScaleTransform();
scale.ScaleX = _document.GetElementByID("someElement").getAttribute('width');
scale.ScaleY = _document.GetElementByID("someElement").getAttribute('height');
root.RenderTransform = scale;

}

Re: Re: How to specify the height and width of Canvas by percentage.?

Thanks. I will try and let you know.

Re: How to specify the height and width of Canvas by percentage.?

Aleho666
Canvas root = FindName("root") as Canvas;
ScaleTransform scale = new ScaleTransform();
scale.ScaleX = _document.GetElementByID("someElement").getAttribute('width');
scale.ScaleY = _document.GetElementByID("someElement").getAttribute('height');
root.RenderTransform = scale;

ScaleTransform works the the percentage of the actual canvas scale (1 = 100%, 0.5 = 50%) and if you set the scale with getAttibute('Width') then it is going to multiply the canvas by that number (the actual canvas will be width times wider) I haven't tried it (I dont use JavaScript) but I think it works that way.

I think, this should work

Double width = _document.GetElementByID("someElement").getAttribute('width');
root.SetValue(WidthProperty, width);

This will get better in Silverlight 2.0 with "{Binding }" property.

Correct me if I am wrong.

Re: How to specify the height and width of Canvas by percentage.?

Cass
ScaleTransform works the the percentage of the actual canvas scale (1 = 100%, 0.5 = 50%)

Yes, you are correct Cass (seems I forgat that). I usually use ScaleTransform to create a relative size canvas to an other canvas (not to HTML elements).

Re: Re: How to specify the height and width of Canvas by percentage.?

Thanks a lot. man.. For the time being, I'm facing the VS 2008 installation problem on Windows Vista. so, I can't continue learning... I spent the whole day to figure out what the problem is ...

Do you have any idea how to check whether my Vista is pre-released version or not? Actually, I got this OS (Vista Home Premium) when I bought a laptop (Sony VAIO). I tried to install the .NET 3.0 sp1 on that machine but it failed. I got the message that this product is not supported on Vista Operation System.

Re: Re: Re: How to specify the height and width of Canvas by percentage.?

I just come to know that .NET 3.0 sp1 doesn't support for Vista.. I just manged to install .NET 3.5 right now... (not sure why it works right now.) .. i hav to try to install VS 2008 again...

Re: How to specify the height and width of Canvas by percentage.?

I just tested and it doesn't work.

1. TestPage.html

.silverlightHost { width: 855px; height : 100%; }

2. TestPage.html.js

// JScript source code

//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight()
{
    Silverlight.createObjectEx({
        source: "Page.xaml",
        parentElement: document.getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
            width: "100%",
            height: "100%",
            version: "1.1",
            enableHtmlAccess: "true"
        },
        events: {}
    });

    // Give the keyboard focus to the Silverlight control by default
    document.body.onload = function() {
      var silverlightControl = document.getElementById('SilverlightControl');
      if (silverlightControl)
      silverlightControl.focus();
    }

}

3. Page.xaml.cs

HtmlDocument _document = HtmlPage.Document;
                ScaleTransform scale = new ScaleTransform();
                scale.ScaleX = Convert.ToDouble (_document.GetElementByID ("SilverlightControlHost").GetAttribute ("width"));
                scale.ScaleY = Convert.ToDouble (_document.GetElementByID ("SilverlightControlHost").GetAttribute ("height"));
                this.RenderTransform = scale;

It shows nothing on the browser. Did I miss something? Thanks in advance.

Re: How to specify the height and width of Canvas by percentage.?

Thanks. It works with Cass's code.

Double width = _document.GetElementByID("someElement").getAttribute('width');
root.SetValue(WidthProperty, width);

Re: How to specify the height and width of Canvas by percentage.?

When I try to do this I get an null string for the width. From what element did you manage to get the width? Did you modify the default generated test page to test this?

(From a default application auto-generated code)

public void Page_Loaded(object o, EventArgs e)
        {

            InitializeComponent();

HtmlDocument _document = HtmlPage.Document;

_document.GetElementByID("SilverlightControlHost").GetAttribute("id"); --> equal to SilverlightControlHost as expected

_document.GetElementByID("SilverlightControlHost").GetAttribute("width"); -> Is null

...

Did a few more,

.GetAttribute("style") is set to [object],

_document.GetElementByID("SilverlightControlHost")..ccsClass is silverLightHost

But I didn't figure out how to extract the width from the style neither...

Any hints?

What I want to do at the end, is to make the page full screen on the browser (using BrowserHost.IsFullScreen = true;) then adjust the size of all the various components according to the available space on the screen...

Re: How to specify the height and width of Canvas by percentage.?

Try the following steps ~

1. Set [Scriptable] in Page.xaml

2. Add the constructor in Page.xaml

public Page()
        {
            try
            {
                WebApplication.Current.RegisterScriptableObject ("EntryPoint", this);
            }
            catch ( Exception ex )
            {

            }

        }

3. Update this function in TestPage.html.js. (Take a look at bold)

document.body.onload = function() {
      var silverlightControl = document.getElementById('SilverlightControl');
      if (silverlightControl)
         silverlightControl.focus();

      var control = document.getElementById("SilverlightControl");
      control.Content.EntryPoint.InitResolution(screen.width, screen.height);

    }

4. Add this function in Page.xaml

double _width;
        double _height;

        [Scriptable]
        public void InitResolution(string width,string height)
        {
            _width = Convert.ToDouble(width);
            _height = Convert.ToDouble(height);
            this.SetValue (WidthProperty, _width);
        }

then, it will work.