StaticResource in Teleric Theme

[Radek]

Hi all, 
I want to do the following behavior in my program.
I have a GridView and below form, which is still visible. I need to change the background when the form gets focus. Standard background is gray, and if form get the focus to look the same(background) as the selected row in the DataGrid. It is not difficult, but if I change the main theme from SummerTheme to Office_SilverTheme, I have a complicated background to change.

My query is as follows.
Can I use this 
<Setter Property="Background" Value="StaticResource GridViewRowSelectedBackground}" />
And call value in TelericTheme.  

If I change the StyleManager.ApplicationTheme in the future, I will get right background.


Thank you for the tip.

My definition style in Themes/Generic.xaml

<LinearGradientBrush x:Key="GridViewRowSelectedBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFCA5D" Offset="1"/>
        <GradientStop Color="#FFFFDC9C" Offset="0"/>
</LinearGradientBrush>

<Style  x:Key="Form_Style" TargetType="Border" >
    <Setter Property="BorderBrush" Value="White" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="Padding" Value="1" />
    <Setter Property="Margin" Value="1" />
    <Setter Property="CornerRadius" Value="5"/>
    <Setter Property="Background" Value="{StaticResource Form_Background}"    />
    <Style.Triggers>
      <Trigger Property="IsKeyboardFocusWithin" Value="True" >
        <Setter Property="Background" Value="{StaticResource GridViewRowSelectedBackground}"  />
      </Trigger>
    </Style.Triggers>
</Style>

[Vanya Pavlova]

Hi Radek,

 
Thank you for contacting us!


May you please elaborate a little bit more on your scenario? Are you creating your custom theme based on the existing one or maybe I am missing something? I believe that the best option is to send us a small repro application in a new support ticket where we can see your exact project settings. Thus we would be able to provide you with an appropriate solution.

Best wishes,
Vanya Pavlova
the Telerik team

[Radek]

Thanks for reply, and sorry for my english.

The problem is that, i would like to use telerik backroud color from telerik theme with key GridViewRowSelectedBackground in my custom control.

I unzip "RadControls_for_WPF_2011_1_0315_Source.zip" 

and in folder "Controls\GridView\GridView\themes\Office\Office_Blue\" is file "Resources.xaml"

In the file is definition for
    <!--<LinearGradientBrush x:Key="GridViewRowSelectedBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFCA5D" Offset="1"/>
        <GradientStop Color="#FFFFDC9C" Offset="0"/>
    </LinearGradientBrush>--> "
My question is: May I us this key as StaticResource in my code.

This source is used Telerik in Selected Row In datagrid. If i use this key, I always use the correct background i my form.
If I use  
StyleManager.ApplicationTheme = new SummerTheme();
or
StyleManager.ApplicationTheme = new Office_BlueTheme();

in my form will always be used background that uses Telerik in active row in the DataGrid.


This is maximum in my english language :)

Radek Bastinec

[Vanya Pavlova]

Hello Radek,

 

The resources used in any telerik theme are Theme specific. When you edit a template of any RadGridView's part you get the resources for Office_Black theme, which is the default one. Each time you edit any template it is against the default theme and it uses the default resources. If you need to change a particular brush in any other theme you need to copy the resources relative to this theme and finally apply this theme.

Let me try to explain this with an example:


You need to change the brush named GridViewBackground_Selected, which paints the background of the selected GridViewRow in Office_Silver theme, this background should use the specific color used in Office_Blue theme.

1. Edit the template of GridViewRow (mark the style either as implicit or explicit).
2. Change the default resources it uses to those specific for Office_Silver theme (you may get the theme specific style and its resources from the Themes folder of your personal installation package). 
3. Copy only the brush named GridViewBackground_Selected for Office_Silver theme to the desired used in Office_Blue theme in an appropriate manner.


Please give it a try and let me know how it goes.

Greetings,
Vanya Pavlova
the Telerik team

[Allen]

I have a related question.  I have successfully set the application theme as desired.  Then, in a control template Xaml, I wish to refer to this theme so the template incorporates the theme.  Taking the following example from your RadDataPager customization discussion:

