Right align button in toolbar with multiple toolbars and toolbartray

[Chris]

I would like to have a toolbartray with multiple toolbars. In the last toolbar I would like to right align some of the buttons. I can align to the right if there is a single toolbar and no toolbartray but when I add the toolbartray the buttons are no longer aligned to the right. The toolbartray is contained in a grid. Thank you for your help.

[Petar Mladenov]

Hello Chris,

Can you send us your set up and what exactly you expect as a result? Here is our test xaml:

<telerik:RadToolBarTray>
       <telerik:RadToolBar Width="400">
           <telerik:RadButton telerik:RadToolBar.ItemAlignment="Right" Content="Right"/>
       </telerik:RadToolBar>
       <telerik:RadToolBar Width="400" Band="1">
           <telerik:RadButton telerik:RadToolBar.ItemAlignment="Left" Content="Left"/>
       </telerik:RadToolBar>
       <telerik:RadToolBar Width="400" Band="2">
           <telerik:RadButton telerik:RadToolBar.ItemAlignment="Right" Content="Right"/>
       </telerik:RadToolBar>
   </telerik:RadToolBarTray>

Attached you can find the result which is expected - two buttons right aligned and one button left aligned.
All toolbars are located in a single tray.

Regards,
Petar Mladenov
Telerik

[Chris]

The problem occurs when the toolbars are not a fixed size. Remove the width's from your example and put them on the same band.

[Chris]

01.<Window x:Class="RadToolBarAlignmentTest.MainWindow"
02.        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03.        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04.        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
05.        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
06.        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
07.        mc:Ignorable="d"
08.        Title="MainWindow" Height="350" Width="525">
09.    <Grid>
10.    <telerik:RadToolBarTray>
11.      <telerik:RadToolBar>
12.        <telerik:RadButton telerik:RadToolBar.ItemAlignment="Right" Content="Right"/>
13.      </telerik:RadToolBar>
14.      <telerik:RadToolBar>
15.        <telerik:RadButton telerik:RadToolBar.ItemAlignment="Left" Content="Left"/>
16.      </telerik:RadToolBar>
17.      <telerik:RadToolBar>
18.        <telerik:RadButton telerik:RadToolBar.ItemAlignment="Right" Content="Right"/>
19.      </telerik:RadToolBar>
20.    </telerik:RadToolBarTray>
21.  </Grid>
22.</Window>

 

With the attached XAML the toolbars display as the attached image. What I would like to accomplish is to make the last toolbar fill the remaining space so that the last radbutton shows on the right by the edge of the window.

 

[Petar Mladenov]

Hello Chris,

First, let me make the clarification that the ItemAlignment attached property works over the items in the RadToolBar only and has nothing to do with the positions / alignments of the RadToolBar controls.

RadToolBarTray is nothing more than a panel with Grid-like positioning of its RadToolbar children. First , it was designed to incorporate features like drag / drop of toolbars , locking of toolbars but they are not implemented. You can always replace it successfully with normal Grid. The layout you need can be accomplished with this xaml configuration:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <telerik:RadToolBar Grid.Column="0" >
        <telerik:RadButton telerik:RadToolBar.ItemAlignment="Right" Content="Right"/>
    </telerik:RadToolBar>

    <telerik:RadToolBar Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left">
        <telerik:RadButton telerik:RadToolBar.ItemAlignment="Left" Content="Left"/>
    </telerik:RadToolBar>
    <telerik:RadToolBar Grid.Column="2">
        <telerik:RadButton telerik:RadToolBar.ItemAlignment="Right" Content="Right"/>
    </telerik:RadToolBar>
</Grid>

Regards,
Petar Mladenov
Telerik