ContentAlignment & Style

12 posts, 0 answers
  1. Paul
    Paul avatar
    1 posts
    Member since:
    Oct 2008

    Posted 09 Apr 2009 Link to this post

    Hi,

    I have two problems regarding RadToolbar. 
    I have put a stretched toolbar in a grid, and I want to add a control to the right of the toolbar, but I can't seem to do this.
    Secondly when I put a usercontrol, the style of the toolbar is not propagated.  How do I do that?

    Thx for any useful tips.
  2. Ivan
    Admin
    Ivan avatar
    519 posts

    Posted 13 Apr 2009 Link to this post

    Hi Paul,

    Thank you for your interest in the RadToolBar control.

    Current implementation of the toolbar is with a StackPanel as strip row. This is the reason all the toolbar's items to layout in its left side. However we found your idea very nice and updated your Telerik points.

    About items' styling: the toolbar uses the ItemContainerStyleSelector in order to restyle some of most popular controls (currently we are supplying styles for RadSeparator, TextBlock, TextBox, Button, ToggleButton, CheckBox, RadioButton). This way in order to re-style your control you should assign it with a new style - indeed if you look in toolbar's style you will find just one StackPanel nested in a Grid (both very clear) and nothing to propagate to items. If you plan to place this user-control inside a toolbar please have a look inside all predefined toolbar items styles - there are many ideas how to make a control good looking inside the toolbar.

    Hope this information helps.

    Regards,
    Ivan
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. DevCraft banner
  4. Harsh
    Harsh avatar
    5 posts
    Member since:
    Apr 2009

    Posted 28 Apr 2009 Link to this post

    Hi,

    I'm using the toolbarTray and toolbar control inside a grid with column width set to *. I want these controls to have width set to window size width as well. How can I do that ?

    Thanks,
    HK
  5. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 28 Apr 2009 Link to this post

    Hello Harsh,

    Try putting the RadToolBar outside of a RadToolbarTray directly into the Grid. 

    Kind regards,
    Miroslav
    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.
  6. John
    John avatar
    1 posts
    Member since:
    Mar 2009

    Posted 30 Jun 2009 Link to this post

    I cannot work out how to set the background colour of the RadToolBar, to change it from it's default grey colour.

    I can change the background colour of the RadMenu in the toolbar with no problem by setting the Background property of the RadMenu control. But when I try setting the Background colour of the RadToolBar it seems to have no effect. What am I doing wrong?

    Thanks for any help you can offer,
    John
  7. Ivan
    Admin
    Ivan avatar
    519 posts

    Posted 01 Jul 2009 Link to this post

    Hi John,

    With the latest release you can not change the background of the toolbar because there are some complication with its templates for vertical and horizontal orientation. Actually there are two backgrounds - one for the horizontal template and other for the vertical template. With the latest release you should edit the toolbar's template in order to change its appearance.

    However after upcoming Q2 release (which is targeted these day) we will emphasize on control-customization.

    Best wishes,
    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.
  8. Ivo
    Ivo avatar
    20 posts
    Member since:
    Mar 2009

    Posted 22 Jul 2009 Link to this post

    Hi,

    Does the grid in Q2 already supports to add controls on the right when it is stretched?
    Are there any plans to do this?

    Thanks,
    Ivo
  9. Ivan
    Admin
    Ivan avatar
    519 posts

    Posted 23 Jul 2009 Link to this post

    Hi Ivo,

    In the current version the item's alignment is not respected. This feature is already in our to-do list but is still not implemented. Nevertheless I hope this one and many other improvements will be available for next Q.

    In order to workaround the case you should use two toolbars as in the code below:

    <UserControl 
        x:Class="AgApp.Page" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" 
        > 
        <Grid x:Name="LayoutRoot" Background="White"
            <Grid.RowDefinitions> 
                <RowDefinition Height="*" /> 
                <RowDefinition Height="*" /> 
            </Grid.RowDefinitions> 
            <Grid.ColumnDefinitions> 
                <ColumnDefinition Width="*" MinWidth="180" /> 
                <ColumnDefinition Width="*" /> 
            </Grid.ColumnDefinitions> 
     
            <telerikNavigation:RadToolBar 
                Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Stretch"
                <Button Content="1" MinWidth="22" /> 
                <Button Content="2" MinWidth="22" /> 
                <Button Content="3" MinWidth="22" /> 
            </telerikNavigation:RadToolBar> 
     
            <Grid Grid.Row="1"
                <Grid.ColumnDefinitions> 
                    <ColumnDefinition Width="*" /> 
                    <ColumnDefinition Width="Auto" /> 
                </Grid.ColumnDefinitions> 
     
                <telerikNavigation:RadToolBar 
                    Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Stretch"
                    <TextBlock Text="Left: " /> 
                    <Button Content="A" MinWidth="22" /> 
                    <Button Content="B" MinWidth="22" /> 
                    <Button Content="C" MinWidth="22" /> 
                </telerikNavigation:RadToolBar> 
     
                <telerikNavigation:RadToolBar 
                    Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Right"
                    <TextBlock Text="Right: " telerikNavigation:RadToolBar.OverflowMode="Never" /> 
                    <Button Content="X" MinWidth="22" telerikNavigation:RadToolBar.OverflowMode="Never" /> 
                    <Button Content="Y" MinWidth="22" telerikNavigation:RadToolBar.OverflowMode="Never" /> 
                    <Button Content="Z" MinWidth="22" telerikNavigation:RadToolBar.OverflowMode="Never" /> 
                </telerikNavigation:RadToolBar> 
            </Grid> 
        </Grid> 
    </UserControl> 

    We hope this information will help you.

    Best wishes,
    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.
  10. Ivo
    Ivo avatar
    20 posts
    Member since:
    Mar 2009

    Posted 23 Jul 2009 Link to this post

    Hi Ivan ,
    I already tried the two tool bar approach and you must agree with me that is not a good soluction, simply because the user can tell that there are two toolbars and one with nothing on it.
    Is there anyway to apply an template to the first tool so we can remove the initial three dots and final arrow?

    Thanks,
    Ivo

  11. Ivan
    Admin
    Ivan avatar
    519 posts

    Posted 23 Jul 2009 Link to this post

    Hi Ivo,

    One of the toolbar's major features is the ability of automatically repositioning its items from the strip-area to the overflow-area and back. If you do not need such a behavior then you can place all toolbar's items inside a horizontal oriented stack panel and initialize its HorizontalAlignment property to Right:

    <Grid
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top"
            <TextBlock Text="Right: " /> 
            <Button Content="X" MinWidth="22"  /> 
            <Button Content="Y" MinWidth="22"  /> 
            <Button Content="Z" MinWidth="22" /> 
        </StackPanel> 
    </Grid> 

    Please note the RadToolBar customizes the Style of its items if they are: TextBlock, TextBox, Button, CheckBox, RadioButton, ToggleButton, RadSeparator, RadToolBarSeparator. In order to mimic the toolbar's look you should re-style your items too.

    All the best,
    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.
  12. Terry Foster
    Terry Foster avatar
    60 posts
    Member since:
    Sep 2009

    Posted 09 Oct 2009 Link to this post

    Can you describe in detail how I can apply the style that is applied to a Button when added to RadToolBar to my own control that derives from Button?  I can't seem to find a ItemContainerStyleSelector class/object.

    Thanks,
    Terry
  13. Ivan
    Admin
    Ivan avatar
    519 posts

    Posted 12 Oct 2009 Link to this post

    Hi Terry,

    Thank you for interest in the RadToolBar for Silverlight.

    In order to accomplish your task you should inherit the RadToolBar and replace its StyleSelector with your own. Of course you should save a reference to the original style selector to preserve the original toolbar's behavior.

    Please preview the attached example and let us know if you have more questions.

    Kind regards,
    Ivan
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
DevCraft banner