RadToolbar, ItemsSource and Button style

4 posts, 0 answers
  1. Mariusz
    Mariusz avatar
    26 posts
    Member since:
    Jul 2011

    Posted 20 Feb 2012 Link to this post

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

    Posted 22 Feb 2012 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Mariusz
    Mariusz avatar
    26 posts
    Member since:
    Jul 2011

    Posted 28 Feb 2012 Link to this post

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

    Posted 01 Mar 2012 Link to this post

    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 >>
Back to Top