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

[Richard]

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

[Vanya Pavlova]

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

[Richard]

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

[Vanya Pavlova]

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

[Richard]

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

Thanks,
Richard

[Valeriu]

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!

[Vanya Pavlova]

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

[Valeriu]

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?

[Vanya Pavlova]

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

[Valeriu]

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?

[Vanya Pavlova]

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"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        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

[Valeriu]

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...

[mark]

this doesnt appear to work when I am using ItemsSource to populate the list of items.

[Vanya Pavlova]

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

[mark]

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!

[Anatoliy]

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