Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Navigation > How to stretch toolbar & menus?

• Thierry Fierens

  Posted on Mar 15, 2009 (permalink)

  Hi,
  
  I was wondering if there was a way to stretch the toolbar & menu bar all the way across a page even if the toolbar/menubar is not fully filled with buttons? It may contain New, Update & Delete buttons for example but I still want the handles & background to be stretch across the entire width of my page.
  
  Can you help?
  
  Thanks.
  
  T.

  Reply

• Boyan Boyan

  Posted on Mar 16, 2009 (permalink)

  Hi Thierry ,
  
    You don't need to do anything to stretch RadToolbar or RadMenu as the default for them i s to stretch across the whole page. Just make sure that you have set HorizontalAlignment to "Stretch" or not set it at all as stretch is the default . If you set it to "Left" or "Center" the item won't stretch across the whole width of the page. Also make sure that you have not set specific Width and it is set to Auto or not set at all. Hope that helps.
  
  Kind regards,
  Boyan
  the Telerik team

  
  
  Instantly find answers to your questions on the new Telerik Support Portal.
  Check out the tips for optimizing your support resource searches.

  Reply

• Thierry Fierens

  Posted on Mar 16, 2009 (permalink)

  Hi Boyan,
  
  Thanks for the reply. Unless I missed it, it did not work for me. Below is the code I'm just playing with:
  
    <telerikNavigation:RadToolBarTray x:Name="mainMenuTray" Grid.Row="1">
      <telerikNavigation:RadToolBarTray.Background>
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF282929" />
        <GradientStop Color="#FF55565b" Offset="1" />
       </LinearGradientBrush>
      </telerikNavigation:RadToolBarTray.Background>
      <telerikNavigation:RadToolBar x:Name="toolbarMenu" Band="0" BandIndex="0">
       <telerikNavigation:RadMenu VerticalAlignment="Top" HorizontalAlignment="Left"
        x:Name="mainMenu" ClickToOpen="True">
        <telerikNavigation:RadMenuItem x:Name="MenuFile" Header="File">
         <telerikNavigation:RadMenuItem x:Name="mnuCompanyAdd" Header="Add" Click="mnuCompanyAdd_Click">
          <telerikNavigation:RadMenuItem.Icon>
           <Image Source="/Images/CompanyAdd16.png" />
          </telerikNavigation:RadMenuItem.Icon>
         </telerikNavigation:RadMenuItem>
         <telerikNavigation:RadSeparator />
         <telerikNavigation:RadMenuItem x:Name="mnuCompanyUpdate" Header="Update" Click="mnuCompanyUpdate_Click">
          <telerikNavigation:RadMenuItem.Icon>
           <Image Source="/Images/CompanyUpdate16.png" />
          </telerikNavigation:RadMenuItem.Icon>
         </telerikNavigation:RadMenuItem>
                              <telerikNavigation:RadSeparator />
         <telerikNavigation:RadMenuItem x:Name="mnuCompanyDelete" Header="Delete" Click="mnuCompanyDelete_Click">
          <telerikNavigation:RadMenuItem.Icon>
           <Image Source="/Images/CompanyDelete16.png" />
          </telerikNavigation:RadMenuItem.Icon>
         </telerikNavigation:RadMenuItem>
                              <telerikNavigation:RadSeparator />
         <telerikNavigation:RadMenuItem x:Name="mnuCompanyClose" Header="Close" Click="mnuCompanyClose_Click">
          <telerikNavigation:RadMenuItem.Icon>
           <Image Source="/Images/Close16.png" />
          </telerikNavigation:RadMenuItem.Icon>
         </telerikNavigation:RadMenuItem>
        </telerikNavigation:RadMenuItem>
       </telerikNavigation:RadMenu>
      </telerikNavigation:RadToolBar>      
    </telerikNavigation:RadToolBarTray>
    <telerikNavigation:RadToolBarTray x:Name="mainToolbarTray" Grid.Row="2" >
      <telerikNavigation:RadToolBarTray.Background>
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF282929" />
        <GradientStop Color="#FF55565b" Offset="1" />
       </LinearGradientBrush>
      </telerikNavigation:RadToolBarTray.Background>
      <telerikNavigation:RadToolBar x:Name="toolbarDocument" Band="0" BandIndex="1">
       <Button Click="btnCompanyAdd_Click" Tag="CompanyAdd" x:Name="btnCompanyAdd"
        ToolTipService.ToolTip="Create a new company">
        <StackPanel Orientation="Horizontal">
         <Image HorizontalAlignment="Center" VerticalAlignment="Center"
          Source="/Images/CompanyAdd16.png" />
          <TextBlock Text="Add" />
        </StackPanel>
       </Button>
       <Button Click="btnCompanyUpdate_Click" Tag="CompanyUpdate" x:Name="btnCompanyUpdate"
        ToolTipService.ToolTip="Update an existing company">
        <StackPanel Orientation="Horizontal">
         <Image HorizontalAlignment="Center" VerticalAlignment="Center"
          Source="/Images/CompanyUpdate16.png" />
          <TextBlock Text="Update" />
        </StackPanel>
       </Button>
       <Button Click="btnCompanyDelete_Click" Tag="CompanyDelete" x:Name="btnCompanyDelete"
        ToolTipService.ToolTip="Delete an existing company">
        <StackPanel Orientation="Horizontal">
         <Image HorizontalAlignment="Center" VerticalAlignment="Center"
          Source="/Images/CompanyDelete16.png" />
          <TextBlock Text="Delete" />
        </StackPanel>
       </Button>
      </telerikNavigation:RadToolBar>    
    </telerikNavigation:RadToolBarTray>
  
  I've uploaded a snapshot for your convenience - http://www.mansfieldart.com/snapprob1.jpg
  
  Any ideas? Have I missed what you suggested or something else?
  
  Thanks.
  
  T.
  
  

  Reply

