Sunday, August 30, 2015

How to update a theme during design-time


Update theme during design time with LinsUIWPF Suite.

Step 2: Create a text file named Goldcing.ini under “C:\Windows”,
Copy the following content into Goldcing.ini file.
 [GoldcingTheme]
Assembly="ThemesLibrary"
Resource file="Themes\Traditional Themes\MyTheme.xaml"
Theme="Theme1"

Step 3: Go to the Solution Explorer in Visual Studio,
Step 4: Go to the project in which the theme resource file resides,
Step 5: Right mouse button click at the resource file (for example, GoldcingCincinTheme.xaml) in which the theme resides and select “Properties”
Step 6: Select “Resource” as Build Action,
Step 7: Right mouse button click at the project and select “Clean”,
Step 8: After cleaning the project, build the project again.

How to add a theme into application with LinsUIWPF Suite


Add theme into application with LinsUIWPF Suite.

Step 1: Download the libraries.
Step 2: Follow the link How to create a new project with LinsUIWPF Suite to create a WPF project.
Step 3: Create a xaml file, for example MyTheme.xaml.
Step 4: Copy the following content into MyTheme.xaml file,
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib"
                    xmlns:win="clr-namespace:System.Windows;assembly=PresentationFramework">

    <sys:Double x:Key="ToolItemFontSize">12.0</sys:Double>
    <sys:Double x:Key="ToolItemIconSize">16.0</sys:Double>
    <sys:Double x:Key="RibbonCategoryFontSize">12.0</sys:Double>
    <sys:Double x:Key="ToolBarFontSize">12.0</sys:Double>
    <sys:Double x:Key="TaskGroupFontSize">12.0</sys:Double>
    <sys:Double x:Key="ViewScrollBarLength">300.0</sys:Double>
    <sys:Double x:Key="SurfaceSliderFooterHeight">60.0</sys:Double>
    <sys:Double x:Key="SurfaceSliderHeaderHeight">80.0</sys:Double>
    <sys:Double x:Key="TasksGroupGap">30.0</sys:Double>
    <sys:Double x:Key="TaskButtonGap">5.0</sys:Double>
    <sys:Double x:Key="TasksGroupStartOffset">80.0</sys:Double>
    <sys:Double x:Key="TaskGroupHeaderHeight">30.0</sys:Double>
    <sys:Double x:Key="SmallTaskButtonWidth">120.0</sys:Double>

    <sys:Int32 x:Key="MaxAnimationSteps">30</sys:Int32>

    <Size x:Key="ExtendedPanelSize" Width="70" Height="40"/>
    <Size x:Key="SliderSize" Width="120" Height="22"/>
    <Size x:Key="ComboBoxSize" Width="150" Height="22"/>
    <Size x:Key="TextBoxSize" Width="100" Height="22"/>
    <Size x:Key="MinimizedDocumentViewSize" Width="300" Height="250"/>

    <FontStyle x:Key="ToolItemFontStyle">Normal</FontStyle>
    <FontStyle x:Key="RibbonCategoryFontStyle">Normal</FontStyle>
    <FontStyle x:Key="ToolBarFontStyle">Normal</FontStyle>
    <FontStyle x:Key="TaskGroupFontStyle">Normal</FontStyle>

    <FontFamily x:Key="ToolItemFont">Segoe UI</FontFamily>
    <FontFamily x:Key="RibbonCategoryFont">SmallCaptionFontFamily</FontFamily>
    <FontFamily x:Key="ToolBarFont">SmallCaptionFontFamily</FontFamily>
    <FontFamily x:Key="TaskGroupFont">SmallCaptionFontFamily</FontFamily>

    <FontWeight x:Key="ToolItemFontWeight">Normal</FontWeight>
    <FontWeight x:Key="RibbonCategoryFontWeight">Light</FontWeight>
    <FontWeight x:Key="ToolBarFontWeight">Normal</FontWeight>
    <FontWeight x:Key="TaskGroupFontWeight">Normal</FontWeight>

    <Color x:Key="ToolItemFontColor">Black</Color>
    <Color x:Key="PanelActiveColor">#FFE3EFFF</Color>
    <Color x:Key="PanelInactiveColor">#FFE3EFFF</Color>
    <Color x:Key="DropdownButtonDecoratorColor">#FFE3EFFF</Color>
    <Color x:Key="ListItemPopupToolTipBackgroundColor">#FFE3EFFF</Color>
    <Color x:Key="RibbonCategoryFontColor">DimGray</Color>
    <Color x:Key="ToolBarFontColor">#FF000000</Color>
    <Color x:Key="TaskGroupFontColor">#FF000000</Color>

    <SolidColorBrush x:Key="HitBorderBrush" Color="{x:Static SystemColors.ActiveBorderColor}"/>
    <SolidColorBrush x:Key="CheckedBorderBrush" Color="{x:Static SystemColors.ActiveCaptionColor}"/>
    <SolidColorBrush x:Key="DropdownCheckAreaBackgroundBrush" Color="#FFE3EFFF"/>
    <SolidColorBrush x:Key="DropdownMenuBackgroundBrush" Color="#FFE3EFFF"/>

    <LinearGradientBrush x:Key="ListItemHighLightedBrush" StartPoint="0.5, 0" EndPoint="0.5, 1.0" SpreadMethod="Pad">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#80E3EFFF" Offset="0.0"/>
                <GradientStop Color="#80AFC8F0" Offset="0.5"/>
                <GradientStop Color="#807BA4E0" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="ToolItemBackgroundBrush" StartPoint="0.5, 0" EndPoint="0.5, 1.0" SpreadMethod="Pad">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFE3EFFF" Offset="0.0"/>
                <GradientStop Color="#FFCBE1FC" Offset="0.67"/>
                <GradientStop Color="#FF7BA4E0" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ToolItemBackgroundAnimatedBrush" StartPoint="0.5, 0" EndPoint="0.5, 1.0" SpreadMethod="Pad">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFFFD700" Offset="0.0"/>
                <GradientStop Color="#FFFAFAD2" Offset="0.67"/>
                <GradientStop Color="#FFDAA520" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="DropdownIconAreaBackgroundBrush" StartPoint="0.5, 0" EndPoint="0.5, 1.0" SpreadMethod="Pad">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFE3EFFF" Offset="0.0"/>
                <GradientStop Color="#FFCBE1FC" Offset="0.67"/>
                <GradientStop Color="#FF7BA4E0" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="DocumentTabBackgroundBrush" StartPoint="0.5, 0" EndPoint="0.5, 1.0" SpreadMethod="Pad">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFE3EFFF" Offset="0.0"/>
                <GradientStop Color="#FFCBE1FC" Offset="0.67"/>
                <GradientStop Color="#FF7BA4E0" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="MinimizedDocumentTabBackgroundBrush" StartPoint="0.5, 0" EndPoint="0.5, 1.0" SpreadMethod="Pad">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFE3EFFF" Offset="0.0"/>
                <GradientStop Color="#FFCBE1FC" Offset="0.67"/>
                <GradientStop Color="#FF7BA4E0" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="PanelTabBackgroundBrush" StartPoint="0.5, 0" EndPoint="0.5, 1.0" SpreadMethod="Pad">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFE3EFFF" Offset="0.0"/>
                <GradientStop Color="#FFCBE1FC" Offset="0.67"/>
                <GradientStop Color="#FF7BA4E0" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="DockingIndicatorBrush" StartPoint="0.5, 0" EndPoint="0.5, 1.0" SpreadMethod="Pad">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFE3EFFF" Offset="0.0"/>
                <GradientStop Color="#FFCBE1FC" Offset="0.5"/>
                <GradientStop Color="#FF7BA4E0" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="DockingIndicatorSelectedBrush" StartPoint="0.5, 0" EndPoint="0.5, 1.0" SpreadMethod="Pad">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFFFD700" Offset="0.0"/>
                <GradientStop Color="#FFFAFAD2" Offset="0.5"/>
                <GradientStop Color="#FFDAA520" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="AutoHidenBarBackgroundBrush" StartPoint="0.5, 0" EndPoint="0.5, 1.0" SpreadMethod="Pad">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFE3EFFF" Offset="0.0"/>
                <GradientStop Color="#FFCBE1FC" Offset="0.67"/>
                <GradientStop Color="#FF7BA4E0" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ExtendedPanelBackgroundBrush" StartPoint="0.5, 0" EndPoint="0.5, 1.0" SpreadMethod="Pad">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFE3EFFF" Offset="0.0"/>
                <GradientStop Color="#FFCBE1FC" Offset="0.67"/>
                <GradientStop Color="#FF7BA4E0" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="TaskgroupHeaderBackgroundBrush" StartPoint="0.5, 0" EndPoint="0.5, 1.0" SpreadMethod="Pad">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFE3EFFF" Offset="0.0"/>
                <GradientStop Color="#FFCBE1FC" Offset="0.67"/>
                <GradientStop Color="#FF7BA4E0" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
</ResourceDictionary> 
Step 5: Change all attribute values to yours.
Step 6: Add MyTheme.xaml file into your project


Step 7: Open App.xaml.cs file, hookup the LoadingTheme event as follow,
public App()
{

ResourcesManager.LoadingTheme += ResourcesManager_LoadingTheme;
}


protected void ResourcesManager_LoadingTheme(object sender, EventArgs arg)
{
string uriPath = string.Format("pack://application:,,,/ThemesLibrary;component/Themes/Traditional Themes/GoldcingCincinTheme.xaml");
Uri themeSource = new Uri(uriPath, UriKind.RelativeOrAbsolute);
if (ResourcesManager.GetThemeName(themeSource) == null)
{
ResourceDictionary resourceDictionary = new ResourceDictionary();
try
{
resourceDictionary.Source = themeSource;
ResourcesManager.AddTheme("Theme1", resourceDictionary);
}
catch (Exception e)
{
resourceDictionary = null;
MessageBox.Show(e.StackTrace, e.Message, MessageBoxButton.OK, MessageBoxImage.Error);
}
}
// end of ResourcesManager_LoadingTheme
  
After implementing all of these steps, when you run your application, you should see the new theme “Theme1” should appear under System Button->Themes.