I'm using the Expander control from the Silverlight toolkit, and I would like the header to have a specific background colour across the whole width. What I'm really aiming for is to mimic our old ASP.NET-based CollapsiblePanelExtender, from the AJAX control toolkit.
It should be mentioned that I want the expand/collapse icon to appear at the right-hand side, so I'm using the supplied style for that.
Now I'm using a DockPanel with a TextBlock inside, but I can't get the TextBlock to span the whole DockPanel width.
I'd really like to show screenshots of what I've got, but as a new user it seems I'm not allowed to....
Generally, the code below gives a background colour only as far as the text within the TextBlock goes, not all the way to the icon.
<controlsToolkit:Expander x:Name="exp2" Header="Section #2"
Grid.Row="1" Margin="0,5,0,0" Style="{StaticResource ExpanderBottomRightButtonStyle}">
<controlsToolkit:Expander.HeaderTemplate>
<DataTemplate>
<controlsToolkit:DockPanel x:Name="HeaderPanel" LastChildFill="True" Background="#7A8EAF" Cursor="Hand" Height="24">
<TextBlock Text="{Binding}" Margin="5,0,0,0" Foreground="White" FontWeight="Bold"
controlsToolkit:DockPanel.Dock="Top" VerticalAlignment="Center"
MinWidth="{Binding ActualWidth, ElementName=HeaderPanel}"
/>
</controlsToolkit:DockPanel>
</DataTemplate>
</controlsToolkit:Expander.HeaderTemplate>
<controlsToolkit:Expander.ContentTemplate>
<DataTemplate>
<TextBlock Text="Content in section #2" />
</DataTemplate>
</controlsToolkit:Expander.ContentTemplate>
</controlsToolkit:Expander>
If I specify a hard-coded Width for the DockPanel, then of course I get closer to the wanted effect, but whenever the page is wider than the specified width, the expander icon still appears to the far right of the screen.
I could of course specify the same width for the expander control itself, but I'd really like it to fill the whole width of the screen, if possible.