Блог

У меня есть пользовательский combobox, который прямо сейчас выглядит так:

 <ComboBox 
    x:Name="ComboBoxBtn" 
    VerticalAlignment="Top" 
    HorizontalAlignment="Left" 
    Margin="0,0,0,-1" 
    Width="300" 
    ItemsSource="{Binding Source, RelativeSource={RelativeSource AncestorType=UserControl}}"
    SelectedItem="{Binding Path=Selected, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=UserControl}}"
    IsSynchronizedWithCurrentItem="True">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Grid Name="PART_GRID">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Label Content="{Binding}"
                   Width="250" />
                <Button Name="PART_BUTTON"
                    Grid.Column="1"
                    Content=" "
                    Command="{Binding AddCommandButton, ElementName=root}"
                    CommandParameter="{Binding}" />
            </Grid>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Favorite}"
                         Value="True">
                    <Setter TargetName="PART_GRID"
                        Property="Background"
                        Value="#FFE6E6FA" />
                    <Setter TargetName="PART_BUTTON"
                        Property="Content"
                        Value="-" />
                    <Setter TargetName="PART_BUTTON"
                        Property="Command"
                        Value="{Binding RemoveCommandButton, ElementName=root}" />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>
  

В основном мой источник — это ObservableCollection, который содержит элементы, которые могут быть любимыми или нет, в каждом случае они представлены по-разному. Прямо сейчас я хочу, чтобы при загрузке ComboBox загружались только избранные элементы и кнопка «Загрузить все» в конце. При нажатии загружаются остальные элементы в мой выпадающий список.

Я не знаю, как я могу создать последний элемент другим способом (просто кнопкой), а что касается загрузки остальной части, я думаю, я мог бы начать с избранных элементов только в моей коллекции, затем, когда я нажимаю кнопку, я добавляю остальное в свой список. Я прав?

Отредактируйте шаблон combobox (щелкните правой кнопкой мыши на элементе управления -> Редактировать шаблон -> Редактировать копию …) и внутри Popup имени PART_popup добавьте a Grid вокруг ScrollViewer содержащего ItemsPresenter . Определите две строки для сетки, нижняя часть которой автоматически изменяется, затем добавьте кнопку в сетку во второй строке, которую можно использовать для загрузки дополнительных элементов.

Вот пример шаблона элемента управления:

 <ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}">
    <Grid x:Name="templateRoot" 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, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
            <Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
                <Border x:Name="dropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
                    <Grid> <!-- Add this grid -->
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <ScrollViewer x:Name="DropDownScrollViewer">
                            <Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
                                <Canvas x:Name="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>
                        <!-- Add this button -->
                        <Button Grid.Row="1" Content="Load All" HorizontalAlignment="Stretch" /> 
                    </Grid>
                </Border>
            </Themes:SystemDropShadowChrome>
        </Popup>
        <ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/>
        <ContentPresenter x:Name="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="shadow" Value="0,0,5,5"/>
            <Setter Property="Color" TargetName="shadow" Value="#71000000"/>
        </Trigger>
        <Trigger Property="HasItems" Value="false">
            <Setter Property="Height" TargetName="dropDownBorder" Value="95"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsGrouping" Value="true"/>
                <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
            </MultiTrigger.Conditions>
            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
        </MultiTrigger>
        <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>
  

Который будет выглядеть следующим образом:

Затем вы можете использовать кнопку, чтобы вызвать обновление вашего источника (либо обработчиком события щелчка, либо командой).

Надеюсь, это поможет.