This project is read-only.

Using Fluent theme with normal wpf theme

Jul 20, 2011 at 2: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 10: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 10:25 PM
Edited Jul 21, 2011 at 10: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 11: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 3: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 12:55 PM

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