Developing Our Item Control (Visual Control)
The first thing we want to develop is our Item Control (Visual Control) and our Data Object. For my test bed, I made these extremely simple. I did use a custom control with 3 VisualState’s. After all, the inability to manipulate a control’s VisualState within a ListBox was the main reason for developing my List. So my simple custom control for our Item type was:
[TemplateVisualState(GroupName = "Status", Name = "Drafting")]
[TemplateVisualState(GroupName = "Status", Name = "Drafted")]
[TemplateVisualState(GroupName = "Status", Name = "Normal")]
public class MyCustomControl : ContentControl
{
public MyCustomControl()
{
DefaultStyleKey = typeof(MyCustomControl);
}
}
I also created a default template and put into the resource dictionary. I not going to show the theme, but remember it has three visual states.
Our Data Object
public class CustomData : INotifyPropertyChanged
{
private string _valueString;
public event PropertyChangedEventHandler PropertyChanged;
public CustomData(string controlText)
{
ValueString = controlText;
}
public string ValueString
{
get { return _valueString; }
set
{
if (_valueString != value)
{
_valueString = value;
OnPropertyChanged(“ValueString”);
}
}
}
private void OnPropertyChanged(string propertyName)
{
if (null != PropertyChanged)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
Defining our List
The next thing we have to do is define our List. Because of my use of generics, I have to define my list type in code before it can be used in XAML. It’s also important to remember, that besides defining the type which will usually be extremely straightforward, you will need to also define a default control template. Also, the control template for our list has to include a Panel with name “Container” which is defined as a template part of our base class (VisualListBase).
List Definition:
public class MyCustomControlList : BindableList<MyCustomControl, CustomData>
{
private int _selectedIndex;
public MyCustomControlList()
{
DefaultStyleKey = typeof(MyCustomControlList);
_selectedIndex = 0;
}
public void Next()
{
if (_selectedIndex < Count)
{
_selectedIndex++;
VisualStateManager.GoToState(
this[_selectedIndex - 1], “Drafting”, false);
if (_selectedIndex > 1)
VisualStateManager.GoToState(
this[_selectedIndex - 2], “Drafted”, false);
}
}
}
You obviously won’t usually need the ‘Next’ method, but this demonstrates my lone goal for developing my list. I have access to the individual Controls within the list, not just the data objects. Next, I’ll show you the default template I added for the MyCustomControlList type.
<Style TargetType=”l:MyCustomControlList”>
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate>
<StackPanel x:Name=”Container” Orientation=”Vertical”
Background=”{TemplateBinding Background}”
Height=”{TemplateBinding Height}”
Width=”{TemplateBinding Width}”
Margin=”{TemplateBinding Margin}”
/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So the magic is done and we are free to add our list into XAML with the following definition:
<l:MyCustomControlList x:Name=”MyControlList”
ItemsSource=”{Binding Items, Source={StaticResource State}}” />
