Custom SilverLight Container Control

Question

I want to create a new Silverlight Container Control,the control should contain two buttons by default say a Save and a Cancel button. When the user uses this control on the main page he should be able to add new controls like text box ,combo,etc on to this control.Also the events of default buttons like btn_SaveClick and btn_CancelClick should be available for the users to code in code behind of main page .Is creating such a control possible?
PS:I am currently using SilverLight5 on VS2010.

Michael Rodriguez Michael Rodriguez · Accepted Answer · 2012-07-13T15:24:08

This is definitely possible. First you need a class derived from ContentControl:

public class MyControl : ContentControl ...

Then you need code similar to this in your XAML resource file:

<!-- MyControl -->
<Style TargetType="me:MyControl">
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="BorderMargin" Value="4,4,4,0" />
    <Setter Property="FooterMargin" Value="4,0,4,4" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="me:MyControl">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <!-- Content -->
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                    <!-- Footer Buttons -->
                    <Grid x:Name="grdFooter" Grid.Row="1" Background="{StaticResource Footer_Bkg}" Margin="{TemplateBinding FooterMargin}">
                        <!--Buttons here-->
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And finally to use it in a page you just need something like this:

<me:MyControl x:Name="MainPage">
    <Grid x:Name="LayoutRoot">
        <!--Cool stuff here-->
    </Grid>
</me:MyControl>

Custom SilverLight Container Control

1 Answers