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

6 posts, 0 answers
  1. Hugo
    Hugo avatar
    6 posts
    Member since:
    Jul 2011

    Posted 09 Apr 2015 Link to this post

    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.

  2. Hugo
    Hugo avatar
    6 posts
    Member since:
    Jul 2011

    Posted 09 Apr 2015 in reply to Hugo Link to this post

    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. 

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

  3. UI for WPF is Visual Studio 2017 Ready
  4. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 10 Apr 2015 Link to this post

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

    See What's Next in App Development. Register for TelerikNEXT.

     
  5. Hugo
    Hugo avatar
    6 posts
    Member since:
    Jul 2011

    Posted 14 Apr 2015 in reply to Vanya Pavlova Link to this post

    Thanks Vanya, I'll give it a try.
  6. Hugo
    Hugo avatar
    6 posts
    Member since:
    Jul 2011

    Posted 14 Apr 2015 in reply to Hugo Link to this post

    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?
  7. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 16 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready