I'm building custom control for my Silverlight 2 app. It's in one SL class project, and it contains two files:
MyControl class, inherited from Control, with few DepedencyProperties
themes/generic.xaml, with visual elements (ControlTemplate), states for VSM and transitions
I created whole xaml by hand, and it works, but want to use Blend2(SP1) for editing! When i open generic.xaml in Blend, and switch to Resources tab I don't have anything to edit.
For example, when I put that visual template and states definition to App.xaml (of my main SL project), I can access all elements and States through Resources and States tabs, and edit them visually.
Does Blend even support editing generic.xaml from SL2 class project?
What's the best practice for building custom controls? I don't want to my custom control depends on anything from main SL2 project, but want them to be skinnable, and be able to change skins (themes) dynamically.
You can edit this with Blend.
Open your controls project in Blend.
Open your generic.xaml
click the Resources tab
Expand generic.xaml
Double click the style resource you want to edit.
In the Objects and Timeline section, right click the Style and select "Edit Control Parts -> Edit Template"
Now you can edit the template in the generic.xaml. Sounds like you're already following best practices by having the parts and states. If you want the full blown best practices take a look at this detailed post on how to deal with design time extensibility. There you will find out how to do the Visual Studio and Blend design time stuff for Silverlight.
I recreated whole project, and suddenly can edit my generic.xaml from Resources. But can't add news stated in Blend, for that I must go to xaml.
Related
We have a designer that did a whole concept of GUI for our next WPF application.
If we are able to provide him a "user friendly" way to edit styles, he would have done it by itself.
He only has to edit colors, and small things like Margin, default fonts, ...
Naturally, I tought that Blend would be the solution, but I admit I'm struggling:
Blend allow us to edit the template, but we don't really want to change the whole template, just some color around. We made a small dummy app that has all the controls required to be themed, we edit template in a dedicated theme file, but I can't find how to have the same template applied to every control(e.g. button) in our application
We use DevExpress as library, and it appears that most of their component are composed of a lot of subcomponent(for which I cannot just right-click then edit template). Plus it seems that the devExpress theme have the priority over the templates changes(tested by changing background colors by example)
As a pure developer I would create a "style" that would be applied on all controls of a specific type in our application, but I can't see how to create and edit them in blend?
What approach would you take?
You want to use DevExpress Theme Editor. It will allow you to edit all used DevExpress themes in your application. It has a friendly UI which should be usable by your designer.
Another approach is probably not so friendly for your designer but you can also manually override DevExpress themes with your extended ones (require XAML). I am not sure about the controls but that way you can for sure modify brushes.
I'm struggling with Templates in WPF
I understand the concept in that I can have a control, and 'override' the ContentTemplate (or similar). I use it often with the TabControl
However, I don't understand it in terms of what the initial control looked like. And if we are limited on the names. EG, could we build a control and overwrite the NonsenseNameTemplate?
If I were to build my own UserControl and provide the ability for people to override things like my NonsenseNameTemplate, what would this code look like?
My guess, with pseudo code would be
<UserControl>
<NonsenseNameTempalte>
//some resources
//some other controls
</NonsenseNameTempalte>
</UserControl>
In the above example, I can fully understand how I could create a new control and overwrite the NonsenseNameTemplate but I can't see any code examples of the UserControl and it's usage.
Template is nothing more than a (dependency) property. By writing
<Button>
<Button.Template>
<ControlTemplate>
...
</ControlTemplate>
</Button.Template>
</Button>y
you are doing nothing more than creating a new instance of ControlTemplate class and assigning it to Button.Template property of that specific button. Each control has it's own ControlTemplate saved somewhere in it's assembly. It is generally not so simple to actually get those default templates, but Blend can help with it.
Of course, you can create your won NonsenseNameTemplate property, but actually using it would require some deep knowledge of WPF composition, layouting and rendering. Which is usually not required for normal usage of WPF. And I agree that there is not a much online resources about doing something like this, for exactly this reason.
I too had an early on learning of Templates. I posted a step-by-step answer to another question via a customized button control. The nice thing about that sample, you can build and play with styles and templates in a small project and see visual impact without requiring full project rebuild
To start with, as you have mentioned that you do not have Blend. You can have Blend and install it with Visual Studio 2013 Community.
You can download this here if you do not have it already.
http://www.visualstudio.com/products/visual-studio-community-vs
A part of the installation process, it allows you to select and install Blend. Also, the newer editions of visual studio give you some of the power of blend. In your design view you can right click on a control and create or copy a template.
On to the question.
As Euphoric has mentioned. Custom control authoring does require a little more in-depth knowledge of WPF, or any of the XAML frameworks. However, there are Visual Studio templates that can help you in the right direction.
As for the template naming, you have three types of templates you will come across in XAML. ControlTemplate (which for your purposes is the one we are interested in), ItemsPanelTemplate and DataTemplate. Again, as Euphoric has said, there are few circumstances where deriving a custom version of any of these three templates would bring anything to the table.
If you were to create a test WPF application, once you have created the basic project and solution. Go a head and add in another project, and from the templates VS provides, File -> Project -> New -> Windows Desktop. In the project template list, find 'WPF Custom Control Library'. Once created, reference this project in your main WPF project.
This custom control library project will give you a skeleton setup for what you are looking for.
If you look in this project here are some things for you to note.
Firsty, you will find a folder called Themes and in there a file named Generic.xaml. In there you will see a style that has a setter setting the Template property. You will also see that both the Style and set ControlTemplate have a set TargetType that should be local:CustomControl1.
This is important as this is showing you how to create a custom controls default template. Now, to apply this template look in CustomControl1.cs and consider the following code.
DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl1), new FrameworkPropertyMetadata(typeof(CustomControl1)));
For this control named CustomControl1, that template we looked at in the xaml will be automatically set as that controls default template where ever that control is used.
This project is a good starting point. But now you may want to override this ControlTemplate inside your main project. This is simple. I have code that looks something like this inside my main WPF project.
At the top of the MainWindow.xaml
<Window x:Class="CustomControlTesting.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:CustomControl="clr-namespace:CustomControlTesting.CustomControlLibrary;assembly=CustomControlTesting.CustomControlLibrary"
Title="MainWindow" Height="350" Width="525">
And in the body,
<CustomControl:CustomControl1>
<CustomControl:CustomControl1.Template>
<ControlTemplate TargetType="{x:Type CustomControl:CustomControl1}">
<Grid>
<!-- Define my look to override the template -->
</Grid>
</ControlTemplate>
</CustomControl:CustomControl1.Template>
</CustomControl:CustomControl1>
This is a brief overview and certainly misses out a lot. But I hope this is of help to you and can get you started.
I have created the WPF user control and WPF window in class library project. Controls are public.
These controls are available for other project of the same solution. I can see them in the toolbox of the VS2010 when i add project reference from the WPF application project.
However, when i create some WPF application project outside the solution and add reference to the my user control library project, the controls do not appear in the toolbox! (My applications XAML file is open when I try to see them in toolbox to drag-drop on the application's main XAML)
What makes the controls avilable to the outside world when their assembly is referenced by the consumers?
Try right clicking on the toolbox and selecting Choose Items From that form click browse and select your DLL. That should put the controls in the toolbox for you.
I think the problem is that in your new WPF project you need to set an XML namespace where you reference your user control library. Then you can use your controls in the XAML.
For example :
thats an xml namespace definition in the XAML:
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
assembly=Microsoft.Phone.Controls.Toolkit"
And how you can use a control from this control library
< toolkit:ListPicker />
I hope this will help you.
Right click inside the toolbox and select "Show All".
I have a project with 100's of usercontrols. When I load the project in VS2010 and try to open a designer, the toolbox spins and spins until they're all loaded.
Winforms has a "AutoToolboxPopulate" switch under Tools/Options/Winddows Forms Designer/General.
I cannot find a similar switch for the XAML designer. Does one exist?
In VS2010, the Auto Populate Toolbox switch for XAML can be found under Tools/Options/Text Editor/XAML/Miscellaneous.
If you wish to keep the Auto Populate enabled, you can decorate your usercontrol classes with the System.ComponentModel.DesignTimeVisibleAttribute which will allow you to specify if they appear or not in the designer.
Unfortunately there isn't one that I am aware of, with the exception of actually adding a design-time (*.Design.dll) assembly for the project that effectively defines metadata to hide the explicit controls.
This bit me as well recently and I wish I had a solution like the old winforms attribute!
How would i create a window template using Blend? My application will be sharing many pages with the same layout.
One of my major concerns is what will happen when i need to make a change to the template. Will this update all of the pages automatically? Should i just use a usercontrol and add it to everypage?
Stay away from UserControls, generally. Instead, you want to use ControlTemplates, and put them in Resource Dictionary files, which you can totally make with Blend.