-2

ComboBoxには多くのアイテムが含まれている可能性があります。

これは私が達成したいシナリオです：

ComboBoxアイテムの最後にある「詳細」ボタンを持つカスタムを作成する必要がありComboBoxます。20個のアイテムが含まれている場合ComboBox、最初にComboBoxをクリックしてドロップダウンリストを表示すると、10個のアイテムのみが表示され、10個目のアイテムの下に[その他]ボタンが表示されます。

[もっと見る]ボタンの項目をクリックするたびに、[もっと見る]ボタンが[少ない]に変わり、ドロップダウンリストに合計20個の項目が表示されます。そのため、「少ない」ボタンをクリックすると、表示項目が反転して10項目に戻り、他の10項目が非表示になります。

10個の初期表示項目は一例です。ComboBox's実際には、初期表示項目の合計は、プロパティを介して設定できます。

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

私はwpfを初めて使用します...どうすればそれを達成できますか？

4

1 に答える 1

3

次のようなカスタムコントロールを作成します。

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では、標準のコンボボックスのスタイル全体を入力する必要があります。blendを使用して取得できます。ふぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅ。次のセクションを変更する必要があります。

カスタムコントロールを指すようにスタイルを変更します。

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

コンボボックスのポップアップで、more/lessボタンを追加します

<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」よりも多くのアイテムがある場合にのみ表示されるようにします。私のばかげたスイッチコードの代わりに、ボタンをトグルボタンにすることもできます。

于 2012-07-27T04:58:28.463 に答える