WPF Discussion Boards

I am new to WPF applications. I come from a VB6 Windows Forms background. I used to create user controls that I used in UI's to create graphic content controls like buttons with normal, down,and hover images. While I know the ultimate way to do this is create a separate project for my custom controls I am just working withing a single project to get things worked out first.

I have created a Controls folder where I have added several custom controls each inherting from a base control like Button, RadioButton, Slider, Checkbox etc. I can then add properties to each custom control for DefaultImage, DownImage, HoverImage and in the case of a Slider GripImage and GutterImage. The properties have a public set/get property so I can set the images for a specific control and then the control behavior can set the proper image.

There is an Images folder where I put all the images needed for the application.

I have created a Images.xaml ResourceDictionary that defines key names like ButtonDown to the specific image names so the image naming in the template is easier and I can swap out images easily.

A Generic.xaml gets created in the Themes folder where the basic Control Template goes. Not sure if this is best practice for storing each Control Template or not but it is what gets created by default.

My main area of difficulty is creating the template. I know what I want to do but can't get the syntax to work correctly.

In the case of the custom button I want to create triggers for IsPressed and IsMouseOver and set the controls Background ImageBrush to the proper image. When those triggers are false I want to set the background image to the DefaultImage

I'm not sure about the syntax for refering to the image property of the custom Control and how best to access it in the xamal.

I've looked at a lot of examples but none seem to do things the way I am organizing it. I don't want to hard code the images to the control. My ultimate goal is to be able to drag the custom control into a grid using the designer and set the Default, Down, and Hover image properties and then place the control how I want it in the designer. Then if I want to change the entire look of the app I can just swap out images in the Images folder and the GUI will change.

For starters, you should only use images when its actually an image. For other cases, you should draw the part using XAML primitives. In the example you mentioned, the slider thumb and gutter and tick marks, etc. should all be drawn in XAML primitives. You'll find out why down the road Smile | :)

.

When you are inheriting from a system control, you should generally NOT write your own template from scratch, but rather dump out the Microsoft template and either inherit from it, or paste it into your assembly and modify it. Reason being is that while Microsoft pushes "lookless" controls (the XAML has no knowledge of the code and the code has no knowledge of the XAML), you'll find out they are not. Controls often rely on primitives being in certain layouts and having certain names.

Dumping out the Microsoft templates is also a GREAT way to teach you how real world controls are put together.

I typically use Expression Blend for dumping out templates.

NOTE: unless you are going to have a control that is themeless, you need to do a lot of tricks to have say an XP theme, an Aero theme, Green theme, Blue Theme,etc. so you respect the users settings. If you are just going to have one look & feel across all themes / OS'es, etc. then you don't need to worry about that as much.

Just follow the Microsoft template lead to be honest with you... they are doing it "the right way".

I should probably point out that the UI's that I build are VERY graphic in nature with borderless nonsizeable main windows with irregular shaped graphic backgrounds. All Buttons, radios, checkboxes, sliders and other basic controls are designed by a graphic designer and then sliced up for the GUI. These are NOT standard UI's. The GUI's are used for small utility setting setup (think tooltray app for setting up some small feature) or they are internal tools that are used by non computer people or used as a demo on a large screen or demo room with specific hardware to demonstrate a feature.

That said...how do I "Dump out" a control template?

Yeah, I get it. As I said in my original response, that is how you did it in Win32 / MFC / Winforms, etc. If you are going to do WPF, you should use the WPF mechanisms. Otherwise, why bother? Not trying to be a dick, just saying lol... If you are not going to do that... might as well stick with Winforms, as you won't get any of the WPF advantages.

You will be surprised what can be drawn with WPF primitives... there's a guy on here who is a REAL stud at that...

[^]

[^]

[^]

are just some examples.

download a copy of Expression Blend (a Microsoft app) and you can drag a control on a form, right click and dump out the template. You'll get full compilable XAML, all the brushes, resources, etc.

You'll notice EVERYTHING... buttons, checkboxes, radio buttons, etc. are all drawn with XAML.

Honestly, if you are working with a photoshop graphic designer (traditional), you might as well skip WPF as you'll just be piecing together all the graphics Winform style anyways. You really need a designer that knows the WPF tools (Expression Blend, Sketch Flow, etc). Should not be too hard for a photoshop guy to learn Expression Blend (if he is interested) as it pretty much works the same way... drop primitives like lines, curves, gradients, etc. on the form and do stuff.

You ***WILL*** need to draw ***EVERYTHING*** using XAML primitives if you want to do the fancy WPF stuff... animations, fading, special fx, etc.