Sharker Khaleed Mahmud Silverlight Tips & Tricks

August 24, 2010

85. Custom Layout using ContentControl in Silverlight

Filed under: Silverlight — Tags: , — Sharker Khaleed Mahmud | shamrat231 @ 6:30 AM

[tweetmeme source=”shamrat231” only_single=false]

In this entry, I will use content control to create a site layout. So basically the layout control will have header, footer, left body, right body and main body.

You can see the live example here [live demo]   

The SOURCE CODE(.zip) is at the end of the page for download.

Lets start by creating a class inheriting content control.

namespace SiteLayout
{
    public class LayoutContentControl : ContentControl
    {

    }
}

Now before getting started with writing code, lets get the default design of the Content Control. This can easily be achieved by blend. Just drag a content control and click on “edit a copy”

 

Now remove the key and modify the target type to reflect your layout control as shown below.

        <!–LayoutContentControl–>
<Style TargetType=”controls:LayoutContentControl”>
            <Setter Property=”Foreground” Value=”#FF000000″/>
            <Setter Property=”HorizontalContentAlignment” Value=”Left”/>
            <Setter Property=”VerticalContentAlignment” Value=”Top”/>
            <Setter Property=”Template”>
                <Setter.Value>
                    <ControlTemplate TargetType=”controls:LayoutContentControl”>
                        <ContentPresenter Cursor=”{TemplateBinding Cursor}” ContentTemplate=”{TemplateBinding ContentTemplate}” Content=”{TemplateBinding Content}” HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”{TemplateBinding Padding}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”/>
                    ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Now, lets get back to our LayoutContentControl class and assign the the style to our control.

    public class LayoutContentControl : ContentControl
    {
        public LayoutContentControl()
        {
            this.DefaultStyleKey = typeof(LayoutContentControl);
        }
    }

As stated before, I will be creating 5 sections to my layoutContentControl. So basically, five dependency property needs to be created for this class

So we have to have five content presenter in our style.

        <!–LayoutContentControl–>
       <Style TargetType=”controls:LayoutContentControl”>
            <Setter Property=”Foreground” Value=”#FF000000″/>
            <Setter Property=”HorizontalContentAlignment” Value=”Left”/>
            <Setter Property=”VerticalContentAlignment” Value=”Top”/>
            <Setter Property=”Template”>
                <Setter.Value>
                    LayoutContentControl”>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height=”Auto”/>
                                <RowDefinition Height=”Auto”/>
                                <RowDefinition Height=”Auto”/>
                            </Grid.RowDefinitions>
                            <ContentPresenter Grid.Row=”0″ Cursor=”{TemplateBinding Cursor}” ContentTemplate=”{TemplateBinding ContentTemplate}” Content=”{TemplateBinding Header}” HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”{TemplateBinding Padding}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”/>
                            <Grid Grid.Row=”1″>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height=”Auto” />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width=”.2*” />
                                    <ColumnDefinition Width=”.6*”/>
                                    <ColumnDefinition Width=”.2*”/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter Grid.Column=”0″ Grid.Row=”0″ Cursor=”{TemplateBinding Cursor}” ContentTemplate=”{TemplateBinding ContentTemplate}” Content=”{TemplateBinding LeftBody}” HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”{TemplateBinding Padding}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”/>
                                <ContentPresenter Grid.Column=”1″ Grid.Row=”0″ Cursor=”{TemplateBinding Cursor}” ContentTemplate=”{TemplateBinding ContentTemplate}” Content=”{TemplateBinding CenterBody}” HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”{TemplateBinding Padding}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”/>
                                <ContentPresenter Grid.Column=”2″ Grid.Row=”0″ Cursor=”{TemplateBinding Cursor}” ContentTemplate=”{TemplateBinding ContentTemplate}” Content=”{TemplateBinding RightBody}” HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”{TemplateBinding Padding}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”/>
                            </Grid>
                            <ContentPresenter Grid.Row=”2″ Cursor=”{TemplateBinding Cursor}” ContentTemplate=”{TemplateBinding ContentTemplate}” Content=”{TemplateBinding Footer}” HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”{TemplateBinding Padding}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
