Question

I have a grid control that I use throughout the application. I would like to extend the grid control to include a context menu with one item “freeze/unfreeze columns”. If I elect to use a custom control, I cannot implement this functionality within the control — instead, I have to implement the functionality wherever I place my custom control. The other alternative is user control, in which I can implement all the necessary functionality within the control:

<Grid>
    <dxg:GridControl Name="gridData" DataSource="{Binding}" dx:DXSerializer.StoreLayoutMode="All">
        <dxg:GridControl.Resources></dxg:GridControl.Resources>
        <dxg:GridControl.Columns />
        <dxg:GridControl.View>
            <dxg:TableView ShowGroupPanel="False" MouseRightButtonUp="TableView_MouseRightButtonUp">
                <dxg:TableView.ColumnMenuCustomizations>
                    <dxb:BarButtonItem  Name="freezeColButton" Content="Freeze Column(s)" dxb:BarItemLinkActionBase.ItemLinkIndex="0" ItemClick="freezeColButton_ItemClick" />
                </dxg:TableView.ColumnMenuCustomizations>
            </dxg:TableView>
        </dxg:GridControl.View>
    </dxg:GridControl>
</Grid>

Notice, the TableView.ColumnMenuCustomization tag includes the event handler for the freeze/unfreeze functionality.

However, the only issue with the user control is that I cannot access the underlying Grid’s Columns property. For example, when I place my user control (defined above) in a window, I get an error (Error 25: The tag ‘ExtendedGridControl.Columns’ does not exist in XML namespace ‘clr-namespace:UI.Controls’):

<Window>
    ...
     <Grid>
        <uc:ExtendedGridControl x:Name="extendedGridData" >
            <uc:ExtendedGridControl.Columns>
                <dxg::GridColumn FieldName="FieldA" Visible="True" />
                ...
            </uc:ExtendedGridControl.Columns>
        </uc:ExtendedGridControl>
    </Grid
</Window>

How can I expose the GridControl properties? Any help/suggestions would be greatly appreciated.

Answer 1

You need to propagate the properties by defining them on the UserControl, e.g.

public partial class Bogus : UserControl
{
    // You often can reuse properties via DependencyProperty.AddOwner
    public static readonly DependencyProperty ItemsSourceProperty = ItemsControl.ItemsSourceProperty.AddOwner(typeof(Bogus));
    public IEnumerable ItemsSource
    {
        get { return (IEnumerable)GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }

    public static readonly DependencyProperty ItemTemplateProperty = ItemsControl.ItemTemplateProperty.AddOwner(typeof(Bogus));
    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set { SetValue(ItemTemplateProperty, value); }
    }

    public Bogus()
    {
        InitializeComponent();
    }
}

<UserControl x:Class="Test.UserControls.Bogus" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" Name="control">
    <StackPanel>
        <TextBlock Text="Lorem Ipsum:" />
        <ItemsControl ItemsSource="{Binding ElementName=control, Path=ItemsSource}"
                ItemTemplate="{Binding ElementName=control, Path=ItemTemplate}" />
    </StackPanel>
</UserControl>

The properties are visible outside and the internal controls bind to them.

For some properties you do not use a DependencyProperty, but just a clr-property which references the internal control’s property, this may be preferable with certain properties that only have setters or internal constructors or are not dependency properties in the internal controls either, e.g.

public ItemCollection Items
{
    get { return _itemsControl.Items; }
}