locked
WPF Controllibrary RRS feed

  • Question

  • Hi folks,

    I am just getting started dealing with expression blend & WPF, so this is a question of fundamental understanding. I want to create controls with Expression Blend to provide them a developer to use them in Visual Studio. Best as a library or similar so that he can change and manage the items easily. I am thinking of resources for color, font and size.

    Right now i would go for a WPF controllibrary and place a new project (WPF application) for every single control in it. Each of these applications consists of a control, for example Buttons, scroll bars, tabs and so on.


    My questions:

    Is this approach fundamentally correct?

    How do I create the buttons, so later on I can pass it to a second person, who can change its properties?

    How do I define the resources / styles properly, so they can be edited "global"?


    Unfortunately, under the abundance of tutorials and walkthroughs i have found nothing specifically to this matter. For tips and suggestions I thank you so very much in advance!

     

    (and please forgive my poor english)

    Wednesday, December 8, 2010 10:20 AM

Answers

  • Hi Nikola_580

    I did the same thing but using a Silverlight Control Library. Below is a cut out of you questions and i will try and answer each one.

    The answers i gave to your questions all linked together at a higher level. If you require more detailed info please shout.

    Is this approach fundamentally correct?


    A [WPF Control Library] is like it says, it is a library of controls.
    When you create the [WPF Control Library] project you will see that it creates a [MainControl.XAML].
    Think of this as the canvas were you will create your Button.
    You can then go ahead and create the elements of your button using this canvas. Like rectangles, states and setting properties.
    If you have a look at the [Objects and Timelines] pane you should see a treeview like structure were your elements are represented.
    The top most one has the default name [UserControl]. This [UserControl] is your button and you can name it accordingly.
    Each [UserControl] you add is a control that can be used by other projects that reference you [WPF Control Library].
    Lets say you wish to create a fancy label that displays an image too.
    What you would do is, click the [Project] item on the menu. For the drop down that appears click the item [Add New Item...]. A dialogbox will popup, from the list of options displayed, choose the one that says [UserControl], and name it accordingly.
    Your [WPF Control Library] project will be updated with your new [UserControl] canvas and you can begin creating the elements.

     

    How do I create the buttons, so later on I can pass it to a second person, who can change its properties?

    As mentioned above the [WPF Control Library] can be used in multiple projects.
    Using the [WPF Control Library].
    First you create a [WPF Application] project, and name it accordingly. It may be an application that holds contact details.
    When the project has finished loading you will notice that it has a [MainWindow.XAML] item in the [Projects] tab, this is what you will your [UserControl]'s to.
    The other thing you will notice in the [Objects and Timeline] pane is that there is an item called [Window], this layout is similar to your [WPF Control Library] you created above.
    This is a visual heirachary of the items on [MainWindow.XAML.]
    Now you, or someone esle wants to use your [UserControl]'s from the [WPF Control Library] you created. To do this you need to add the [WPF Control Library] project to your [WPF Application] project solution.
    To do this choose [Project] -> [Add Existing Project...] and choose the project file for your [WPF Control Library]. A project file has the extension [.vbproj] or [csproj]

    Once you have done this you will see in your [Project] tab that you now have two projects under your solution item, [WPF Application] and [WPF Control Library].
    You now want to create an instance of your controls in your [WPF Application]'s [MainWindow.XAML].
    Click on the [Assets] button on the toolbar and do a search for your controls name or choose the [Project] item and they will be displayed in there.

     

    How do I define the resources / styles properly, so they can be edited "global"?

    Because you have now added your [WPF Control Library] to your [WPF Application] you can edit the [UserControl]'s directly in the [WPF Control Library], once you have built the project and solution

    you will see the change reflected in the [WPF Application]. All the [UserControl] will be affected by this change.
    To change a particular property or layout of an individual [UserControl] you can select the [UserControl] that you want to edit. Right click and choose [Edit Template] -> [Edit Copy...]. A dialog box pops up. Under the [Name] section enter in a name that best describes the style, and under the [Define In] choose [Application]. This makes the syle accessible accessible to the whole [WPF Application].

    I hope that this helps

    • Marked as answer by Nikola_580 Friday, December 10, 2010 8:59 AM
    Friday, December 10, 2010 1:48 AM

