代码之家 › 专栏 › 技术社区 › Elisabeth

WPF:优化分组组合框的外观,而不是分组数据网格-附加示例-

grouping combobox wpf

Elisabeth · 技术社区 · 15 年前

只要看我拍的截图,你就会发现不同:

组合框:

(绿线)交替项目的背景必须开始于开始
边框必须居中对齐或
(蓝色)弱可见水平面边界必须一直延伸到右侧或占用所有空间2。

我不知道为什么会有差额到2.)文本块的水平对齐不起作用我可以将组合框的ItemTemplate中的stackpanel设置为read background,这样您就可以很好地看到红色在左右两边都有一个边距。不知道该如何移除。

如果你想在现场看到这个文本框,请在这里下载:

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

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

alt text

下面是组合框的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.

更新

@梅勒克,这是最新的图片,谢谢你,它看起来非常漂亮: alt text

我正要把我原来的2-“ColumnHeader”放在组合框弹出的顶部区域,但我再也找不到我的示例。。。似乎由于做了很多修改/尝试,我已经重写了这段代码:/我知道我是在带有stackpanel的scrollviewer上面的controltemplate中完成的,或者是在带有2行定义的网格中完成的。但您的代码现在看起来与我的默认组合框控件模板完全不同了我不知道如何合并这两个代码段。

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

1 回复 | 直到 15 年前

Fredrik Hedblad 15 年前

我觉得很接近。你可以从下载我的修改版本 here

alt text

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