Combobox在WPF中显示和隐藏ComboBox项目 [英] Combobox show and hide ComboBox items in WPF
问题描述
ComboBox可能有很多项目。
ComboBox might have a lot of items.
这是我想实现的方案：
我必须创建一个自定义 ComboBox ，它有一个更多按钮，位于 ComboBox 。如果 ComboBox 包含20个项目，最初，当单击 ComboBox 并显示下拉列表时，
I have to create a custom ComboBox which has a "More" button which located at the last of the ComboBox items. If the ComboBox contain of 20 items, initially, when the ComboBox is clicked and the drop down list is shown, there are only 10 items and a "More" button under the 10th items are displayed.
每当点击更多按钮项目时，更多按钮将变成更多按钮。 Less，下拉列表将显示总共20个项目。因此，当点击减少按钮时，显示项目将被反转回到10个项目，另外10个项目将被隐藏。
Whenever the "More" button items is clicked, the "More" button will turn into "Less" and the drop down list will display total of 20 items. So when "Less" button is clicked, the display items will be reversed back to 10 items and the another 10 items will be hidden.
10个初始显示项目一个例子。实际上， ComboBox的初始显示项目的总计可以通过属性设置。
The 10 initial display items is just an example. Actually, The total of the ComboBox's initial display item can be set through the property.
例如：< local：CustomComboBox x：Name =CustomComboBoxInitialDisplayItem =10/>
我是wpf的新人...
I am new to wpf...How can i achieve that?
推荐答案
创建自定义控件，例如：
Create a custom control such as:
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);
}
}
需要在整个样式中放一个标准组合框，可以使用混合来获得它。我不会发布，因为它是huuuugege。您将需要更改以下部分：
In the generic.xaml you will need to put in the entire style for a standard combo box, you can use blend to get it. I won't post it because it is huuuuuggge. You will need to change the following sections:
更改样式以指向自定义控件
Change the style to point at you custom control i.e.
<Style TargetType="{x:Type local:CrazyCombo}">
在组合框弹出框中添加更多/更少按钮
In the combo box popup add the more/less button
<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>
标准组合框控件模板的唯一补充是
The only addition to the standard combo box control template was the line
<Button Name="moreLessButton" Content="More"/>
然后使用自定义控件，如
You then use the custom control like
<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。你可能还会让按钮成为一个切换按钮，而不是我的傻子开关代码。
If you were to do this for real you would add some triggers to the button so it only displayed if there were more items then the "InitialDisplayItem". You would probably also make the button a toggle button instead of my silly switch code.
这篇关于Combobox在WPF中显示和隐藏ComboBox项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
