How to style built-in ListBox consistently with Telerik controls?

16 posts, 0 answers
  1. Richard
    Richard avatar
    30 posts
    Member since:
    Oct 2010

    Posted 19 Nov 2010 Link to this post

    Hi,


    I have a System.Windows.Controls.ListBox that I'd like to be styled consistently with the Telerik "Office Black" theme. Currently, the selected items in the ListBox are highlighted in blue, which doesn't match the orange highlight in Telerik controls such as the RadGridView.

    I tried setting telerik:StyleManager.Theme="Office_Black" on the <ListBox> element but this has no effect. Is there something else I need to do?

    We're using Q2 2010 SP2, we haven't upgraded to Q3 2010 yet.


    Thanks for your help,
    Richard

  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 22 Nov 2010 Link to this post

    Hello Richard,

     
    Can you verify that you added a reference to Telerik.Windows.Controls.dll in your project?

    Sincerely yours,
    Vanya Pavlova
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  3. DevCraft banner
  4. Richard
    Richard avatar
    30 posts
    Member since:
    Oct 2010

    Posted 22 Nov 2010 Link to this post

    Hi,


    Yes, we do have Telerik.Windows.Controls.dll in the project references. Also, in the XAML file, the "telerik" namespace is referenced as follows:

    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

    In Visual Studio, if I "go to definition" on the telerik:StyleManager.Theme attribute from the XAML, it finds it correctly.


    One workaround we're trying is to use a RadGridView with one column instead of a list box, and configure it so it looks like a list box... but we haven't been able to get that working quite right yet.


    Thanks,
    Richard
  5. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 23 Nov 2010 Link to this post

    Hi Richard,


    Yes you are right, this is a kind of workaround but actually you do not need it. I have prepared an example for you with two ListBox controls, the first one is styled in our Office_Black Theme and the second  one uses the default appearance.


    Please check the attached project and if you need any further assistance let me know.


    Sincerely yours,
    Vanya Pavlova
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  6. Richard
    Richard avatar
    30 posts
    Member since:
    Oct 2010

    Posted 23 Nov 2010 Link to this post

    Thanks! I'll try it out and let you know.

    Thanks,
    Richard
  7. Valeriu
    Valeriu avatar
    21 posts
    Member since:
    Dec 2010

    Posted 20 Dec 2010 Link to this post

    Your solution to style the ListBox works in limited conditions. 

    For example, if I have defined ItemContainerStyle for ListBox, the Telerik's theme will NOT be applied. Add this fragment to ListBox in your example to see: 

       

    1.<ListBox.ItemContainerStyle>
    2.    <Style TargetType="ListBoxItem">
    3.        <Setter Property="HorizontalAlignment"
    4.                Value="Stretch" />
    5.        <Setter Property="HorizontalContentAlignment"
    6.                Value="Stretch" />
    7.    </Style>
    8.</ListBox.ItemContainerStyle>

    Any idea how to work around to get ListBox styled?

    And another linked question - how do I get this style applied globally, for all ListBox-es in my app?

    Thanks!

  8. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 20 Dec 2010 Link to this post

    Hi Valeriu,

     
    Generally the themes provided by Telerik are designed to work with RadControls and some native Silverlight controls. The behavior you described is normal, because the styles for ListBox and ListBoxItems are very basic. If you need to extend the default ListBox's appearance in Office_Black theme or any other theme I would suggest you to create your own theme as it is described in this online help article.

    Greetings,
    Vanya Pavlova
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  9. Valeriu
    Valeriu avatar
    21 posts
    Member since:
    Dec 2010

    Posted 21 Dec 2010 Link to this post

    So, in order to use styling/themes from Telerik in my app I have to create (6-7) custom themes to make standard controls look as telerik's? Do that for standard controls that telerik doesn't have an analogue in suite? 

    That's sounds a bit weird, really. 

    Writing new themes for ListBox is a no way because we're still evaluating your product.

    Is there any way to re-use a style defined in your themes to apply them explicitly to other controls. Are style definitions for colors, brushes available somewhere? Do you have an example how can I use them?

  10. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 21 Dec 2010 Link to this post

    Hello Valeriu,

     
    Do you really need to modify ListBox styles in each Telerik theme? To be clear how our theming mechanism works you may get the xaml files for all our themes from the Themes folder of your current installation. I believe that the following online article would be helpful for you on that matter.

    Greetings,
    Vanya Pavlova
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  11. Valeriu
    Valeriu avatar
    21 posts
    Member since:
    Dec 2010

    Posted 28 Dec 2010 Link to this post

    Since you're suggesting to create a new theme, then you're asking if I really need to create a custom theme I think I'm not enough clear what my problem is. Let's restate it:

    I want that a ListBox in my application look consistently other Telerik controls.  In an basic ListBox it works but my ListBox has some trivial modifications and Telerik Themes are not applied. 

    The question is - wich is the simplest way to apply telerik theming to a ListBox explicitly so it will be consistent with the rest of application? Do you have an example?

    I would like to understand the overhead our company will be dealing with if we would choose your controls suite. Do we need to write our own themes to style a standard ListBox? Should we modify your themes and mentain them internally?

  12. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 03 Jan 2011 Link to this post

    Hi Richard,

    Our Telerik.Windows.Controls assembly include themes for some basic controls such as ListBox, Button, ScrollViewer etc.

    If you want to apply ItemsContainerStyle on ListBoxItem your style will override our theme. If you want to set some properties in style but keep the Office_Black theme appearance you can do it like:

    <UserControl x:Class="ListBoxStyle.MainPage"
            mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
        <UserControl.Resources>
            <Style x:Key="ItemStyle" TargetType="ListBoxItem" telerik:StyleManager.BasedOn="Office_Black">
                <Setter Property="HorizontalContentAlignment" Value="Center" />
            </Style>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot">
            <ListBox telerik:StyleManager.Theme="Office_Black" ItemContainerStyle="{StaticResource ItemStyle}" Width="100" Height="100">
                <ListBoxItem Content="Item 1" />
                <ListBoxItem Content="Item 2" />
                <ListBoxItem Content="Item 3" />
                <ListBoxItem Content="Item 4" />
                <ListBoxItem Content="Item 5" />
                <ListBoxItem Content="Item 6" />
            </ListBox>
        </Grid>
    </UserControl>

    The StyleManager.BasedOn will actually set the BasedOn property of the style. The Style will set our Office_Black theme ControlTemplate on the ListBoxItem but the HorizontalContentAlignment will come from the new style.

    Other than that if you are about to use all 7 different themes and switch them in runtime you will have to create 7 different styles because the BasedOn can not be dynamically switched.

    Regards,
    Vanya Pavlova
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  13. Valeriu
    Valeriu avatar
    21 posts
    Member since:
    Dec 2010

    Posted 03 Jan 2011 Link to this post

    Thanks, Vanya

    Using of "telerik:StyleManager.BasedOn" is the trick that makes the puzzle advance. Your example if what I've been looking for.

    Thank you very much...

  14. mark
    mark avatar
    13 posts
    Member since:
    Sep 2010

    Posted 21 Aug 2011 Link to this post

    this doesnt appear to work when I am using ItemsSource to populate the list of items.
  15. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 22 Aug 2011 Link to this post

    Hi Mark,


    This is a pattern which you may use to apply a style based on a theme different than the default Office_Black theme. Will you please share the source code you are currently using?


    All the best,
    Vanya Pavlova
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  16. mark
    mark avatar
    13 posts
    Member since:
    Sep 2010

    Posted 28 Aug 2011 Link to this post

    In my local Resource Dictionary...                    

            <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem" telerik:StyleManager.BasedOn="Metro">
             <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>

    In my control...

    <ListBox
          telerik:StyleManager.Theme="Metro"
          ItemsSource="{Binding RecentItems}"
          ItemTemplate="{StaticResource ListItemTemplate}"
                            SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
          Margin="0"
                            ItemContainerStyle="{StaticResource ListBoxItemStyle1}"
                            HorizontalContentAlignment="Stretch" FontFamily="/Compete.UI.Desktop;component/Fonts/Fonts.zip#Segoe WP SemiLight"
          />

    The content still does not stretch. It is aligned left!
  17. Anatoliy
    Anatoliy avatar
    37 posts
    Member since:
    Oct 2012

    Posted 01 Oct 2013 Link to this post

    Hi, Vanya Pavlova,

    I'm looking forward if there are such solution for WPF Components like this: telerik:StyleManager.Theme="Windows8".
    What you can say?

    Regards,
    Anatoliy
Back to Top
DevCraft banner