control template in silverlight

Question

hi guys,

as an ASP.Net developer, I am familiar with Master Pages as template for web pages. Is there any mechanism in silverlight which is equivalent with Master Pages in ASP.Net?

Because I don't want to repeat myself creating similar control like:

ControlA

<UserControl>
  <Grid>
    <Button Click="ClickMe" />
    <Button Click="CancelMe" />
    <TextBlock />
    <StackPanel>
      <!-- content start here -->
      <Rectangle />
      <!-- content end here -->
    </StackPanel>
  <Grid>
</UserControl>

ControlB

<UserControl>
  <Grid>
    <Button Click="ClickMe" />
    <Button Click="CancelMe" />
    <TextBlock />
    <StackPanel>
      <!-- content start here -->
      <Canvas />
      <!-- content end here -->
    </StackPanel>
  <Grid>
</UserControl>

Answer 1

There is no equivalent, because the concept doesn't apply to Silverlight--just as it doesn't apply to a desktop application.

The visual appearance of a Silverlight application is achieved through a hierarchy of controls. The layout can be modified at any time, and the updates are reflected in the next rendering pass (which is in fact an improvement over Windows Forms).

To properly implement your example, you'd simply create one UserControl with all content common to ControlA and ControlB, and modify the content of its StackPanel as necessary--possibly in its constructor, or perhaps in response to events raised by other controls. It's entirely up to you when and how often you do this.

Once you get the hang of it, you'll find creating dynamic and usable interfaces much easier with Silverlight than with any combination of traditional web technologies.

Answer 2

You can use ItemsControl for this specific kind of templating. An ItemsControl is a type of Control that can contain multiple items, such as strings, objects, or other elements. Transform your XAML as illustrated below. Remember to derive your class from ItemsControl instead of UserControl in your code-behind.

<ItemsControl>
  <ItemsControl.Template>
    <ControlTemplate TargetType="ItemsControl">
      <Grid>
        <Button Click="ClickMe"/>
        <Button Click="CancelMe"/>
        <TextBlock/>
        <ItemsPresenter/>
      </StackPanel>
    </ControlTemplate>
  </ItemsControl.Template>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel/>
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
</ItemsControl>

Assume that your new class is named MasterPageControl. You can use the control like this:

<local:MasterPageControl>
  ...
  <Rectangle/>
  <Canvas/>
  ...
</local:MasterPageControl>