Manually set style for a given control from Telerik implicit Theme (Office2013)

[Hugo]

I would like to use the 'accent'/'selected' color from my office 2013 implicit theme for a generic control (in my case I am using a Hyperlink inside a TextBlock - I have two of those) in code/xaml to show the selected/unselected color depending on whether the user clicks on one or the other link, i.e. if the user clicks on option 1, I'd like to apply the corresponding color/brush that'd show that it is selected, when the user clicks on option 2, then, I'd like to return option 1 to the default color and have Option 2 switch to the 'selected' one. 

 I have approached it somehow as follows (I changed the hyperlink to a RadButton hopping that it'd help):

                        <telerik:RadButton  x:Name="ShowDashboardHyperlink" Click="ShowDashboardHyperlink_OnClick" Content="DASHBOARD">

                                <telerik:RadButton.Style>
                                    <MultiBinding Converter="{StaticResource StyleConverter}">
                                        <MultiBinding.Bindings>
                                            <Binding RelativeSource="{RelativeSource Self}" />
                                            <Binding Path="DashboardStyle" />
                                        </MultiBinding.Bindings>
                                    </MultiBinding>
                                </telerik:RadButton.Style>
                            </telerik:RadButton>

 

With a style converter like:

 

public class StyleConverter : IMultiValueConverter

{

blah...

}

And on my view model:

 

        public string DashboardStyle
        {
            get { return _dashboardStyle; }
            set
            {
                _dashboardStyle = value;
                RaisePropertyChanged(() => DashboardStyle);
            }
        }

Somewhere in my constructor I initialize my colors:

            DashboardStyle = "AccentMainBrush";
            CalendarStyle = "BasicBrush";
​

It compiles and all but I think the part that I don't get right is the binding.

 

I'll appreciate any help.

[Hugo]

[quote]Omexus said:

I would like to use the 'accent'/'selected' color from my office 2013 implicit theme for a generic control (in my case I am using a Hyperlink inside a TextBlock - I have two of those) in code/xaml to show the selected/unselected color depending on whether the user clicks on one or the other link, i.e. if the user clicks on option 1, I'd like to apply the corresponding color/brush that'd show that it is selected, when the user clicks on option 2, then, I'd like to return option 1 to the default color and have Option 2 switch to the 'selected' one. 

[/quote]

I've attached images to show what I want (based on Outlook 2013 inbox header)

[Vanya Pavlova]

Hello Hugo,


All theme palettes are included in Telerik.Windows.Controls assembly. You may directly use all palette resources for any Telerik theme. Let's say that you need to color a Border with resources, as part of Office2013 palette. The mark-up will be similar to the following:

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="WpfApplication125.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Border  Width="100" Height="100" Background="{telerik:Office2013Resource ResourceKey=AccentBrush}" />
    </Grid>
</Window>

Then add the Office2013ResourceDictionary in App.xaml:

<Application x:Class="WpfApplication125.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
         <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <telerik:Office2013ResourceDictionary/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
    </Application.Resources>
</Application>

After doing this you would be able to use all resources included in the palette. In a similar way you may extend your own controls and extend their appearance in the desired way.

Hope this helps. 


Regards,
Vanya Pavlova
Telerik

 

 

[Hugo]

Thanks Vanya, I'll give it a try.

[Hugo]

I presume your example is based on using "explicit" styles right? as opposed to "implicit" which is what I am using. Is it correct to assume that I need to use either the corresponding Theme.dll or the Theme.Xaml?

[Vanya Pavlova]

Hello Hugo,


Office2013 theme is not designed to work with explicit styling (e.g.Telerik StyleManager). It works only with implicit styles and the approach demonstrated above should work fine by your side.


Regards,
Vanya Pavlova
Telerik