WPF - Which one is better? Style or User Control? - wpf

I wanted to know which one amongst Style and UserControl would be better to use in WPF?
For example:
I have created an image button in two different ways.
One uses Style and ContentTemplate property is set.
It uses one other class with dependency properties.
The other way is I have created a UserControl which has a button and its content property is set.
The file UserControl.xaml.cs also contains the dependency properties.
For Code details see the answers of this question:
Custom button template in WPF
Which one would be better to use? In which scenario should one go for Style or UserControl or any CustomControl?

Styles are limited to setting default properties on XAML elements. For example, when I set the BorderBrush , I can specify the brush but not the width of the border. For complete freedom of a control’s appearance, use templates. To do this, create a style and specify the Template property.
Styles and templates still only allow you to change the appearance of a control. To add behavior and other features, you’ll need to create a custom control.
For example,
To create a button like a play button use styles and templates, but to create a a play button which will change its appearance after pausing it use UserControl.

For this type of thing I would go with Style, even though I'm not really adept with graphical tools. I tend to produce a basic, boring style that I can get started with and then prettify it once the application functionality has been verified.
The nicest thing about WPF is being able to distance much of the graphical look, feel and behaviour away from the code.
This allows you to change the style of your application without revisiting the code and indeed means that you can change styles on the fly at runtime.
There is an awkward line to tread with regards to how much behaviour is placed within the XAML and how much is placed within the code. A rough guide would be to decide on what behaviour must always be present within the UI and place that in the code, everything else place within the XAML.
Think of the code as being an abstract class with defined interfaces and the XAML Styles as being classes based on that class and you'll get an idea of what I mean.
Conversely, I know that people who are far more adept at the GUI work prefer to put more functionality in the XAML and others who prefer the code side, because they find the GUI work slow or difficult.
When thought of that way you'll see that there's never really a right or wrong answer, just better solutions that suit your skills.

Related

Benefits of Custom WPF Controls

I've thoroughly checked the custom controls topic, spent several hours looking into custom controls written by other people. I've written my own custom button, to feel it better. I've read all the google answers around the "why custom controls", "advanced custom controls examples" and such.
My question is, WHY?
Why would I (or anybody) go through 9 circles of hell to create his own custom control, when one can just adjust an existing control to his needs (using styles and templates). I actually didn't find any explanation on google, just tons of examples, mostly from people who sound even less educated than me.
I imagine there IS such need, when talking about some complicated DataGrid with, I don't know, every cell being a button or something (and still I believe I could do it with a regular DataGrid)... But I've not found anything more complex than a beautiful button. Is there nobody sharing a complicated code on the topic?
There are different levels of element customization in WPF, depending what class you extend from. Each has its own uses and is implemented differently. It is not clear from your question if you are asking about a specific type of control or about all of them in general. So, I will tell you what I think about different ones.
UIElement or FrameworkElement
Extending UIElement gives you the lowest level custom control where you have complete control over the layout and rendering. FrameworkElement is slightly higher level as it does most of the common layout stuff for you while also allowing you to override key parts of it. The main idea with these is that they do their own rendering rather than composing other elements together.
I have made a number of custom FrameworkElements over the years. One example is a ruler similar to one you might find in a program like Photoshop. It has a bunch of properties providing customization for how it is displayed as well as showing markers indicating mouse position relative to the ruler (and a number of other little optional features). I have used it in two different professional projects. I think the main benefit is that it is extremely easy to drop in and set properties/bindings on wherever desired. Build it once, use it over and over.
Control
Extending Control introduces the concept of compositing multiple elements/controls into one reusable component via control templates.
I have used this one less often, but still find it very valuable in the right circumstances. Again, the main benefit here is reusability. You create a control with properties that make sense for what you want to do, then hook up those properties to the properties of the controls in it's control template. Really, this is the same as applying a new template to an existing control, with the added feature of being able to define your own dependency properties. You also have the ability to perform custom logic in the control's code if you need to.
I may be misreading some of your text, but you seem to imply that making a custom control is considerably more difficult than making a control template for an existing control. I have found that the two are nearly identical in most cases using this approach, the only difference being whether you have a code behind you can use.
User Control
A user control is really only slightly different from a custom control practically speaking. Only, instead of defining a control template, you define the visual content directly.
This is probably the most common type of custom control. It is basically the standard method for making XAML based content in a WPF application. These can be reused like other controls, but are more suited for single use such as the content of a dialog or window or something else that is specific to a single application.
Some Other Control
You can also extend an existing control to add additional functionality to it. This way, you still get all the features the control offers and only have to implement the additional bit.
For example, I have a custom control called an AutoScrollRichTextBox that extends RichTextBox. So, it does everything a RichTextBox can do. It also has the ability to automatically scroll to the bottom when content is added to the text box (which it only does if the text box was already scrolled to the bottom before the addition content was added).
I could have implemented that feature as an attached property instead of an extension of the control (and maybe I should have), but it works, and I have used it in three different applications (as an output window and as a chat log). So, I am happy with it.
In the end, it really is just a matter of how self-contained, reusable, and easy to drop in you want a control to be. If there is already a control that does what you want, and you just want it to look different, then you should definitely use styles and templates to achieve that. However, if you want to make something that doesn't already exist, limiting yourself to using only styles and templates will make the implementation work harder and make the end result less reusable and more difficult to set up additional instances (unless all instances are identical).
The examples of making things like buttons that look different are not examples of what you should use a custom control for. They are just examples of how someone would go about making a custom control for the purpose of teaching the details of the process. If you actually want a customized button, just customize a button.

