WPF: Affiner l'apparence d'une zone de liste déroulante regroupés par rapport à une -sample DataGrid groupée attaché -

Question

juste regarder cette capture d'écran je fait pour que vous voyez la différence:

Je ces requirments à modifier dans le ComboBox`s PopUp donc il ressemble à WPG DataGrid groupé, c'est seulement sur la zone Popup, ne juge pas la zone modifiable de la ComboBox ou qu'il n'y a pas d'en-tête ... Important ces choses, parce que je ne pouvais pas les changer:

ComboBox:

1. (ligne verte) L'alternance Arrière-plan de l'article doit commencer à le début

2. (ligne rouge) Les TextBlocks dans la frontière doivent être alignés au centre ou Right1.

3. (Bleu) La bordure horizontale faiblement visible doit toujours s'étendre jusqu'au côté droit ou prendre tout l'espace2.

   à 1.) Je ne sais pas pourquoi il y a une marge à 2.) HorizontalAlignment du TextBlock ne fonctionne pas à 3.) Je peux faire StackPanel dans le ItemTemplate du Combobox un arrière-plan de lecture vous On peut voir très bien que la couleur rouge a une marge en quelque sorte sur le côté droit et gauche. Je n'ai aucune idée de comment l'enlever.

Toute personne peut vous aider, s'il vous plaît?

Si vous voulez voir la zone de texte en direct simplement le télécharger ici:

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

Son 30 kb VS2010 .NET 4.0 projet.

Voici le XAML pour la 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. 

MISE À JOUR:

@Meleak thats la image mise à jour, il semble très agréable grâce à vous:

J'étais sur le point de mettre mon vieux 2 "Co lumnHeader "dans la zone supérieure Popup de cette ComboBox mais je ne pouvais plus trouver mon échantillon ... semble due à changer/essayer beaucoup J'ai outrepassé ce code:/Je sais que je l'ai fait dans le controltemplate au-dessus du scrollviewer avec un panneau de pile ou une grille avec 2 définitions de rangée. Mais votre code semble maintenant totalement différent de mon contrôle par défaut de combobox. Je n'ai aucune idée de la façon de fusionner les deux extraits de code.

Je pense que ce code où je mets les 2 « têtes de colonne », il suffit de chercher à l'intérieur du 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}}"> 

// doit ici être les en-têtes de colonnes, mais comment fusionner votre code avec la 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

Je pense que cela semble assez proche. Vous pouvez télécharger ma version modifiée de here

Ajout d'un modèle pour 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>