All replies

  • Hi Nikola_580

    I did the same thing but using a Silverlight Control Library. Below is a cut out of you questions and i will try and answer each one.

    The answers i gave to your questions all linked together at a higher level. If you require more detailed info please shout.

    Is this approach fundamentally correct?


    A [WPF Control Library] is like it says, it is a library of controls.
    When you create the [WPF Control Library] project you will see that it creates a [MainControl.XAML].
    Think of this as the canvas were you will create your Button.
    You can then go ahead and create the elements of your button using this canvas. Like rectangles, states and setting properties.
    If you have a look at the [Objects and Timelines] pane you should see a treeview like structure were your elements are represented.
    The top most one has the default name [UserControl]. This [UserControl] is your button and you can name it accordingly.
    Each [UserControl] you add is a control that can be used by other projects that reference you [WPF Control Library].
    Lets say you wish to create a fancy label that displays an image too.
    What you would do is, click the [Project] item on the menu. For the drop down that appears click the item [Add New Item...]. A dialogbox will popup, from the list of options displayed, choose the one that says [UserControl], and name it accordingly.
    Your [WPF Control Library] project will be updated with your new [UserControl] canvas and you can begin creating the elements.

     

    How do I create the buttons, so later on I can pass it to a second person, who can change its properties?

    As mentioned above the [WPF Control Library] can be used in multiple projects.
    Using the [WPF Control Library].
    First you create a [WPF Application] project, and name it accordingly. It may be an application that holds contact details.
    When the project has finished loading you will notice that it has a [MainWindow.XAML] item in the [Projects] tab, this is what you will your [UserControl]'s to.
    The other thing you will notice in the [Objects and Timeline] pane is that there is an item called [Window], this layout is similar to your [WPF Control Library] you created above.
    This is a visual heirachary of the items on [MainWindow.XAML.]
    Now you, or someone esle wants to use your [UserControl]'s from the [WPF Control Library] you created. To do this you need to add the [WPF Control Library] project to your [WPF Application] project solution.
    To do this choose [Project] -> [Add Existing Project...] and choose the project file for your [WPF Control Library]. A project file has the extension [.vbproj] or [csproj]

    Once you have done this you will see in your [Project] tab that you now have two projects under your solution item, [WPF Application] and [WPF Control Library].
    You now want to create an instance of your controls in your [WPF Application]'s [MainWindow.XAML].
    Click on the [Assets] button on the toolbar and do a search for your controls name or choose the [Project] item and they will be displayed in there.

     

    How do I define the resources / styles properly, so they can be edited "global"?

    Because you have now added your [WPF Control Library] to your [WPF Application] you can edit the [UserControl]'s directly in the [WPF Control Library], once you have built the project and solution

    you will see the change reflected in the [WPF Application]. All the [UserControl] will be affected by this change.
    To change a particular property or layout of an individual [UserControl] you can select the [UserControl] that you want to edit. Right click and choose [Edit Template] -> [Edit Copy...]. A dialog box pops up. Under the [Name] section enter in a name that best describes the style, and under the [Define In] choose [Application]. This makes the syle accessible accessible to the whole [WPF Application].

    I hope that this helps

    • Marked as answer by Nikola_580 Friday, December 10, 2010 8:59 AM
    Friday, December 10, 2010 1:48 AM
  • Hey Fabfella,

    thank you so very much for your precise instructions! I noticed on my own that, when you create a WPF-Project for every single Control your software solution will get very clumsy. But i wasnt shure if i could use UserControl as a proper template because of the lack of possibilities to change its parameters afterwards. Now i am handling the project as you described and everything is working fine! It isnt easy as a designer to get into that stuff, code hierarchies eg.. But i think its worth the effort and helps gaining mutual understanding and respect.

    Greetings!

    Friday, December 10, 2010 9:07 AM
  • Hi Nikola_580

    You are more that welcome. It's only a pleasure to assist you.

    Happy designing and coding

     

    Sunday, December 12, 2010 6:47 AM