Help with Nokola's NavSeven Silverlight navigation bar!

Question

I really like Nokola's NavSeven Silverlight Bar.

You can take a look at it here: http://www.nokola.com/sources/

You can notice right away that the Navigation Bar stretches all the way to 100% and icons are nicely aligned in the middle.

The navigation bar itself is 900px wide in Page.xaml.

I've got it to work on my website but for some reason I cannot stretch it to 100% like on Nokola's site.

Here's what happens: I set width to 100% but instead of stretching, it stays at 900px wide and fills everything else with Whitespace. That's another problem - no matter what I change the background color to, it is always white which looks bad on my grey background of the website. But that's not really the point, it still doesn't stretch like it is supposed to, like it is on Nokola's website.

Here's the code I use to include my Silverlight file:

<div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="43px">
    <param name="source" value="ClientBin/NavSeven.xap"/>
    <param name="onError" value="onSilverlightError" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="3.0.40624.0" />
    <param name="autoUpgrade" value="true" />
          <param name="enableGPUAcceleration" value="true" />
    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=3.0.40624.0" style="text-decoration: none">
      <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
    </a>
     </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

Answer 1

Get rid of any fixed widths in your page.xaml. The 900 is likely still present on another grid and overriding the default behaviour.

If you remove that it will stretch to fit the parent Silverlight container (which defaults to fullscreen unless told otherwise in the html page - 43 pixels high in your case).

If that does not fix it please post your XAML for the page itself and correcting it will take only a few minutes.

Hope this helps.