How to stretch toolbar & menus?

[Thierry Fierens]

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.

[Boyan]

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.

[Thierry Fierens]

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.

[Ivan]

Hi Thierry,

Currently the tray's layout mechanism does not respect RadToolBar

[Thierry Fierens]

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.

[Leon]

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

[Viktor Tsvetkov]

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