How do I apply a theme style to a regular SL control?

7 posts, 1 answers
  1. Kjell
    Kjell avatar
    283 posts
    Member since:
    Jun 2010

    Posted 19 Jul 2010 Link to this post

    Hello.  I am taking advantage of the themes feature and it is working great with all the rad controls.  Now my question is, how can I apply specific styles form the theme to regular silverlight controls.  For example, I have a textblock which I basically want to take on the same look as the gridview column headers.  How can this be accomplished?  Here is what I started with

    <grid Background="Black">
        <Textblock Text="asdfs" Foreground="White" />
    </grid>

    Obivously this is no good, not only is it not dynamic but also its just a flat black bacground instead of the cool rounded look that the grid column headers have.  .
  2. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 20 Jul 2010 Link to this post

    Hi Kjell,

    You need to set the Theme of the controls in the XAML as you do with the RadControls:

    Snippet
    <TextBlock Text="My themed text" telerik:StyleManager.Theme="Vista" />

    Hope this helps.

    Greetings,
    Veskoni
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Kjell
    Kjell avatar
    283 posts
    Member since:
    Jun 2010

    Posted 20 Jul 2010 Link to this post

    Thanks for your response Veskoni, I did try that but it does not give the result I am looking for.  I think that is probably because what I am looking for is not what the default behavior in the style is.  I understand how to apply the theme, but not for my specific situation.  I think if you can address my specific request it will cause some lightbulbs to go off in my head.

    So how do it do this?

    I want to display some text and have it styled exactly like the grid view column header (black gradient with white text by default). 

    Just applying the general theme to the textblock doesnt work, I suspect because the textblock doesn't have a background attribute and even if it did, it is not meant to be styled the way I am looking to do.  If I have to use another control that's fine, just tell me.
  4. Answer
    Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 20 Jul 2010 Link to this post

    Hi Kjell,

    You can create a new Siilverlight project in Blend and add references to the Telerik assemblies. Next, you can drag a GridViewHeaderCell on the design surface and edit its style. You can then copy the ones you need.

    Here is my first attempt:

    <UserControl.Resources>
      <Style x:Key="GridViewHeaderCellStyle1" TargetType="telerik:GridViewHeaderCell">
        <Setter Property="Background" Value="#FF37CC27"/>
    </Style>
    <LinearGradientBrush x:Key="GridView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF5B5B5B" Offset="1"/>
        <GradientStop Color="#FF868686"/>
        <GradientStop Color="#FF4F4F4F" Offset="0.42"/>
        <GradientStop Color="#FF0E0E0E" Offset="0.43"/>
    </LinearGradientBrush>
    <Style x:Key="myTextBlockStyle" TargetType="TextBlock">
           <Setter Property="ForeGround" Value="White" />                
    </Style>
    <Style x:Key="myBorderStyle" TargetType="Border">
        <Setter Property="BackGround" Value="{StaticResource GridView_HeaderBackground}" />    
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Padding" Value="5,0,3,0"/>
    </Style>
    </UserControl.Resources>

    <Border Style="{StaticResource myBorderStyle}">
        <TextBlock Text="This should be themed text" Style="{StaticResource myTextBlockStyle}" />
    </Border>

    I wrapped the textblock in a border so we can apply background to it.

    Hope this will get you started.

    Kind regards,
    Veskoni
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Kjell
    Kjell avatar
    283 posts
    Member since:
    Jun 2010

    Posted 20 Jul 2010 Link to this post

    Thanks much, this is PERFECT!
  6. Alexey Oyun
    Alexey Oyun avatar
    74 posts
    Member since:
    Mar 2010

    Posted 21 Jul 2010 Link to this post

    Hi is there another way to get Theme colors. Because above example want work if themes will be loading dynamically.

    Thank, Alex.
  7. Kjell
    Kjell avatar
    283 posts
    Member since:
    Jun 2010

    Posted 21 Jul 2010 Link to this post

    Yah you are right, well hopefully there is a better solution but worst case scenario I can create a style for each theme and apply the styles manually as well.
Back to Top