Adding branding, styles and themes

.Net Add-on Programming
1

Let me know if you need help customizing the style, theme and appearance of the GUI.

Attached is a tutorial on how to add and create new styles and themes for the workspace.

AddingStylesThemes.pdf (195 KB)

2

I am getting download error “Failed - No file”

3

Under Attachments, did you click AddingStylesThemes.pdf? It worked for me just now.

4

This tutorial on styles is a bit outdated. There is no need to use UserControl.Resources. All you need to do in order to use VC styles is to reference the following namespace in XAML

xmlns:shared=“clr-namespace:VisualComponents.UX.Shared;assembly=UX.Shared”

and use it in your control as follows:

<TextBlock Grid.Column=“0” Text="{Binding Name}" Style="{DynamicResource VCTextBlockLargerLabelStyle}" />

or

<shared:ExtendedTextBox Grid.Column=“1” Text="{Binding Value}" Style="{DynamicResource VCExtendedTextBoxStyle}" />

Please see attached “VCStyle_Demo.xml” file for an example.

Regarding the resource keys for controls, I must admit that I don’t know all of the them yet but the general naming convention is “VC[Default Control Name]Style” for example “VCButtonStyle”. Attached is a word document that has some resource key I have come across and that works.

Please note that you might get a message like this when using resource key in XAML: “The resource [resource key name] could not be resolved”. I would suggest you ignore this error cause the resource will be resolved during runtime as long as you have added reference to VisualComponents.UX.Shared to your Visual Studio project.

VCStyle_Demo.zip (764 Bytes)

VCStyleKeys.zip (10.5 KB)

5

Really nice Jay, let us know if you find more key words. This was a very simple way to make the add-ons look native!

6

Hello guys

Is it possible to make a video for this tutorial? I’m a beginner at Visual Studio side and not really familiar with the meaning of the stuff you are talking about. So that would be great if i can follow your steps visually. Otherwise i cant make anything work:D

7

Following along, in this case, is not enough imo. You would need to have a basic understanding of WPF, XAML, XML, and XML namespaces. When I had to learn this stuff, I referred to the following site all the time.

http://wpftutorial.net/LearnWPFin14Days.html

For creating a new theme, you can use a text editor to create a new theme. Just save one theme as a new file, edit the hex color values-- not the keys-- in that file, and make sure that new file is in the same folder as the other themes used in the VC product.

For using predefined styles, @Jay I think I shared the current list of keywords with you a month or so ago. Can you post it here? What I remember is that for buttons, you will need to add some padding of your own. That is, the style won’t add it for you.

8

Thanks Zesty i will check the website for sure.

BR

9

Hi everyone,

I’m trying to use a TabControl in my DockableScreen but I am unable to stylize it…

I posted the question here and @zesty answered here sending me to this post to help me.

I understood that I should use a XamTabControl instead of a simple TabControl, but I don’t know where to find it, nether what is the bound controls namespace in

x:Key="{x:Type controls:XamTabControl}"

Thanks for your help!

EDIT 1

Searching on Google, I found that XamTabControl is provided by Infragistics WPFTM, so I added a reference to InfragisticsWPF in my project and the following namespace in my XAML view:

xmlns:controls="http://infragistics.com/Windows"

I also added the resource tag:

<UserControl.Resources>
    <Style x:Key="{x:Type controls:XamTabControl}"/>
</UserControl.Resources>

and my XamTabControl:

<controls:XamTabControl>
    <controls:TabItemEx Header="{x:Static properties:Resources.EstimateCreator}">
        <!-- Tab item content -->
    </controls:TabItemEx>
</controls:XamTabControl>

But when I debug my plugin, Visual Components keeps displaying my control as following:

10

Up ?

11

Did you look at the development guide and the styles pdf in this thread? If you have a tab control in you View/wpf user control then apply the style to that element as you would using xaml. It’s been years since I’ve done this stuff, but what I remember is you need to make sure you have the xaml namspace for visual Components style reference. Otherwise, others wpuld need to help or contact support

17

Thank you, but I have used a lot of DataGrid Template, I can’t find the key to DataGrid. And about MenuItem, I can’t change the font which is black and is not clear on the black background.