none
Custom control in WPF using MVVM concept.

    Question

  • hi,

    I want to create a custom control library in WPF using MVVM concept, i.e. in generic.xmal the xmal should not be binded with its code behind.

     

    The objective is to bind more than one custom controls (with different shape and size) to common code behind.

     

    Looking for guidance………..

    Monday, October 12, 2009 11:43 AM

Answers

  • (Custom) controls in WPF should be considered 'lookless' controls, i.e. the logic should not care about its presentation. If a control does require a certain element in its presentation it should indicate that with the TemplatePart class attribute, but it should not fail when that element is not present.

    A custom control can have only one default style, located in generic.xaml. However, you can create as many additional styles for your control as you want. The easiest way would be to leave that to the consumer of your control :-) He/she will usually put these styles in an application-scoped resourcedictionary.

    If you want to provide these additional styles yourself, you have a couple of options:
    - include separate resource dictionaries (or one big one) with the additional styles, thus saving the consumer the trouble of doing the same thing himself;
    - create a subclass of your base class for every variant you want to supply in your library and point it to its own default style;
    - create additional styles for your control in generic.xaml (or merged dictionary) and make them visible to the consumer by giving these styles a ComponentResourceKey, instead of a simple stringbased key;

    hth,
    Marcel

    http://dutchmarcel.wordpress.com/
    • Proposed as answer by Bigsby Monday, October 12, 2009 4:00 PM
    • Marked as answer by Jim Zhou - MSFT Friday, October 16, 2009 8:35 AM
    • Unmarked as answer by Reetika Monday, October 26, 2009 6:33 AM
    • Marked as answer by Reetika Monday, October 26, 2009 6:33 AM
    Monday, October 12, 2009 1:55 PM
  • Then I think my earlier explanation still applies, but what choice you make largely depends on the degree of modification you want to allow.
    The consumer of your custom control can always replace the whole controltemplate with a new one. But that might be a lot of work for the consumer if it is a complex control.

    You can also create custom dependency properties to open up parts of your control to simple modifications. You can also back these with DataTemplates if you want. This way the consumer can set a simple property and/or define a datatemplate to present it how he wants.
    You can also split your default controltemplate up in multiple parts and giving each part (that you want to allow a consumer to restyle) a ComponentResourceKey. Any resource (Style, ControlTemplate, Brush, etc) in your generic.xaml (or in a merged resourcedictionary) with a ComponentResourceKey is visible to the consumer of your control.

    I created a sample project that shows the above techniques and you can download it here:

    hth,
    Marcel


    http://dutchmarcel.wordpress.com/
    • Marked as answer by Reetika Monday, October 26, 2009 6:34 AM
    Wednesday, October 14, 2009 9:57 AM

