{"id":5283,"date":"2007-10-30T17:14:00","date_gmt":"2007-10-30T17:14:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vbteam\/2007\/10\/30\/silverlight-ux-musings-controlling-alignment-of-ui-elements-corrina-barber\/"},"modified":"2024-07-05T14:39:24","modified_gmt":"2024-07-05T21:39:24","slug":"silverlight-ux-musings-controlling-alignment-of-ui-elements-corrina-barber","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/vbteam\/silverlight-ux-musings-controlling-alignment-of-ui-elements-corrina-barber\/","title":{"rendered":"Silverlight Ux Musings: Controlling Alignment of UI Elements [Corrina Barber]"},"content":{"rendered":"

This is my first post on the VB blog! I’m a designer on the team with a background in visual and interaction design, and I also have some .NET coding experience. I plan to start blogging on the VB blog on a regular basis, and my goal is to share some of my thoughts on and explorations with Silverlight.<\/p>\n

<\/font><\/font><\/span><\/p>\n

I’m sych’d about the possibilities enabled by Silverlight for many reasons, but, being a designer, one of the main reasons is that I can actually get cool UI implemented exactly as I envisioned. I love that I can create unique and beautiful UI in Blend, bring it into Visual Studio, and then add the interactivity and business logic I desire using VB.<\/p>\n

<\/font><\/font><\/span><\/p>\n

So anyway, one of the first things I did when I began my Silverlight explorations was to layout my XAML UI where some elements aligned left and some elements aligned right, and I wanted to make sure my UI remained exactly as I had planned even if the browser was at a size I hadn’t planned for. I found that Silverlight 1.1 didn’t have a container control to help me do this (at least not yet), so I quickly coded up a solution to this problem, and that’s what I’m going to share today. <\/p>\n

<\/font><\/font><\/span><\/p>\n

Just one additional blurb before we dive into things, this solution targets a specific problem, but it can be used in many other ways. The gist of the solution enables sharing of events and data between VB and JavaScript code, so with a little imagination you’ll be able to envision many other uses of the concepts presented in this post. In fact the <\/font><\/span>Silverlight.NET site offers information on this same concept<\/font><\/span><\/a>, in case you would like to explore things further.<\/p>\n

<\/font><\/font><\/span><\/p>\n

Solution Screen Shots<\/p>\n

<\/span><\/b><\/p>\n

The images below show how the little yellow buttons that are aligned right remain properly aligned right even as the browser is resized…<\/font><\/font><\/span><\/p>\n

<\/p>\n

<\/font><\/font><\/span><\/p>\n

<\/span><\/p>\n

<\/span><\/p>\n

\"Alignment<\/span><\/b><\/p>\n

<\/span><\/b> <\/p>\n

<\/span><\/b> <\/p>\n

<\/span><\/b> <\/p>\n

<\/span><\/b> <\/p>\n

<\/span><\/b> <\/p>\n

<\/span><\/b> <\/p>\n

<\/span><\/b> <\/p>\n

<\/span><\/b> <\/p>\n

Necessities<\/p>\n

<\/span><\/b><\/p>\n

Specific details can be found on the <\/font><\/span>Silverlight.NET site<\/font><\/span><\/a><\/p>\n

<\/span><\/b><\/p>\n

§  <\/span><\/span><\/span>Microsoft Silverlight 1.1 Alpha September Refresh<\/p>\n

<\/span><\/b><\/span><\/p>\n

§  <\/span><\/span><\/span>Visual Studio 2008 Beta2<\/p>\n

<\/span><\/b><\/span><\/p>\n

§  <\/span><\/span><\/span>Microsoft Silverlight Tools Alpha Refresh for Visual Studio 2008 Beta 2 (July 2007)<\/p>\n

<\/span><\/b><\/span><\/p>\n

Details <\/p>\n

<\/span><\/span><\/b><\/p>\n

The following steps detail out how to implement the UI and behavior pictured in the images above…<\/span><\/p>\n

<\/span><\/b><\/font><\/font><\/p>\n

The first step is to create a new VB Silverlight project<\/span><\/p>\n

<\/span><\/font><\/font><\/p>\n

0.     <\/span><\/span><\/span>Create a new VB Silverlight project by selecting File<\/b> -> New<\/b> -> Project…,<\/b> and then selecting Visual Basic<\/b> in the Project types pane and\nSilverlight Project<\/b> in the Templates pane<\/p>\n

<\/span><\/p>\n

The next step involves tweaking JavaScript a bit. To handle repositioning of elements, we first need to get a reference to the Silverlight control, so we can get its size. We then need to send the size information back to the .NET code. What follows are the changes that are required in the JavaScript code to enable this functionality<\/p>\n

<\/span><\/p>\n

1.     <\/span><\/span><\/span>Open TestPage.html.js by selecting File<\/b> -> Open<\/b> -> File…<\/b>, and then opening TestPage.html.js <\/b>from your newly created Silverlight Project directory<\/p>\n

<\/span><\/p>\n

2.     <\/span><\/span><\/span>Modify TestPage.html.js<\/b> as follows (the code in gray is the original code, and the red underlined code identifies what you need to modify in the file while the full color code is what you need to add to the file)<\/p>\n

<\/span><\/p>\n

\/\/ JScript source code<\/p>\n

<\/span><\/p>\n

<\/p>\n

 <\/p>\n

<\/span><\/p>\n

\/\/contains calls to silverlight.js, example below loads Page.xaml<\/p>\n

<\/span><\/p>\n

function createSilverlight()<\/p>\n

<\/span><\/p>\n

{<\/p>\n

<\/span><\/p>\n

  <\/span>Silverlight.createObjectEx({<\/p>\n

<\/span><\/p>\n

         <\/span>source: “Page.xaml”,<\/p>\n

<\/span><\/p>\n

         <\/span>parentElement: document.getElementById(“SilverlightControlHost”),<\/p>\n

<\/span><\/p>\n

         <\/span>id: “SilverlightControl”,<\/p>\n

<\/span><\/p>\n

         <\/span>properties: {<\/p>\n

<\/span><\/p>\n

                <\/span>width: “100%”,<\/p>\n

<\/span><\/p>\n

                <\/span>height: “100%”,<\/p>\n

<\/span><\/p>\n

                <\/span>version: “1.1”,<\/p>\n

<\/span><\/p>\n

isWindowless: “true”,<\/p>\n

<\/span><\/u><\/p>\n

                <\/span>background: “#00000000”,<\/p>\n

<\/u><\/span><\/p>\n

                <\/span>enableHtmlAccess: “true”<\/p>\n

<\/span><\/p>\n

              <\/span>},<\/span> <\/span><\/p>\n

<\/span><\/p>\n

              <\/span><\/p>\n

<\/span><\/p>\n

events: {<\/span> onLoad: OnLoaded<\/span><\/u> }<\/span><\/p>\n

<\/span><\/p>\n

       <\/span>});<\/p>\n

<\/span><\/span><\/p>\n

       <\/span>   <\/span><\/p>\n

<\/span><\/p>\n

       <\/span>\/\/ Give keyboard focus to the Silverlight control by default<\/p>\n

<\/span><\/p>\n

  <\/span><\/span>function OnLoaded(sender, args)<\/span><\/u> {<\/p>\n

<\/span><\/span><\/p>\n

      <\/span>var silverlightControl = document.getElementById(‘SilverlightControl’);<\/p>\n

<\/span><\/p>\n

      <\/span>if (silverlightControl)<\/p>\n

<\/span><\/p>\n

      <\/span>silverlightControl.focus();<\/p>\n

<\/span><\/p>\n

      <\/span><\/p>\n

<\/span><\/p>\n

      <\/span>\/\/ Onload call the method that sends the SL control size to the .NET code<\/p>\n

<\/span><\/span><\/p>\n

      <\/span>CallScriptable();<\/p>\n

<\/span><\/p>\n

    <\/span>}<\/p>\n

<\/span><\/span><\/p>\n

         <\/span><\/p>\n

<\/span><\/p>\n

  <\/span>\/\/ Send the SL control size to the .NET code<\/p>\n

<\/span><\/span><\/p>\n

    <\/span>function<\/span> CallScriptable() {<\/p>\n

<\/span><\/p>\n

      <\/span>\/\/ Get the SL control instance<\/p>\n

<\/span><\/span><\/p>\n

      <\/span>var<\/span> silverlightControl = document.getElementById(‘SilverlightControl’<\/span>);<\/p>\n

<\/span><\/p>\n

<\/span><\/p><\/p>\n","protected":false},"excerpt":{"rendered":"

This is my first post on the VB blog! I’m a designer on the team with a background in visual and interaction design, and I also have some .NET coding experience. I plan to start blogging on the VB blog on a regular basis, and my goal is to share some of my thoughts on […]<\/p>\n","protected":false},"author":260,"featured_media":8818,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[192,195],"tags":[50,137],"class_list":["post-5283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-featured","category-visual-basic","tag-corrina-barber","tag-silverlight"],"acf":[],"blog_post_summary":"

This is my first post on the VB blog! I’m a designer on the team with a background in visual and interaction design, and I also have some .NET coding experience. I plan to start blogging on the VB blog on a regular basis, and my goal is to share some of my thoughts on […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/5283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/users\/260"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/comments?post=5283"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/5283\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media\/8818"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media?parent=5283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/categories?post=5283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/tags?post=5283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}