Custom header with ExpanderView from Toolkit for Windows Phone

Question

I am using ExpanderView from Toolkit for Windows Phone. What I add is line below each Header. What I can't do is stretch line for Headers which are Expandable.

<toolkit:ExpanderView x:Name="ev" HorizontalAlignment="Stretch" Margin="0,0,0,8" 
                                        Header="{Binding}"
                                        NonExpandableHeader="{Binding}"
                                        Expander="{Binding}"
                                        ItemsSource="{Binding}"
                                        IsNonExpandable="{Binding HasSingleMessage}">

<toolkit:ExpanderView.HeaderTemplate>
    <DataTemplate>
        <StackPanel>
            <TextBlock Text="{Binding LastMessageReceived.Header}"
            HorizontalAlignment="Stretch"  
            Foreground="Black"
            FontSize="{StaticResource PhoneFontSizeLarge}" 
            FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
            <Rectangle Height="1" StrokeThickness="0" Fill="Black" Margin="0,8" />
        </StackPanel>
    </DataTemplate>
</toolkit:ExpanderView.HeaderTemplate>

Sample screen with red mark

you mean, do you have to stretch the line which is under the red circle as it is under Deviation 01 Test? — Kulasangar
I won't add it as an answer because I don't know if it will work, but try to add HorizontalContentAlignment="Stretch" in the ExpanderView declaration. Then please let me know if it worked. — meneses.pt
That line which is under Test av Kategorier and Avvik Lager. Now it's as large as header, but I would like to stretch it to screen width like in Deviation 01 Test. — boski
Adding HorizontalContentAlignment="Stretch" didn't work. Test av Kategorier and Avvik Lager are still stretch to header width. — boski

McGarnagle McGarnagle · Accepted Answer · 2014-10-14T17:11:15

It's a bit tricky to get to the bottom of this. The bottom line is, I think the only way get what you want (stretch the line) is to include a modified version of the control template in your XAML resources, and make the header stretch to fill its container.

If you check source code at the link, and scroll down to the ExpanderView control template, you will see that the header element is defined like this:

<ListBoxItem x:Name="ExpandableContent" controls:TiltEffect.IsTiltEnabled="True"
                                     Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="41"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ContentControl x:Name="Header"
                        HorizontalContentAlignment="Stretch"
                        HorizontalAlignment="Stretch"
                        Content="{TemplateBinding Header}"
                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                        Grid.Row="0" Grid.Column="0"
                        Grid.ColumnSpan="2"/>
        <ContentControl x:Name="Expander"                                            
                        Margin="11,0,0,0"
                        Grid.Row="1" Grid.Column="1"
                        HorizontalContentAlignment="Stretch"
                        HorizontalAlignment="Stretch"
                        Content="{TemplateBinding Expander}"
                        ContentTemplate="{TemplateBinding ExpanderTemplate}"/>
        <Grid x:Name="ExpanderPanel" Grid.Row="0" Grid.Column="0" 
              Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Transparent"/>
    </Grid>
</ListBoxItem>

Now, at first glance this looks fine, because the "Header" ContentControl has both HorizontalAlignment and HorizontalContentAlignment set to "Stretch". Unfortunately, the parent ListBoxItem does not define its HorizontalContentAlignment, whose default may not be "Stretch". (I'm uncertain on this point because the MSDN documentation does not list the default -- but the default for the corresponding property is "Left" in WPF and "Center" in Silverlight.)

So I would try copying the default control template into your application resources, and add the appropriate alignments to the "ExpandableContent" ListBoxItem:

<ListBoxItem x:Name="ExpandableContent" 
             HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ...

Custom header with ExpanderView from Toolkit for Windows Phone

1 Answers