This is a migrated thread and some comments may be shown as answers.

Right align button in toolbar with multiple toolbars and toolbartray

4 Answers 243 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 09 Jun 2016, 02:57 PM
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.

4 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 10 Jun 2016, 06:08 AM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Chris
Top achievements
Rank 1
answered on 10 Jun 2016, 02:51 PM
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.
0
Chris
Top achievements
Rank 1
answered on 10 Jun 2016, 03:07 PM

01.<Window x:Class="RadToolBarAlignmentTest.MainWindow"
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.

 

0
Petar Mladenov
Telerik team
answered on 13 Jun 2016, 01:25 PM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Tags
ToolBar
Asked by
Chris
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Chris
Top achievements
Rank 1
Share this question
or