Combobox显示和隐藏WPF中的ComboBox项目

Question

ComboBox可能有很多项目。

这是该方案我想实现：

我要创建具有“更多”按钮，位于最后ComboBox项目的定制ComboBox。如果ComboBox包含20个项目，则最初在单击ComboBox并显示下拉列表时，仅显示10个项目，并显示第10个项目下的“更多”按钮。

只要点击“更多”按钮项目，“更多”按钮将变成“更少”，下拉列表将显示总共20个项目。所以当点击“Less”按钮时，显示项目将被反转回10个项目，另外10个项目将被隐藏。

10个初始显示项目仅仅是一个例子。实际上，ComboBox's初始显示项目的总数可以通过属性设置。

例如：<local:CustomComboBox x:Name="CustomComboBox" InitialDisplayItem="10" />

我是新来WPF ...我怎么能做到这一点？

Answer 1

创建一个自定义的控制，如：

public class CrazyCombo : ComboBox 
{ 
    static CrazyCombo() 
    { 
     DefaultStyleKeyProperty.OverrideMetadata(typeof(CrazyCombo), new FrameworkPropertyMetadata(typeof(CrazyCombo))); 
    } 

    public int InitialDisplayItem 
    { 
     get { return (int)GetValue(InitialDisplayItemProperty); } 
     set { SetValue(InitialDisplayItemProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for InitialDisplayItem. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty InitialDisplayItemProperty = 
     DependencyProperty.Register("InitialDisplayItem", typeof(int), typeof(CrazyCombo), new UIPropertyMetadata(0)); 

    public override void OnApplyTemplate() 
    { 
     base.OnApplyTemplate(); 

     var moreLessButton = Template.FindName("moreLessButton", this) as Button; 

     moreLessButton.Click += new RoutedEventHandler(moreLessButton_Click); 
    } 

    void moreLessButton_Click(object sender, RoutedEventArgs e) 
    { 
     var moreLessButton = Template.FindName("moreLessButton", this) as Button; 

     if (moreLessButton.Content.ToString() == "More") 
     { 
      var icv = CollectionViewSource.GetDefaultView(Items); 

      icv.Filter = null; 
      moreLessButton.Content = "Less"; 
     } 
     else 
     { 
      var icv = CollectionViewSource.GetDefaultView(Items); 

      icv.Filter += o => Items.OfType<object>().Take(InitialDisplayItem).Contains(o); 

      moreLessButton.Content = "More"; 
     } 
    } 

    protected override void OnItemsSourceChanged(System.Collections.IEnumerable oldValue, System.Collections.IEnumerable newValue) 
    { 
     base.OnItemsSourceChanged(oldValue, newValue); 

     var icv = CollectionViewSource.GetDefaultView(Items); 

     icv.Filter += o => Items.OfType<object>().Take(InitialDisplayItem).Contains(o); 
    } 

} 

在你需要把整个风格为标准组合框的generic.xaml，您可以使用混合得到它。我不会发布它，因为它是huuuuuggge。您将需要更改以下部分：

样式更改为指向您的自定义控制即

<Style TargetType="{x:Type local:CrazyCombo}"> 

在组合框弹出添加更多/更少按钮

<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}}"> 
           <StackPanel> 
            <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> 
            <Button Name="moreLessButton" Content="More"/> 
           </StackPanel> 
          </Border> 
         </Microsoft_Windows_Themes:SystemDropShadowChrome> 
        </Popup> 

唯一除了标准的组合框控制模板是线

<Button Name="moreLessButton" Content="More"/> 

然后你瑟像

<Window x:Class="WpfApplication4.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:WpfApplication4" 
    Title="MainWindow" Height="350" Width="525" Foreground="red"> 

<StackPanel> 

    <local:CrazyCombo x:Name="bah" ItemsSource="{Binding Foo}" InitialDisplayItem="1"/> 

</StackPanel> 

如果你这样做了真实的你一定会添加触发器按钮所以只如果有多个项目，则“InitialDisplayItem”显示自定义控制。你可能也会使按钮成为切换按钮而不是我愚蠢的切换代码。