WPF: уточнение внешнего вида сгруппированного ComboBox по сравнению с сгруппированным DataGrid - образец прилагается -

просто посмотрите этот скриншот, который я сделал, чтобы увидеть разницу:

У меня есть эти требования, которые нужно изменить в всплывающем окне ComboBox, чтобы он выглядел как сгруппированный WPF DataGrid, это касается только всплывающей области, не судить о редактируемой области ComboBox или о том, что нет заголовка ... эти вещи, потому что я не мог их изменить:

Поле со списком:

  1. (Зеленая линия) Чередующийся фон предмета должен начинаться с начала.

  2. (Красная линия) Текстовые блоки внутри рамки должны быть выровнены по центру ИЛИ по правому краю1.

  3. (Синий) Слабо видимая горизонтальная граница всегда должна тянуться вправо или занимать все пространство2.

    до 1.) Я понятия не имею, почему есть запас до 2.) HorizontalAlignment TextBlock не работает до 3.) Я могу сделать панель стека в ItemTemplate Combobox фоном для чтения, тогда вы можете очень хорошо видеть красный у цвета есть поля как-то справа и слева. Не знаю, как это удалить.

Кто-нибудь может помочь, пожалуйста?

Если вы хотите увидеть текстовое поле вживую, просто скачайте его здесь:

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

Это проект VS2010 .NET 4.0 размером 30 КБ.

alt text

Вот XAML для 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.

ОБНОВЛЕНИЕ:

@Meleak это обновленное изображение, оно выглядит очень красиво благодаря вам: alt text

Я как раз собирался поместить свой старый 2- "ColumnHeader" в верхнюю область всплывающего окна ComboBox, но я больше не мог найти свой образец ... похоже, из-за того, что я много пытался / изменил этот код: / Я знаю, что сделал это в шаблоне управления над средством просмотра прокрутки с помощью панели стека или сетки с двумя определениями строк. Но ваш код теперь выглядит совершенно иначе, чем мой контрольный шаблон combobox по умолчанию. Я понятия не имею, как объединить оба фрагмента кода.

Я думаю, что это был код, в который я поместил 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>

combobox wpf grouping
person Elisabeth    schedule 06.11.2010    source источник
comment
Вы попробовали мой ответ? Я думаю, это выглядит довольно близко к твоему левому фото.   -  person Fredrik Hedblad    schedule 07.11.2010
comment
ах да, конечно, у вас уже есть решение. Смотрится очень красиво. Стоит ли делать новую ветку для заголовков столбцов Meleak?   -  person Elisabeth    schedule 07.11.2010
comment
Можете ли вы загрузить новый образец проекта, чтобы я мог его посмотреть?   -  person Fredrik Hedblad    schedule 07.11.2010
comment
Может быть, лучше создать для этого новый вопрос, этот становится довольно большим :)   -  person Fredrik Hedblad    schedule 07.11.2010
comment
ОК пометил ваш ответ как решение! Теперь задаю новый вопрос по заголовку столбца, но на самом деле Meleak, мой образец проекта - это тот, который у вас уже есть ... То, что я сделал раньше, было скопировать шаблон элемента управления combobox по умолчанию из msdn и изменить его, поместив панель стека вокруг средства просмотра прокрутки и сетки внутри вверху с двумя текстовыми блоками. Больше я не могу дать, потому что у меня больше нет, но я снова буду искать свой старый код, возможно, его где-то прокомментировали, и я его пропустил ...   -  person Elisabeth    schedule 07.11.2010
comment
его там = ›stackoverflow.com/questions/4117342/   -  person Elisabeth    schedule 07.11.2010
comment
@Meleak Я тоже нашел свой старый Код!   -  person Elisabeth    schedule 07.11.2010

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, это выглядит довольно близко. Вы можете загрузить мою измененную версию с здесь

alt text

Добавлен шаблон для 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>
person Fredrik Hedblad    schedule 07.11.2010
comment
ок, Meleak, на этот раз мне кажется, что я предпочитаю ваше решение, а не решение Влада ;-) См. мой обновленный вопрос выше. - person Elisabeth; 07.11.2010