WPF：改进分组 ComboBox 与分组 DataGrid 的外观 - 附示例 -

Question

只要看我制作的这个屏幕截图，您就可以看到差异：

我在 ComboBox 的 PopUp 中更改了这些要求，因此它看起来像分组的 WPF DataGrid，它仅与 Popup 区域有关，不判断可编辑区域ComboBox 或没有标题...重要的是这些事情，因为我无法更改它们：

ComboBox:

1. (绿线) 交替 项目的背景必须从 开始

2. （红线）内的 TextBlocks 边框必须居中对齐或 Right1.

3. （蓝色）微弱可见的水平线 边界必须始终延伸到 右侧或占据所有空间2。

   到 1.) 我不知道为什么有边距 2.) TextBlock 的 Horizo​​ntalAlignment 不起作用 到 3.) 我可以将组合框的 ItemTemplate 中的堆栈面板设置为读取背景，然后您可以很好地看到红色在右侧和左侧有一个边距。不知道如何删除它。

任何人都可以帮忙吗？

如果您想实时查看文本框，只需在此处下载：

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

这是一个 30 kb 的 VS2010 .NET 4.0 项目。

这是 ComboBox 的 XAML：

<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.

更新：

@Meleak 这是更新后的图像看起来非常好，谢谢你：

我正要将我的旧 2-“ColumnHeader” 放在 ComboBox 的弹出顶部区域中，但我可以不再找到我的示例...似乎由于更改/尝试了很多，我已经覆盖了该代码：/我知道我在滚动查看器上方的控制模板中使用堆栈面板或具有 2 个行定义的网格进行了操作。但是您的代码现在看起来与我的默认组合框控件模板完全不同，我不知道如何合并两个代码片段。

我认为这是我放置 2 个“列标题”的代码，只需在 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}}">

// 这里应该是列标题，但如何将代码与 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>

Answer 1

我认为它看起来很接近。您可以从此处下载我的修改版本

添加了 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>