ContentAlignment & Style

[Paul]

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.

[Ivan]

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.

[Harsh]

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

[Miroslav]

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.

[John]

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

[Ivan]

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.

[Ivo]

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

[Ivan]

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.

[Ivo]

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

[Ivan]

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.

[Terry Foster]

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

[Ivan]

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.