En el meu cas, em vaig trobar amb la necessitat de crear un Custom Control per a Silverlight, el qual havia de ser un contenidor d’altres controls, com poden ser els TextBox. Per crear un control propi de Silverlight tenim un fitxer xaml a on especificar l’estil que emprarà el control i un altre fitxer amb el codi intern específic d’aquest.
En el fitxer xaml a on es defineix l’estil, se li crea un template amb un control de tipus StackPanel a dins, i en aquest panel se li posa un nom concret per poder-lo identificar.
|
1 2 3 4 5 6 7 8 9 10 |
<span style="color: blue;"><</span><span style="color: #a31515;">Style </span><span style="color: red;">TargetType</span><span style="color: blue;">="controls:StatusControl"> <</span><span style="color: #a31515;">Setter </span><span style="color: red;">Property</span><span style="color: blue;">="Template" > <</span><span style="color: #a31515;">Setter.Value</span><span style="color: blue;">> <</span><span style="color: #a31515;">ControlTemplate </span><span style="color: red;">TargetType</span><span style="color: blue;">="controls:StatusControl"> <</span><span style="color: #a31515;">StackPanel </span><span style="color: red;">x</span><span style="color: blue;">:</span><span style="color: red;">Name</span><span style="color: blue;">="ThePanel" </span><span style="color: red;">Orientation</span><span style="color: blue;">="Horizontal"/> </</span><span style="color: #a31515;">ControlTemplate</span><span style="color: blue;">> </</span><span style="color: #a31515;">Setter.Value</span><span style="color: blue;">> </</span><span style="color: #a31515;">Setter</span><span style="color: blue;">> </</span><span style="color: #a31515;">Style</span><span style="color: blue;">> </span> |
Per altra banda, en el fitxer de codi definim en una nova classe el nostre control Silverlight. En ella, definim en una constant el nom que té l’StackPanel dins del ControlTemplate que s’ha definit anteriorment. Llavors, quan sobreescrivim la funció OnApplyTemplate, cridarem a la funció GetTemplateChild(…) per obtenir una referència del nostre StackPanel, especificant el nom d’aquest, a partir de la constant declarada abans.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[<span style="color: #2b91af;">TemplatePart</span>(Name = <span style="color: #2b91af;">StatusControl</span>.PanelElement, Type = <span style="color: blue;">typeof</span>(<span style="color: #2b91af;">Panel</span>))] <span style="color: blue;">public class </span><span style="color: #2b91af;">StatusControl </span>: <span style="color: #2b91af;">Control </span>{ <span style="color: blue;">private const string </span>PanelElement = <span style="color: #a31515;">"ThePanel"</span>; <span style="color: blue;">protected </span><span style="color: #2b91af;">Panel </span>thePanel; <span style="color: blue;">public </span>StatusControl() { DefaultStyleKey = <span style="color: blue;">typeof</span>(<span style="color: #2b91af;">StatusControl</span>); } <span style="color: blue;">public override void </span>OnApplyTemplate() { <span style="color: blue;">base</span>.OnApplyTemplate(); <span style="color: green;">// Obtenim el panel que hi ha en el template </span>thePanel = GetTemplateChild(PanelElement) <span style="color: blue;">as </span><span style="color: #2b91af;">Panel</span>; } } |
Ara ens trobem que ja podem treballar des del codi amb la referència al nostre panel. Per això, en el cas de que es desitgés afegir un control dins del nostre control-contenidor, l’únic que caldria fer seria el següent:
|
1 2 3 4 5 6 |
<span style="color: blue;">public void </span>AfegirControl() { <span style="color: #2b91af;"><span style="color: #444444;"> </span>TextBlock </span>t = <span style="color: blue;">new </span><span style="color: #2b91af;">TextBlock</span>(); t.Text = <span style="color: #a31515;">"Etiqueta 1"</span>; thePanel.Children.Add(t); } |
Creem un nou control del tipus que sigui, en aquest cas un TextBlock. Li especifiquem degudament les seves propietats, com pot ser el text a mostrar i l’afegim com a “child” dins del nostre panel.