Setting default values for inherited properties on a custom control in WPF

I'm trying to subclass a charting tool that has on it an XAxis property, which is of type IAxis (so you can give it a NumericAxis, DateAxis, etc). When using the base chart normally, I can set the XAxis like so:
<chart:BaseChart>
<chart:BaseChart.XAxis>
<chart:NumericAxis VisibleRange="{Binding XAxisVisibleRange}" AxisAlignment="Bottom"/>
</chart:BaseChart.XAxis>
</chart:BaseChart>
However I'm not really sure what the best practice is for setting this default axis in a custom control, should it be in the XAML, in the C# code-behind, etc? I can get it working from the code-behind by setting the XAxis property/bindings in the constructor of my subclass. This works, I just don't know if it's the "correct" way to do it.
Being new to WPF, I don't know where/how to do it in XAML for the custom control, if that's even the right place for it to be. Should it go in the control template, the style, somewhere else? I tried doing a Setter in the style, that did not work (it compiled but I did not see any axes). From the control template, it doesn't recognize <chart:BaseChart.XAxis>. There are AxisAreas defined for top bottom right and left, and if I simply put the <chart:NumericAxis etc/> inside one of those then the axis does show up there, however that doesn't feel correct since it's not actually setting the XAxis property on the BaseChart, plus it's bypassing the AxisAlignment property on the NumericAxis object and explicitly placing the axis in whichever AxisArea I put the axis code in.
Like I said, I do have this working from the code-behind, I just want to make sure I'm doing it the best way I can. Any help would be much appreciated, thanks in advance!
Please take a look at the Control Authoring Overview page on MSDN for a complete answer to your question.
However, in short, for a CustomControl, you should create a folder in your application root directory named Themes. You should add a XAML file named Generic.xaml into this folder and you should put a ControlTemplate for your CustomControl in there.
For a UserControl, you can just add your Styles into the UserControl.Resources section of the page.

Extending user controls in WPF

