Put a “column header” over the ScrollViewer of a W

Question

here is my sample project updated from this thread:

WPF: Refine the look of a grouped ComboBox vs. a grouped DataGrid -sample attached -

http://www.sendspace.com/file/ru8hju (VS2010 .Net 4.0 project)

My question is now HOW can I add a "column header" like stackpanel horizontal with 2 TextBlocks ADD to my existing ComboBox ControlTemplate ABOVE the ScrollViewer when I have a custom ComboBoxItem stuff and there is the ItemPresenter in the default ComboBox ControlTemplate.

Thats my existing grouped uneditable ComboBox. Over the Scrollviewr (above the December...) I want 2 Textblocks.

How can I do that with MY XAML code see at the bottom:

<Window  x:Class="TestComboGrouped.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       
        Title="MainWindow" Height="600" Width="200">
    <Window.Resources>
        <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="Orange" />
        <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

        <Style x:Key="ComboBoxItemStyle" TargetType="ComboBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBoxItem">
                        <Grid HorizontalAlignment="Stretch"
                      Margin="-5,0,0,0"
                      Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="45"/>
                            </Grid.ColumnDefinitions>
                            <Border Name="border1"
                            BorderThickness="0,0,1,1"
                            BorderBrush="#FFCEDFF6"
                            Grid.Column="0">
                                <TextBlock Foreground="Purple"
                                   HorizontalAlignment="Right"
                                   Margin="0,0,5,0"
                                   Text="{Binding WeeklyLessonDate, StringFormat='yyyy-MM-dd'}"/>
                            </Border>
                            <Border Name="border2"
                            BorderThickness="0,0,1,1"
                            BorderBrush="#FFCEDFF6"
                            Grid.Column="1">
                                <TextBlock HorizontalAlignment="Center"
                                   Text="{Binding WeekNumber}"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsHighlighted" Value="true">
                                <Setter TargetName="border1" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
                                <Setter TargetName="border2" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="Red"/>
            <Style.Triggers>
                <Trigger Property="ComboBox.AlternationIndex" Value="0">
                    <Setter Property="Background" Value="White"></Setter>
                </Trigger>
                <Trigger Property="ComboBox.AlternationIndex" Value="1">
                    <Setter Property="Background" >
                        <Setter.Value>
                            <LinearGradientBrush RenderOptions.EdgeMode="Aliased" StartPoint="0.5,0.0" EndPoint="0.5,1.0">
                                <GradientStop Color="#FFFEFEFF" Offset="0"/>
                                <GradientStop Color="#FFE4F0FC" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

        <!-- Grouped CollectionView -->
        <CollectionViewSource Source="{Binding WeeklyDateList,IsAsync=False}" x:Key="WeeklyView">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="MonthName"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>

    </Window.Resources>
    <StackPanel>
        <ComboBox 
            ItemsSource="{Binding Source={StaticResource ResourceKey=WeeklyView}}"      
            ScrollViewer.HorizontalScrollBarVisibility="Auto" 
            ItemContainerStyle="{StaticResource ComboBoxItemStyle}"          
            AlternationCount="2" 
            MaxDropDownHeight="300" 
            Width="Auto" 
            x:Name="comboBox"
            >
            <ComboBox.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock 
                               Padding="5,0,0,0"
                                Background="White" 
                                Foreground="DarkBlue" 
                                FontSize="14" 
                                FontWeight="DemiBold" 
                                Text="{Binding Name}"/>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ComboBox.GroupStyle>
            <!--<ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Border Style="{StaticResource ComboBoxBorderStyle}">
                            <TextBlock Width="100" Foreground="Purple"  Text="{Binding WeeklyLessonDate, StringFormat='yyyy-MM-dd'}"/>
                        </Border>
                        <Border Style="{StaticResource ComboBoxBorderStyle}">
                            <TextBlock Padding="5,0,5,0"  Width="40"   Text="{Binding WeekNumber}"/>
                        </Border>                    
                    </StackPanel>                   
                </DataTemplate>
            </ComboBox.ItemTemplate>-->   
        </ComboBox>
    </StackPanel>
</Window>

UPDATE:

OK very good news, I found my old code again which I thought I lost it somehow :)

Below you see the Style for a ComboBox. I have pasted some own xaml there see my comment inside the ControlTemplate below. There is the Column Header of a former ComboBox.

What I want now is to merge this Column Header with my above project and its custom ComboBoxItem

style.

                            <Border x:Name="DropDownBorder" BorderBrush="DarkBlue" BorderThickness="2" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">

                          // ColumnHeader START

                            <StackPanel >
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock HorizontalAlignment="Stretch" Text="lesson day" />
                                    <TextBlock HorizontalAlignment="Stretch" Text="week" />
                                </StackPanel>

                          // ColumnHeader END

                                <ScrollViewer x:Name="DropDownScrollViewer" Background="Green">
                                <Grid RenderOptions.ClearTypeHint="Enabled">
                                    <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                        <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
                                    </Canvas>
                                    <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Grid>
                            </ScrollViewer>
                            </StackPanel>
                        </Border>

                    </Popup>
                    <ToggleButton BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxReadonlyToggleButton}"/>
                    <ContentPresenter  ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
                <ControlTemplate.Triggers>                           

                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        <Setter Property="Background" Value="#FFF4F4F4"/>
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </Trigger>                     
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsEditable" Value="true">
            <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Padding" Value="3"/>
            <Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}"/>
        </Trigger>
    </Style.Triggers>
</Style> 

combobox with column header =>

http://img573.imageshack.us/img573/4202/columnheader.png

Hello, UPDATE 2:

This is the code with a column header but trashed POPUP + Scrollbars do not work properly... I could not post the code due to 30000 chars limitation lol so grab it here:

http://www.sendspace.com/file/8puii8

Answer 1

Update again
Also fixed it in your example, just changed the Popup from the one I had below. Download if from here.
This screenshot is from this link