Using custom controls with catel and binding commands.

Topics: Questions
Feb 5, 2013 at 1:14 PM

Just recently, I've started experimenting with creating custom controls (not just usercontrols that inherit from other controls, but the templatedcontrols). This generates a generic.xaml page and a code file.

Those 2 pages are linked by using following line of code in the constructor:
this.DefaultStyleKey = typeof(CollectionPager)
This is how the Xaml looks like, it's pretty basic atm:
<ResourceDictionary xmlns=""
    <resources:DictionaryHelper x:Key="Dictionary" />
    <IMTToolkit:DataContextProxy x:Key="DataContextProxy"/>
    <Style TargetType="local:CollectionPager">
        <Setter Property="Template">
                <ControlTemplate TargetType="local:CollectionPager" >
                    <Border x:Name="LayoutRoot"  Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Background="#AA000000">
                            <toolkitControls:ImageButton Source="/ItemManagementTool.ClientApplication;component/resources/Images/buttons/add.png" 
                                            Command="{Binding Source={StaticResource DataContextProxy}, Path=DataSource.AddNewQuestionCommand}" Style="{StaticResource ImageButtonStyle}" 
                                            Tag="{Binding Source={StaticResource Dictionary}, Path=LocalizedStrings.AddQuestion}" Margin="5" Height="30" />
                            <sdk:DataPager Margin="5" Background="#AAFFFFFF" Source="{TemplateBinding Source}" PageSize="1" AutoEllipsis="True" NumericButtonCount="2" DisplayMode="FirstLastPreviousNext" IsTotalItemCountFixed="True"/>
                            <toolkitControls:ImageButton Source="/ItemManagementTool.ClientApplication;component/resources/Images/buttons/delete.png" 
                                            Command="{Binding DeleteQuestionCommand}" Style="{StaticResource ImageButtonStyle}" 
                                            Tag="{Binding Source={StaticResource Dictionary}, Path=LocalizedStrings.DeleteQuestion}" Margin="5" Height="30" />
Does catel also provide a way for the code and xaml to resolve the bindings (command in Xaml doesn't trigger the method created in the code file)?
Feb 6, 2013 at 11:17 AM
There might be a way to provide this behavior, although it might be performance consuming / a bad idea. Currently, there is a UserControlBehavior (for xaml) and a UserControlLogic (used by Catel itself) which provide the mvvm logic. It might be possible to derive your own CustomControlLogic from the LogicBase. However, this is core functionality of Catel so you should be knowning what you are doing :-)
Feb 25, 2013 at 9:17 AM
So if I understand this correctly, unless I know how the core of Catel works, I should find an alternative way of doing this?
Feb 25, 2013 at 5:32 PM
Well, Catel doesn't support it out of the box. A custom logic must be created to support this (deriving from LogicBase). You have a few options:

1) Don't use this technique
2) Write a custom Logic class to support this (you will need to know how Catel works)
3) Hire a consultant to do it for you

It's up to you.