Right align button in toolbar with multiple toolbars and toolbartray

5 posts, 0 answers
  1. Chris
    Chris avatar
    18 posts
    Member since:
    Sep 2014

    Posted 09 Jun Link to this post

    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.
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 10 Jun Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Chris
    Chris avatar
    18 posts
    Member since:
    Sep 2014

    Posted 10 Jun in reply to Petar Mladenov Link to this post

    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.
  5. Chris
    Chris avatar
    18 posts
    Member since:
    Sep 2014

    Posted 10 Jun Link to this post

    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.

     

  6. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 13 Jun Link to this post

    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.
Back to Top
UI for WPF is Visual Studio 2017 Ready