<ControlTemplate x:Key="DataPagerPresenterTemplate" TargetType="Telerik_Windows_Controls_Data_DataPager:DataPagerPresenter">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Orientation="Horizontal" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <telerik:RadButton x:Name="MoveToFirstPageButton" Command="telerik:RadDataPagerCommands.MoveToFirstPage" Height="18" Margin="2" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{Binding PagerControlsVisibility.MoveToFirstPageControlVisibility, RelativeSource={RelativeSource TemplatedParent}}" Width="18">
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Fill="{StaticResource RadPager_Indicator}" HorizontalAlignment="Center" Height="7" VerticalAlignment="Center" Width="1"/>
                                <Path Data="M0,0 L3.5,3.5 0,7 Z" Fill="{StaticResource RadPager_Indicator}" HorizontalAlignment="Center" Height="7" RenderTransformOrigin="0.5, 0.5" VerticalAlignment="Center" Width="4">
                                    <Path.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleY="1" ScaleX="-1"/>
                                            <SkewTransform AngleY="0" AngleX="0"/>
                                            <RotateTransform Angle="0"/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Path.RenderTransform>
                                </Path>
                            </StackPanel>
                        </telerik:RadButton>
                        <telerik:RadButton x:Name="MoveToPreviousPageButton" Command="telerik:RadDataPagerCommands.MoveToPreviousPage" Height="18" Margin="2" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{Binding PagerControlsVisibility.MoveToPreviousPageControlVisibility, RelativeSource={RelativeSource TemplatedParent}}" Width="18">
                            <Path Data="M0,0 L3.5,3.5 0,7 Z" Fill="{StaticResource RadPager_Indicator}" HorizontalAlignment="Center" Height="7" RenderTransformOrigin="0.5, 0.5" VerticalAlignment="Center" Width="4">
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="1" ScaleX="-1"/>
                                        <SkewTransform AngleY="0" AngleX="0"/>
                                        <RotateTransform Angle="0"/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Path.RenderTransform>
                            </Path>
                        </telerik:RadButton>
                        <Border BorderBrush="{StaticResource RadPager_NumericPresenter_Border}" BorderThickness="1,0,0,0" Background="{StaticResource RadPager_NumericPresenter_Background}" Height="20" Visibility="{Binding PagerControlsVisibility.NumericElementsControlVisibility, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center">
                            <Telerik_Windows_Controls_Data_DataPager:NumericElementsPresenter AutoEllipsisMode="{TemplateBinding AutoEllipsisMode}" NumericButtonStyle="{TemplateBinding NumericButtonStyle}" NumericButtonCount="{TemplateBinding NumericButtonCount}" PageCount="{TemplateBinding PageCount}" PageIndex="{TemplateBinding PageIndex}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                        </Border>
                        <telerik:RadButton x:Name="MoveToNextPageButton" Command="telerik:RadDataPagerCommands.MoveToNextPage" Height="18" Margin="2" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{Binding PagerControlsVisibility.MoveToNextPageControlVisibility, RelativeSource={RelativeSource TemplatedParent}}" Width="18">
                            <Path Data="M0,0 L3.5,3.5 0,7 Z" Fill="{StaticResource RadPager_Indicator}" HorizontalAlignment="Center" Height="7" VerticalAlignment="Center" Width="4"/>
                        </telerik:RadButton>
                        <telerik:RadButton x:Name="MoveToLastPageButton" Command="telerik:RadDataPagerCommands.MoveToLastPage" Height="18" Margin="2" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{Binding PagerControlsVisibility.MoveToLastPageControlVisibility, RelativeSource={RelativeSource TemplatedParent}}" Width="18">
                            <StackPanel Orientation="Horizontal">
                                <Path Data="M0,0 L3.5,3.5 0,7 Z" Fill="{StaticResource RadPager_Indicator}" HorizontalAlignment="Center" Height="7" VerticalAlignment="Center" Width="4"/>
                                <Rectangle Fill="{StaticResource RadPager_Indicator}" HorizontalAlignment="Center" Height="7" VerticalAlignment="Center" Width="1"/>
                            </StackPanel>
                        </telerik:RadButton>
                    </StackPanel>
                    <StackPanel Grid.Column="1" Margin="5,0" Orientation="Horizontal" Visibility="{Binding PagerControlsVisibility.TextControlVisibility, RelativeSource={RelativeSource TemplatedParent}}">
                        <telerik:RadComboBox ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource countConverter}}"
                                             SelectedValue="{Binding PageSize, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                             x:Name="radComboBox">
                        </telerik:RadComboBox>
                        <Border Background="{StaticResource RadPager_Separator1}" HorizontalAlignment="Left" Height="18" Margin="5,0,0,0" VerticalAlignment="Center" Width="1"/>
                        <Border Background="{StaticResource RadPager_Separator2}" HorizontalAlignment="Left" Height="18" Margin="0,0,10,0" VerticalAlignment="Center" Width="1"/>
                        <TextBlock Margin="2,0" telerik:LocalizationManager.ResourceKey="RadDataPagerPage" VerticalAlignment="Center"/>
                        <Telerik_Windows_Controls_Data_DataPager:DataPagerTextBox Command="telerik:RadDataPagerCommands.MoveToPage" Height="20" Margin="2,0" PageIndex="{TemplateBinding PageIndex}" telerik:StyleManager.Theme="{StaticResource Theme}" VerticalAlignment="Center" Width="48"/>
                        <TextBlock Margin="2,0" telerik:LocalizationManager.ResourceKey="RadDataPagerOf" VerticalAlignment="Center"/>
                        <TextBlock Margin="2,0" Text="{Binding PageCount, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center"/>
                    </StackPanel>
                </Grid>
            </Border>
        </ControlTemplate>

