Custom/user control

Question

I have such task - to create control that union two controls (DataGrid from WPFToolkit and standard Toolbar). On a large scale, it doesn't matter what particular controls it unions, I need to find out the common practices that can be used to build what I need. At first glance, I need something like user control, i.e composition of controls, that I can implement as a whole and reuse then. But, my task requires me to have possibility to tune my composite control in XAML. So, if I compose Toolbar and DataGrid, I want properties and events of both them would be exposed. So I could set in XAML both, for example, columns of datagrid and bars of toolbar:

(I put spaces in tag names intentionally, because loacal parser didn't type them for some reason)

<MyDataGridToolBarControl>
<DataGrid>
        <DataGrid.Columns>
            <DataGridTextColumn Header="firstColumn">
            </DataGridTextColumn>
            <DataGridTextColumn Header="secondColumn"/>
        </DataGrid.Columns>
</DataGrid>
<ToolBar Background="{x:Null}"> 
        <Button ToolTip="New">
            <Image Source="New.png"/>
        </Button>
        <Button ToolTip="Save">
            <Image Source="Save.png"/>
        </Button>
        <Button ToolTip="Delete">
            <Image Source="Delete.png"/>
        </Button>               
</ToolBar>
</MyDataGridToolBarControl>

The only decison that suits me less or mor for now is to make custom control inherited from Datarid (as DataGrid is more significant in this pair) and redefine Template including both datagrid and toolbar. This gives me all power of datagrid but, if I want get Toolbar part, I need to do it through code, seeking it in viual and logical trees i.e. getting access o it programmatcally, which is not pretty decision. Please help a newbie to solve this task ) Thanks in advance...

Answer 1

If it's just a matter of wanting users on the outside to access every property of the grid and every property of the toolbar via Xaml then using composition you could create a usercontrol and expose the two controls like this:

<UserControl>

    <StackPanel>
        <ToolBar x:Name="ToolBar" x:FieldModifier="Public" />
        <DataGrid x:Name="Grid" x:FieldModifier="Public" />         
    </StackPanel>

<UserControl>

The problem with this approach is that that users cannot override the layout of the grid and toolbar because it is a user control. They can however completely override the templates and styles of the toolbar and the grid.

A slightly better approach would be to create a custom control (again using composition). You could supply could the grid and the toolbar in the template like this:

<ControlTemplate>
        <StackPanel>
            <ToolBar x:Name="PART_ToolBar" />
            <DataGrid x:Name="PART_Grid" />         
        </StackPanel>
</ControlTemplate>

[TemplatePart("PART_ToolBar", typeof(ToolBar))]
[TemplatePart("PART_Grid", typeof(DataGrid))]
public class MyCustomControl : Control
{
    private ToolBar _ToolBar;
    public ToolBar ToolBar {get{return _ToolBar;}}

    private DataGrid _Grid;
    public DataGrid Grid {get{return _Grid;}}

    protected overrides OnApplyTemplate()
    {
         _ToolBar = this.Template.FindName("PART_ToolBar", this) as ToolBar;
         _Grid = this.Template.FindName("PART_Grid", this) as DataGrid;
    }
}