Class Dependencies WPF Control - wpf

Question

WPF is really amazing for many reasons and one of them is that it allows us to change the controls inside a control. As example if we take a ListBox. We can change the panel from StackPanel to WrapPanel and it will still work (I guess its obviously that ListBox and WrapPanel don't share any class dependencies hence why it works).
Here is an example what I mean with class dependencies.
public class Test1
{
public Test2 t;
public Test1(Test2 t)
{
this.t = t;
}
}
public class Test2
{
public string someStr;
}
Now the instance could be injected/inserting like this:
Test2 test2 = new Test2();
test2.someStr = "Hello";
Test1 test1 = new Test1();
test1.t = test2;
Or instance could be inserted like this:
Test2 test2 = new Test2();
test2.someStr = "Hello";
Test1 test1 = new Test1(test2);
There are few other ways to do this but I hope that you guys now get the point.
So now after we know how to inject the instance lets try to do so in WPF with this following example:
I have a CustomControl. My CustomControl is a little bit complex because it has rows and columns. Futhermore the CustomControl is not derivering from a DataGrid. In fact it is derivering from an ItemsControl.
As I mentioned it has columns and rows or to be more precise the rows need to know about the columns. Thats where I would like to insert the instance of columns in a row. How do i do that in WPF?
Here is a simple plain example of my problem:
Lets say the VisualTree of the CustomControl looks like this:
CustomControl
+ Grid
+ Border
+ ContentPresenter
+ Headers
+ DockPanel
+ Border
+ ContentPresenter
+ Rows
As you can see the Rows are far away from Headers and I would like to get/insert the instance of Headers to the Rows without finding the Headers.
Rows and Headers classes look like this:
class Row : ContentControl
{
List<Column> Headers;
...
}
class Headers : ContentControl
{
List<Column> Cols = new List<Column>()
public Headers()
{
this.Cols.Add(...);
this.Cols.Add(...);
}
...
}
And the problem is how to do something like this:
this.rows.Headers = columns.Cols;
I have searched on the internet and many people have suggested me to let the row use VisualTreeHelper and then to travel up the tree to find the Cols. In fact I tried to do so and after monitoring my CustomControl with a Performance Profiler Tool, I figured that it's exactly the step where every row stumbles up the tree to find header that takes the most of the time. Therefore lets not use VisualTreeHelper and lets use injection like I described in example with Test1 and Test2 above.
Any suggestions? Is there maybe a pattern for this?
EDITED: #Benjamin. To use RedSlider = GetTemplateChild("RedSlider") inside the OnApplyTemplate is a great solution but it doesnt work for me because my case is more complex. In my case i really need to insert the instance somehow. Here is an example of my case where I cannot use GetTemplateChild inside the OnAppyTemplate method.
This is Control for Sliders.
class CustomSliders : ContentControl
{
}
The style for CustomSlider looks like this:
<Style x:Key="mySliders" TargetType="{x:Type local:CustomSliders}">
<Style.Setter Property="Template">
<ControlTemplate TargetType="{x:Type local:CustomSliders}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Slider x:Name="PART_RedSLider" />
<Slider x:Name="PART_GreenSlider" Grid.Row="1"/>
<Slider x:Name="PART_BlueSlider" Grid.Row="2"/>
<Slider x:Name="PART_AlphaSlider" Grid.Row="3"/>
</Grid>
</ContentTemplate>
</Style>
And this is the ControlTemplate of my CustomControl called ColorPicker.
<ContentTemplate TargetType="Picker">
<DockPanel>
<ContentControl DockPanel.Dock="Left" Style="{StaticResource mySliders}"/>
<Rectangle x:Name="PART_ColorPresenter"
DockPanel.Dock="Right"
Margin="5"/>
</Grid>
</ControlTemplate>
In this example the GetTemplatedChild method which will be executed inside OnApplyTemplate of ColorPicker wont work because it cannot find the PART_RedSLider which is inside CustomSliders.
GetTemplateChild cannot find everything down the VisualTree.
Because GetTemplatedChild wont work to solve this complex template structure many people suggest me to travel recrusivly up or down the tree by using the VisualTreeHelper.Find(). Though like I explained in the question I dont want to use the recrusive way. I want to insert the instance..

Answer 1

As I have already stated, Kent Boogaarts answer is technically correct but I think you probably require more information to aid your understanding.
Imagine the control you are writing is a colour picker. The control has 4 Sliders for changing the red, green, blue and alpha values and the end result is displayed beside the sliders in a Rectangle. A mock-up is shown below:
This control has 5 dependencies in order for it to work correctly; 4 Sliders and 1 FrameworkElement for displaying the end result.
What this means is that in my ControlTemplate I am expecting to see 4 sliders and 1 FrameworkElement that are named. The slider that controls the red value, for example, could be called "PART_RedSlider" (the name can be anything you want but the recommended approach is to prefix the name with "PART_").
An example template may look something like this:
<!-- Typically this would be defined in a style -->
<ControlTemplate TargetType="ColorPicker">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Slider x:Name="PART_RedSLider" />
<Slider x:Name="PART_GreenSlider" Grid.Row="1"/>
<Slider x:Name="PART_BlueSlider" Grid.Row="2"/>
<Slider x:Name="PART_AlphaSlider" Grid.Row="3"/>
<Rectangle x:Name="PART_ColorPresenter"
Grid.Column="1"
Grid.RowSpan="4"
Margin="5"/>
</Grid>
</ControlTemplate>
Now in your controls code you would override the OnApplyTemplate() method, like so:
public override void OnApplyTemplate()
{
RedSlider = GetTemplateChild("PART_RedSlider") as Slider;
GreenSlider = GetTemplateChild("PART_GreenSlider") as Slider;
BlueSlider = GetTemplateChild("PART_BlueSlider") as Slider;
AplhaSlider = GetTemplateChild("PART_AlphaSlider") as Slider;
ColorPresenter = GetTemplateChild("PART_ColorPresenter") as FrameworkElement;
}
You now have access to the named parts of your ControlTemplate. You can then do whatever you want to these controls in your code (set default property values, hookup event handlers, etc).
Now you may be wondering where the TemplatePartAttribute comes into all this. The thing is, this attribute is purely for documentation purposes so that tools (such as Expression Blend) can assist other people creating a custom template.
The attribute is applied to the class you are writing like so:
[TemplatePart(Name="PART_RedSlider", Type=typeof(Slider)]
[TemplatePart(Name="PART_GreenSlider", Type=typeof(Slider)]
[TemplatePart(Name="PART_BlueSlider", Type=typeof(Slider)]
[TemplatePart(Name="PART_AlphaSlider", Type=typeof(Slider)]
[TemplatePart(Name="PART_ColorPresenter", Type=typeof(FrameworkElement)]
public class ColorPicker
A piece of advice is to never assume that the template will include a named part. Your control should still function (to the best of it's ability) without the named part being present. The guidance from Microsoft is that you should not throw exceptions if a named part is missing (I.E. your application can still run even though your control will not work as expected).
E.G.
public override void OnApplyTemplate()
{
RedSlider = GetTemplateChild("RedSlider") as Slider;
if (RedSlider != null)
{
// Only do anything if the named part is present.
}
}
You should also try to use the lowest base class possible for named parts. E.G. in my example, the named parts for the Sliders could be of type RangeBase rather than Slider so that of types of range controls can be used.
Finally, your class should have variables that hold references to your named parts which are retrieved during the call to OnApplyTemplate. Do not try and find the controls each time you want to use them.
So now you need to apply this to your control which is dependant on the Row and Header controls so these need to be present in your ControlTemplate (I will assume a single Row and Header for simplicity).
First of all document your CustomControl with the TemplatePartAttribute like so:
[TemplatePart(Name="PART_Header", Type=typeof(Header)]
[TemplatePart(Name="PART_Row", Type=typeof(Row)]
public class CustomControl : Control
{
// etc...
Now make sure you have these controls as named parts in your ControlTemplate like so:
<ControlTemplate TargetType="CustomControl">
<Grid>
<!-- other elements omitted -->
<Header x:Name="PART_Header" />
<Row x:Name="PART_Row" />
</Grid>
</ControlTemplate>
And then you use the OnApplyTemplate() method like this:
public override void OnApplyTemplate()
{
myHeader = GetTemplateChild("PART_Header") as Header;
myRow = GetTemplateChild("PART_Row") as Row;
if ((myHeader != null) && (myRow != null))
{
myRow.Headers = myHeader.Cols;
}
}

Answer 2

If your custom control has specific requirements regarding its visual tree, you can declare these using TemplatePartAttributes and use resolve them during OnApplyTemplate.