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

RadToolbar, ItemsSource and Button style

3 Answers 118 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Mariusz
Top achievements
Rank 1
Mariusz asked on 20 Feb 2012, 09:02 AM
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?

3 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 22 Feb 2012, 04:27 PM
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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Mariusz
Top achievements
Rank 1
answered on 28 Feb 2012, 08:30 AM
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
0
Petar Mladenov
Telerik team
answered on 01 Mar 2012, 05:43 PM
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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Tags
ToolBar
Asked by
Mariusz
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Mariusz
Top achievements
Rank 1
Share this question
or