there are several references to telerik:StyleManager.Theme="{StaticResource Theme}"
where I want it to just use the current theme set for the application, which, the user may change at runtime by the way, but for which I force them to restart the application after setting a new theme.

"{StaticResource Theme}" here needs to resolve to StyleManager.Application Theme

Do I need to declare the theme as a resource in app.xaml or somesuch?

Please advise.   Thank you.

[Vanya Pavlova]

Hello Allen,

 
You may reference a particular theme, which is used as a resource as shown below:

<telerik:Office_Blue x:Key="Theme"/>

Then each part within RadDataPager's template will look for the resource with the specified key "Theme".
The same is valid for any Telerik control and its parts.

Greetings,
Vanya Pavlova
the Telerik team

[Allen]

I  understand that.  The example used that approach.  The problem is to figure out the active application theme and apply it, not create a static theme resource.  For example, theme in play is Office_Blue - fine.  User changes it to Vista - so the view needs to know that.  The StaticResource set to Office_Blue would be logically invalid.

The problem lies with dynamic skinning....

[Vanya Pavlova]

Hi Allen,

 

Indeed that is the way as our theming mechanism works. The styles used in our themes are theme specific. As you might know we ship our themes as separate projects and you may get the xaml files for any Telerik theme from the Themes folder of  your personal installation. Telerik offers 8 themes and 8 styles for any RadControl/WPF/Silverlight. When you change the theme at runtime the Window's Content is visually rectreated and you are right that a style using a resource targeted at any theme will be logically invalid. 
In our case you have a style targeted at RadDataPager and if you want to apply some changes based on any theme,  for example Vista you may do the following:

<Style TargetType="{x:Type RadDataPager}">
      <Setter Property="telerik:StyleManager.Theme" Value="Vista"/>
......
</Style>

Then when you change the theme your changes will be handled correspondingly.

Kind regards,
Vanya Pavlova
the Telerik team

[Anatoly Chekh]

Hello.

So the Radek's question is still open.
The question is very simple:

There is style with key "GridViewRowSelectedBackground" in the you theme. In diffenerent themes this style has different values. So we can't hardcoded it in own app.

The question is - is is possible to use this sttyle following way:

<Grid Background={StaticResources GridViewRowSelectedBackground} />

And then if we set black theme we get one background, if we set vista theme - we have anothe background etc.

Thanks, Anatoly Chekh.

[Zdero Pero]

Any news on this topic?
Someone please answer.

[Zdero Pero]

Why Telerik ignore this topic. Is it so difficult to answer?