All replies

  • (Custom) controls in WPF should be considered 'lookless' controls, i.e. the logic should not care about its presentation. If a control does require a certain element in its presentation it should indicate that with the TemplatePart class attribute, but it should not fail when that element is not present.

    A custom control can have only one default style, located in generic.xaml. However, you can create as many additional styles for your control as you want. The easiest way would be to leave that to the consumer of your control :-) He/she will usually put these styles in an application-scoped resourcedictionary.

    If you want to provide these additional styles yourself, you have a couple of options:
    - include separate resource dictionaries (or one big one) with the additional styles, thus saving the consumer the trouble of doing the same thing himself;
    - create a subclass of your base class for every variant you want to supply in your library and point it to its own default style;
    - create additional styles for your control in generic.xaml (or merged dictionary) and make them visible to the consumer by giving these styles a ComponentResourceKey, instead of a simple stringbased key;

    hth,
    Marcel

    http://dutchmarcel.wordpress.com/
    • Proposed as answer by Bigsby Monday, October 12, 2009 4:00 PM
    • Marked as answer by Jim Zhou - MSFT Friday, October 16, 2009 8:35 AM
    • Unmarked as answer by Reetika Monday, October 26, 2009 6:33 AM
    • Marked as answer by Reetika Monday, October 26, 2009 6:33 AM
    Monday, October 12, 2009 1:55 PM
  • hi,

    Actually the problem is my custom controls are shapes, and consumer may need to change the shape or create new shape for same control.

    It’s not a matter of color and size only.

    I have no idea how to do this………..

    ..Reetika

    Tuesday, October 13, 2009 5:09 AM
  • I'm not sure what you really mean then. A Shape class does not inherit from Control, so if you inherit from Shape, the whole story about custom controls does not apply.
    I'm also not very familiar with the inner working of shapes, but googling for 'wpf custom shape' resulted in this article:

    Maybe it can set you on the right track...

    Marcel

    http://dutchmarcel.wordpress.com/
    Tuesday, October 13, 2009 3:21 PM
  • No, am not inheriting from shap class am inheriting from control class only. what i want is to make control with a basic design and allow consumer to make change if required.
    for exaplme:

      <Style TargetType="{x:Type local:Motor1}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:Motor1}">
                        <Border>
                            <Viewbox>
                                <Grid>
                                <Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Background}" HorizontalAlignment="Left" Margin="7.995,-0.003,0,0" VerticalAlignment="Top" Width="32" Height="32"/>
                                <Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Background}" HorizontalAlignment="Left" Margin="0,8,0,0" VerticalAlignment="Top" Width="47.995" Height="17.33"/>
                                <Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Background}" HorizontalAlignment="Left" Margin="-0.005,30.995,0,0" VerticalAlignment="Top" Width="48" Height="9.5"/>
                                </Grid>
                            </Viewbox>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    this is a control which will change color according to some value which will be binded with its dependency property.

    here what i want is, consumer can change the design of the control is xmal, without working on code behind and changing the default shape.
    Wednesday, October 14, 2009 3:04 AM
  • Then I think my earlier explanation still applies, but what choice you make largely depends on the degree of modification you want to allow.
    The consumer of your custom control can always replace the whole controltemplate with a new one. But that might be a lot of work for the consumer if it is a complex control.

    You can also create custom dependency properties to open up parts of your control to simple modifications. You can also back these with DataTemplates if you want. This way the consumer can set a simple property and/or define a datatemplate to present it how he wants.
    You can also split your default controltemplate up in multiple parts and giving each part (that you want to allow a consumer to restyle) a ComponentResourceKey. Any resource (Style, ControlTemplate, Brush, etc) in your generic.xaml (or in a merged resourcedictionary) with a ComponentResourceKey is visible to the consumer of your control.

    I created a sample project that shows the above techniques and you can download it here:

    hth,
    Marcel


    http://dutchmarcel.wordpress.com/
    • Marked as answer by Reetika Monday, October 26, 2009 6:34 AM
    Wednesday, October 14, 2009 9:57 AM
  • Hi,
    -->here what i want is, consumer can change the design of the control is xmal, without working on code behind and changing the default shape.

    As DutchMarcel illustrated above, you can make your custom class expose some dependency properties, and then in the control template, you bind the properties of shapes like Rectangles to those properties. In this way, you just need to set the custom dependency properties in XAML markup without implementing them in the code behind, and the internal shapes will render the value via the data binding you have made.

    Thanks.
    Sincerely.
    Jim Zhou -MSFT
    Wednesday, October 14, 2009 12:37 PM
  • Thanx for reply!
    I used multiple resource dictionaries, and it worked.
    but i ve to use mvvm model.

     
    ..Reetika

    Monday, October 26, 2009 11:04 AM
  • Hi Reetika,

    Glad to hear that the solution worked for you, if you still have additional issues regarding WPF, please feel free to post it at this forum.

    Thanks.S
    Sincerely.


    Jim Zhou -MSFT
    Tuesday, October 27, 2009 9:09 AM