Creating Custom Silverlight Control

Question

We're trying to make a custom control that contains a wrapped section of text boxes for each item in the list bound to it.

Like this:

<ItemsControl x:Name="asdf">
 <ItemsControl.ItemsPanel>
  <ItemsPanelTemplate>
   <controls:WrapPanel />
  </ItemsPanelTemplate>
 </ItemsControl.ItemsPanel>
 <ItemsControl.ItemTemplate>
  <DataTemplate>
   <TextBox Text="{Binding}" />
  </DataTemplate>
 </ItemsControl.ItemTemplate>
</ItemsControl>

However, when we turn this into a custom control, it doesn't set the ItemsPanel to a WrapPanel, nor does it do the ItemTemplate either:

<ItemsControl x:Class="SilverlightApplication1.PillTagBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls= "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit">

 <ItemsControl.ItemsPanel>
  <ItemsPanelTemplate>
   <controls:WrapPanel />
  </ItemsPanelTemplate>
 </ItemsControl.ItemsPanel>
 <ItemsControl.ItemTemplate>
  <DataTemplate>
   <TextBox Text="{Binding}" />
  </DataTemplate>
 </ItemsControl.ItemTemplate>

</ItemsControl>

It just shows the bound list of items like there was no styling at all:

<ItemsControl x:Name="asdf" />

How do we make the first chunk of XAML into a custom control?

Thanks!

XAMeLi · Accepted Answer · 2011-08-10 21:07:43Z

2

For what you want to do, you don't need a custom control, a style is enough:

<Style x:Key="MyControlStyle" TargetType="ItemsControl">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <controls:WrapPanel/>
            </ItemsPanelTemplate>
        </Setter.Value>  
    </Setter>
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBox Text="{Binding}" />
            </DataTemplate>
        </Setter.Value>  
    </Setter>
</Style>

And then at the instance:

<ItemsControl x:Name="asdf" Style="{StaticResource MyControlStyle}" />

If you do need a custom control for other reasons:

Create a new project with the Silverlight Control Library template (all definitions are in this project).
If there is no Themes folder, add it to the root of the project and create a new ResourceDictionary file named Generic.xaml in the Themes folder.
Create a new class, inherit from ItemsControl (lets call it MyItemsControl).
Add a constructor like this:

public MyItemsControl() { this.DefaultStyleKey = typeof(MyItemsControl); }
Add the style above to the Generic.xaml file, remove the x:Key attribute and change the TargetType to MyItemsControl (you'll need to add a xmlns definition for the local namespace).
Now go back to your client project, make a reference to the Control Library project.
Add xmlns definition in the appropriate Page\UserControl xaml file and use the MyItemsControl as any other ItemsControl.

edited Aug 10, 2011 at 21:07

answered Aug 10, 2011 at 20:41

XAMeLi

6,3042 gold badges24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Erik W Over a year ago

Well, this was a simplistic example for demonstration reasons. I want to override OnItemsSourceChanged and have various click events self contained in one class I can use throughout my project.

XAMeLi Over a year ago

I thought that was the case. Follow the listed steps and, if you need special items, don't forget to override IsItemItsOwnContainerOverride and GetContainerForItemOverride methods - gets me every time

Collectives™ on Stack Overflow

Creating Custom Silverlight Control

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related