and in the class…

LayoutContentControl.cs

public class LayoutContentControl : ContentControl
    {
        public LayoutContentControl() : base()
        {
            this.DefaultStyleKey = typeof(LayoutContentControl);
        }

        public static readonly DependencyProperty HeaderProperty = DependencyProperty
            .Register(“Header”, typeof(UIElement), typeof(LayoutContentControl), null);

        public static readonly DependencyProperty LeftBodyProperty = DependencyProperty
            .Register(“LeftBody”, typeof(UIElement), typeof(LayoutContentControl), null);

        public static readonly DependencyProperty CenterBodyProperty = DependencyProperty
            .Register(“CenterBody”, typeof(UIElement), typeof(LayoutContentControl), null);

        public static readonly DependencyProperty RightBodyProperty = DependencyProperty
            .Register(“RightBody”, typeof(UIElement), typeof(LayoutContentControl), null);

        public static readonly DependencyProperty FooterProperty = DependencyProperty
            .Register(“Footer”, typeof(UIElement), typeof(LayoutContentControl), null);

        public UIElement Header
        {
            get { return (UIElement)this.GetValue(LayoutContentControl.HeaderProperty); }
            set { this.SetValue(LayoutContentControl.HeaderProperty, value); }
        }
       
        public UIElement LeftBody
        {
            get { return (UIElement)this.GetValue(LayoutContentControl.LeftBodyProperty); }
            set { this.SetValue(LayoutContentControl.LeftBodyProperty, value); }
        }

        public UIElement RightBody
        {
            get { return (UIElement)this.GetValue(LayoutContentControl.RightBodyProperty); }
            set { this.SetValue(LayoutContentControl.RightBodyProperty, value); }
        }

        public UIElement CenterBody
        {
            get { return (UIElement)this.GetValue(LayoutContentControl.CenterBodyProperty); }
            set { this.SetValue(LayoutContentControl.CenterBodyProperty, value); }
        }

        public UIElement Footer
        {
            get { return (UIElement)this.GetValue(LayoutContentControl.FooterProperty); }
            set { this.SetValue(LayoutContentControl.FooterProperty, value); }
        }
    }

Well, we have finished creating our own layout, now lets apply it .xaml

MainPage.xaml

 <controls:LayoutContentControl>
            <controls:LayoutContentControl.Header>
                <TextBlock Text=”Header” TextAlignment=”Center” />
            </controls:LayoutContentControl.Header>
            <controls:LayoutContentControl.LeftBody>
                <TextBlock Text=”Left” TextAlignment=”Center” />
            </controls:LayoutContentControl.LeftBody>
            <controls:LayoutContentControl.CenterBody>
                <TextBlock Text=”Center” TextAlignment=”Center” />
            </controls:LayoutContentControl.CenterBody>
            <controls:LayoutContentControl.RightBody>
                <TextBlock Text=”Right” TextAlignment=”Center” />
            </controls:LayoutContentControl.RightBody>
            <controls:LayoutContentControl.Footer>
                <TextBlock Text=”Footer” TextAlignment=”Center” />
            </controls:LayoutContentControl.Footer>
        </controls:LayoutContentControl>

and here is the output

Now, make it more like a site template by adding and customizing the content as shown in demo.

As always, you can download the source code from here [download link]   

Sharker Khaleed Mahmud
Web Developer

Advertisements

3 Comments »

  1. […] Custom Layout using Content Control in Silverlight « Sharker … […]

    Pingback by 24.08.weblog news:content — August 24, 2010 @ 6:48 PM

  2. […] Custom layout using ContentControl in Silverlight (Sharker Khaleed Mahmud) […]

    Pingback by Windows Client Developer Roundup 039 for 8/30/2010 - Pete Brown's 10rem.net — August 30, 2010 @ 4:44 AM

  3. I notice quite a few sites which look intriguing and really worth a read. There is nothing worse than sifting through limitless blah blah sites just to find a couple that hold ones interest. Many thanks. Great work!

    Comment by click here — February 25, 2011 @ 10:02 AM


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: