Using Fluent theme with normal wpf theme

Jul 20, 2011 at 1:22 PM

Hi All,

       First of all this is a great ribbon control. I really liked it. I need a small clarification about themes. In my resource dictionary i have two themes added like this

 

 

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>        
        <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Office2010/Silver.xaml" />
        <ResourceDictionary Source="pack://application:,,,/EdmosDesigner;Component/Theme/WhistlerBlue.xaml"/>
    </ResourceDictionary.MergedDictionaries>    
</ResourceDictionary>

 

Though I am getting the styles of Silver.xaml I am not getting the styles of WhistlerBlue.xaml which is taken from the wpf toolkit. I am not really very much familiar with styling in wpf. So it would be nice if you guys can give me some hint on this.

Regards

Tiklu

Jul 21, 2011 at 9:13 PM

ok first I need some clarification. Are you trying to have both themes active at the same time or just switch between them?

Jul 21, 2011 at 9:25 PM
Edited Jul 21, 2011 at 9:46 PM

If you are just wanting to change between themes you need to create a switch type routine and setup a decision statement. Here is mine for example:

 

        private void setTheme()
        {
            if (Properties.Settings.Default.ThemeChanged)
            {
                switch (Properties.Settings.Default.currentTheme)
                {
                    case 0:
                        System.Windows.Application.Current.Resources.BeginInit();
                        System.Windows.Application.Current.Resources.MergedDictionaries.Insert(0, new ResourceDictionary() { Source = new Uri("pack://application:,,,/Fluent;component/Themes/Office2010/Blue.xaml") });
                        System.Windows.Application.Current.Resources.MergedDictionaries.RemoveAt(1);
                        System.Windows.Application.Current.Resources.EndInit();                        
                        Properties.Settings.Default.ThemeChanged = false;
                        break;
                    case 1:
                        System.Windows.Application.Current.Resources.BeginInit();
                        System.Windows.Application.Current.Resources.MergedDictionaries.Insert(0, new ResourceDictionary() { Source = new Uri("pack://application:,,,/Fluent;component/Themes/Office2010/Silver.xaml") });
                        System.Windows.Application.Current.Resources.MergedDictionaries.RemoveAt(1);
                        System.Windows.Application.Current.Resources.EndInit();
                        Properties.Settings.Default.ThemeChanged = false;
                        break;
                    case 2:
                        System.Windows.Application.Current.Resources.BeginInit();
                        System.Windows.Application.Current.Resources.MergedDictionaries.Insert(0, new ResourceDictionary() { Source = new Uri("pack://application:,,,/Fluent;component/Themes/Office2010/Black.xaml") });
                        System.Windows.Application.Current.Resources.MergedDictionaries.RemoveAt(1);
                        System.Windows.Application.Current.Resources.EndInit();                     
                        Properties.Settings.Default.ThemeChanged = false;
                        break;
                }
            }
	}

 

Simply replace the source with the source location of the Theme you want to use and make sure you have a reference to the WPF Toolkit.

Now just store a value of 0, 1, 2, etc. in Properties.Settings.Default.currentTheme or whatever variable you make for your switch statement and it will switch between Themes.

also I add this the window loaded section of C# code. if you don't have an event handler for Window Loaded make one and place something like this in it:

            //Set Theme saved in settings
            Properties.Settings.Default.ThemeChanged = true;
            setTheme();

This ensures that every time your application loads it changes the theme to the one saved in your settings.

Jul 22, 2011 at 10:16 AM

HI Adam,

  Thanks for your reply. I am trying to apply both the themes at the same time. Actually in the theme Fluent;Component/Themes/Office2010/Silver.xaml we have themes specifically for fluent controls. Now in

WhistlerBlue.xaml we have themes defined for other normal wpf controls. Like button, textbox. tree etc. I hope I was been able to clarify myself. Please do let me know if you need anything 
else.

Regards
Tiklu
Jul 22, 2011 at 2:51 PM

Ok, I don't normally use the WhistlerBlue.xaml Theme but usually you need to include a Style= statement similar to my example which follows:

 

<Button x:Name="btnCompactAndRepair" Height="75" Width="110" HorizontalAlignment="Left" Style="{DynamicResource BackStageButtonStyle1}" Click="btnCompactAndRepair_Click">
                                                <StackPanel>
                                                    <Image Source="Images\repairDB32.png" Height="32" Width="32"/>
                                                    <TextBlock Text="Compact &#x26;" HorizontalAlignment="Center" FontSize="12" />
                                                    <TextBlock Text="Repair Database" HorizontalAlignment="Center" FontSize="12" />
                                                </StackPanel>
                                            </Button>

 

I created a xaml file containing all of my modified control settings and named each one, for example here I named my modified Button style BackStageButtonStyle1 and then tell my button to use it.

and here is my code for the style:

    <Style x:Key="BackStageButtonStyle1" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid UseLayoutRounding="True" >
                        <Rectangle x:Name="rectangle" Margin="0" RadiusX="2.5" RadiusY="2.5">
                    		<Rectangle.Stroke>
                    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    				<GradientStop Color="#FFF8D94C" Offset="1"/>
                    				<GradientStop Color="#FFF2CA58"/>
                    			</LinearGradientBrush>
                    		</Rectangle.Stroke>
                    		<Rectangle.Fill>
                    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    				<GradientStop Color="#FFEDEFF1" Offset="1"/>
                    				<GradientStop Color="#FFFEF1BD"/>
                    				<GradientStop Color="#FFFEE486" Offset="0.802"/>
                    				<GradientStop Color="#FFFEE486" Offset="0.328"/>
                    			</LinearGradientBrush>
                    		</Rectangle.Fill>
                    		<Rectangle.Effect>
                    			<DropShadowEffect BlurRadius="2" Color="#FFe1e2e2" ShadowDepth="1" Direction="260"/>
                    		</Rectangle.Effect>
                    	</Rectangle>
                    	<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    	<Rectangle x:Name="rectangle1" Margin="1" RadiusY="2.5" RadiusX="2.5" Opacity="1" Fill="{x:Null}" Stroke="White"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Opacity" TargetName="rectangle1" Value="0"/>
                            <Setter Property="Stroke" TargetName="rectangle">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFC2A54D" Offset="1"/>
                                        <GradientStop Color="#FFC28A30"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Fill" TargetName="rectangle">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFEDEFF1" Offset="1"/>
                                        <GradientStop Color="#FFFFE575"/>
                                        <GradientStop Color="#FFFFDA6D" Offset="0.659"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter Property="Opacity" TargetName="rectangle1" Value="0"/>
                            <Setter Property="Stroke" TargetName="rectangle">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFA1A2A4" Offset="1"/>
                                        <GradientStop Color="#FFDEDFE0"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Fill" TargetName="rectangle">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFEDEFF1" Offset="1"/>
                                        <GradientStop Color="White"/>
                                        <GradientStop Color="#FFF8F9FA" Offset="0.659"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Jul 23, 2011 at 11:55 AM

I am no expert with WPF themes but what happens if you put your custom theme first? This is interesting i am very curious to how this works! Does anyone have any good links?

<ResourceDictionary.MergedDictionaries>        
    <ResourceDictionary Source="pack://application:,,,/EdmosDesigner;Component/Theme/WhistlerBlue.xaml"/>
    <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Office2010/Silver.xaml" />
</ResourceDictionary.MergedDictionaries>

Jul 23, 2011 at 2:05 PM

It's been my experience using themes with this control that whatever Source theme is first in the list is the one it uses. anything else listed as a Theme is usually ignored.

You can however create a xaml Styles page containing Styles for various controls that you have modified as well.

Modify your App.xaml to include the page.

Such as something like this:

	<Application.Resources>
		<ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Fluent;Component/Themes/Office2010/Silver.xaml" />
                <ResourceDictionary Source="Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
	</Application.Resources>

Jul 25, 2011 at 1:34 PM

Thanks a ton Adam. The problem is solved. I was initially including all the resource dictionary in a separate resource dictionary and then was adding that in the app.xaml. But when I added the resource dictionaries directly in the app.xaml in the way you said. it started working.

Thanks to Spider Master also for your reply.

 

Regards

Tiklu