views:

271

answers:

0

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.

related questions