WPF: Refine the look of a grouped ComboBox vs. a grouped DataGrid -sample attached -_问答_开发者

just watch this screenshot I made so you see the difference:

I have these requirments to be changed in the ComboBox`s PopUp so it looks like the grouped WPF DataGrid, its only about the Popup-area, do not judge the editable area of the ComboBox or that there is no Header... Important are these things, because I could not change them:

ComboBox:

(Green Line) The alternating Background of the Item must start at the beginning
(Red Line) The TextBlocks within the Border must be aligned Center OR Right1.
(Blue) The weakly visible horizontal Border must always stretch to the right side or take all space2.

to 1.) I have no idea why there is a margin to 2.) HorizontalAlignment of the TextBlock does not work to 3.) I can make the stackpanel in the ItemTemplate of the Combobox a read background then you can see very well the red color has a margin somehow on the right and left side. Have no idea how to remove that.

Anyone can help, please?

If you want to see the textbox live just download it here:

http://www.sendspace.com/file/6lmbrh

Its a 30 kb VS2010 .NET 4.0 project.

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

Here is the XAML for the ComboBox:

<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>
        开发者_开发技巧<Style x:Key="ComboBoxItemStyle" TargetType="ComboBoxItem">
            <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>

        <Style x:Key="ComboBoxBorderStyle" TargetType="Border">
            <Setter Property="UseLayoutRounding" Value="True" />
            <Setter Property="BorderBrush" Value="#FFCEDFF6" />
            <Setter Property="BorderThickness" Value="1 0 0 1" />           
        </Style>

        <Style x:Key="ComboBoxStyle" BasedOn="{StaticResource {x:Type ComboBox}}" TargetType="{x:Type ComboBox}">
            <Setter Property="ItemContainerStyle" Value="{StaticResource ComboBoxItemStyle}"/>
        </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" 
            Style="{StaticResource ComboBoxStyle}"
            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>1.2.

UPDATE:

@Meleak thats the updated image it looks very nice thanks to you:

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

I was just about to put my old 2-"ColumnHeader" in that ComboBox`s Popup top area but I could not find anymore my sample... seems due to changing/trying a lot I have overritten that code :/ I know I did it in the controltemplate above the scrollviewer with a stackpanel or a grid with 2 rowdefinitions. But your code looks now totally different to my default combobox controltemplate I have no idea how to merge both code snippets.

I think that was the code where I put the 2 "column headers", just search for inside the POPUP

<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="Padding" Value="4,3"/>
            <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid x:Name="MainGrid" SnapsToDevicePixels="true">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
                            </Grid.ColumnDefinitions>
                            <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                                <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
                                    <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">

// Here should be the column headers, but how merge your code with the ItemsPresenter?

                                        <ScrollViewer x:Name="DropDownScrollViewer">
                                            <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>
                                    </Border>
                                </Microsoft_Windows_Themes:SystemDropShadowChrome>
                            </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="HasDropShadow" SourceName="PART_Popup" Value="true">
                                <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
                                <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
                            </Trigger>
                            <Trigger Property="HasItems" Value="false">
                                <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
                            </Trigger>
                            <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>
                            <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
                                <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
                                <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
                            </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>

I think it looks pretty close. You can download my modified version from here

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

Added a template for ComboBoxItem

<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />
<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,2,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>