• Ivan Ivan

  Posted on Mar 18, 2009 (permalink)

  Hi Thierry,
  
  Currently the tray's layout mechanism does not respect RadToolBar 's HorizontalAlignment property. This bug is scheduled to be fixed for the upcoming Service Pack. Fortunately, you can simulate the correct behavior (until the Serice Pack is released) via a toolbar inside a grid and the HorizontalAlignment property (as Boyan suggested) - attached you can find an application that demonstates this technique.
  
  PS: In the example you sent us you can use only one ToolBarTray - the toolbar's layout respects the Band and the BandIndex properties.
  
  Sincerely yours,
  Ivan
  the Telerik team

  
  
  Instantly find answers to your questions on the new Telerik Support Portal.
  Check out the tips for optimizing your support resource searches.

  Attached files

  • 197614-example-20090318-1041.zip

  Reply

• Thierry Fierens

  Posted on Mar 20, 2009 (permalink)

  Hi Gents,
  
  Sorry about the delay getting back to you, I never got notified and I only went to check the forum tonight.
  
  Removing the telerikNavigation:RadToolBarTray and replacing it by a grid did the trick, so thanks for all your help.
  
  Regards,
  
  T.

  Reply

• Leon

  Posted on Nov 9, 2010 (permalink)

  Hey All,
  
  Has this issue been addressed in the current release (2010.2.0924.1030)?
  
  I need to leverage the RadToolBarTray as I need to create the toolbar's dynamically and they need to change/re-arrange when the size of the main window is changed.
  
  Thanks
  
  Leon

  Reply

• Viktor Tsvetkov Viktor Tsvetkov

  Posted on Nov 12, 2010 (permalink)

  Hi Leon,
  
  I have added this issue in our PITS under the name "ToolBar: ToolBarTray doesn't respect ToolBar's HorizontalAlignment property" and we will consider fixing it for Q3 SP1.
  
  Sincerely yours,
  Viktor Tsvetkov
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Navigation > How to stretch toolbar & menus?