RadToolbar, ItemsSource and Button style

[Mariusz]

Hello,
I am using RadToolbar with ItemsSource.
Here is code:

<telerik:RadToolBar   Grid.Row="0" Grid.Column="0"
                          FocusManager.IsFocusScope="False"
                          ItemsSource="{TemplateBinding local:TBaseReadsWn.ExtToolbarButtons}"
                          ItemTemplate="{StaticResource dtToolbarButton}"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch"
                          HorizontalContentAlignment="Left"
                          VerticalContentAlignment="Center"
                          Padding="30 4 0 4"  >
    </telerik:RadToolBar>

ItemTemplate:

<DataTemplate x:Key="dtToolbarButton" DataType="UICommandItem">
       <Button
          Command="{Binding Command}"
          CommandParameter="{Binding CommandParameter}"
          Margin="{Binding Margins}"
          IsEnabled ="{Binding IsEnabled}"
          ToolTip="{Binding ToolTip}"
          Width = "22"
          Height= "20">
           <Button.Content>
               <Grid>
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="Auto"></ColumnDefinition>
                       <ColumnDefinition Width="Auto"></ColumnDefinition>
                   </Grid.ColumnDefinitions>
                   <Image Grid.Row="0" Grid.Column="0"    Name="img" Style="{StaticResource stlImgBtnIm}"   Source="{Binding Image}"></Image>
                   <TextBlock Grid.Row="0" Grid.Column="1" Style="{StaticResource stlImgBtnTb}" Text="{Binding Text}"></TextBlock>
               </Grid>
           </Button.Content>
       </Button>
       <DataTemplate.Triggers>
           <DataTrigger Binding="{Binding Image}" Value="{x:Null}">
               <DataTrigger.Setters>
                   <Setter TargetName="img" Property="Visibility" Value="Collapsed"></Setter>
               </DataTrigger.Setters>
           </DataTrigger>

           <DataTrigger Binding="{Binding Margins}" Value="0">
               <DataTrigger.Setters>
                   <Setter Property="Margin" Value="2 2 2 2"></Setter>
               </DataTrigger.Setters>
           </DataTrigger>
       </DataTemplate.Triggers>
   </DataTemplate>

When I add elements to ExtToolbarButtons collection I see normal - styled buttons.
How to use ItemsSource with  telerik - styled buttons on RadToolbar?

[Petar Mladenov]

Hi Mariusz ,

 I guess you are using an Application Theme that is non-default (different from "Office Black"). If so I can suggest you two approaches:

1) Use RadButton in the Template

<DataTemplate x:Key="dtToolbarButton" DataType="UICommandItem">
       <telerik:RadButton

This way it will automatically get the telerik application theme.

2)Use Button with Theme set equal to the Application Theme used. Supposing you have set ExpressionDark to be the application theme, you can do like so:

<DataTemplate x:Key="dtToolbarButton" DataType="UICommandItem">
               <Button Width="40" telerik:StyleManager.Theme="Expression_Dark"

Please let us know if this solves your issue.

Greetings,
Petar Mladenov
the Telerik team

[Mariusz]

Thanks :)
The first solution works. The second solution doesn't appy theme at all (buttons are gray).

There is still problem with border thicknes. Normaly buttons in RadToolbar has border only when there are focused.
Two screens presetns difference.
First screen - buttons added using ItemsSource
Second screen - normaly added buttons

[Petar Mladenov]

Hello Mariusz ,

 The behavior you have come up with is expected. The usual style for RadButtons is not applied when they are in DataTemplate. So you have to use this Style (for example in the RadTollBar.Resources):

<Style x:Key="ToolBarRadButton" TargetType="telerik:RadButton">
<Setter Property="Margin" Value="1" />
<Setter Property="Padding" Value="2" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="IsBackgroundVisible" Value="False" />
</Style>

Please let us know if you have resolved this.

Regards,
Petar Mladenov
the Telerik team