I have built a User Control composed, as usual, of a XAML part and a code-behind part. Now, I need to create another User Control which shares some of the functionalities of the former, but which has different looks and might also have additional features in the code-behind.
My first idea was to create an interface to gather the common functionalities of the two types of controls. Is this the right way to go? And how would I manage the different XAML parts I should have? Any advice is welcome.
I would like to add another contribution which I think might be useful to others encountering my same situation.
One other possible solution, which in my opinion is suitable if the controls you are going to create are not particularly complex, is to create a base User Control containing the common features that you want to share: such control will be written entirely in C#.
This, in fact, allows inheritance in User Controls composed of both XAML and code behind. In the XAML of the inherited control, rather than having
<UserControl> ... </UserControl>
You will have
<MyProject: MyBaseControl x:Class="MyProject.MyExtendedControl"> ... </MyProject: MyBaseControl>
and then in the code behind you will also need to specify the following:
class MyExtendedControl : MyBaseControl
Hope this helps.
User controls don't lend themselves well to inheritance in WPF, you can do some hacks to make it work, but overall you'll probably be better off using a Custom Control instead. It's easier to specify different XAML for inherited controls using this technique. The easiest way to get started with a custom control is to add a new item to your project of type "Custom Control (WPF)" and it will add the control and the XAML gets added to Themes/generic.xaml for you.
To inherit from this control, the easiest way is to add another new Custom Control (WPF) and then change the code behind to inherit from your parent control instead of Control.
There are a number of ways to split up the pieces to make them easier to work with.
MVVM, as mentioned in a comment, relies upon Data Binding to separate the input controls from logic. By setting the appropriate class which implements INotifyPropertyChanged into the DataContext of you control, you can change the behaviour. Your DataContext class or ViewModel could implement Visibility properties to show and hide different parts of the input if the differences are not too great between the uses.
Another way to break apart functionality is by Aggregation. See StackOverflow 269496
You could build smaller controls that implement common functionality and then build larger special purpose controls by combining the smaller controls (i.e. aggregating them) to make the larger control. Aggregation will work for both the code-behind and the Data Binding approaches.

How to use inheriting in WPF

I try to use inheriting in WPF. I have asked a question about this earlier, but no one answered correct. So I try to make a BaseWindow class with some UI elements and I want that other windows, that inherit my BaseWindow would have these UI elements. How to do that. My practise with WinForms applications dont work anymore. Maybe there are some simple examples or smth..? Thanks
If you want to inherit from a window, you need to create an implementation of a window in code only, and you can then inherit from this - note that your Window declaration in the XAML would need to change to point to this code, e.g.
<src:BaseWindow xmlns:src="clr-namespace:BaseWindowNamespace" ...>
If you define the base window using XAML, you'll get the following errors:
"'WpfApplication1.Window1.InitializeComponent()'
hides inherited member
BaseWindowNamespace.BaseWindow.InitializeComponent()'.
Use the new keyword if hiding was
intended"
"BaseWindowNamespace.BaseWindow cannot
be the root of a XAML file because it
was defined using XAML"
Now, at this point, I must point out that this is counter to the way that you should handle composition of your window. The "standard" way of doing this would be to use content templates to display user controls which could be swapped and styled to achieve different looks and functionality. In this way, the function of the window becomes that of a harness, and you can achieve a clean separation of content which can be easily implemented using MVVM.
Did you try the BasedOn tag? I don't know about windows, but that's what you use for UserControls AFAIK.

Can I partially apply a ControlTemplate in WPF?

I'm pretty green when it comes to WPF, so forgive me if this is an obvious question.
I'm trying to modify an existing code base that is using the Divelements SandRibbon libraries, but am finding that the GalleryButton control doesn't behave quite how I'd like. What I'd like to do is change the way GalleryButton arranges the image and label, but keep the default 'look' for all triggers such as mouse over etc.
Is it possible to apply a ControlTemplate to some parts of a control but not others? I want to specify that the GalleryButton displays its 'Image' and 'Text' properties differently than the defaults, but not touch anything else.
Unfortunately no -- it's all or nothing. However, one solution I've used before is to simply sublass the control and alter the layout in code behind in OnApplyTemplate.

Resources