3

По логике выглядит как 2 кнопки, одна маленькая другая большая. Первая работает как кнопка а другая как выпадающий список.

При нажатии на кнопку

При нажатии

При нажатии другую

введите сюда описание изображения

Как сделать такую кнопку?

1
  • 2
    Это комбобокс с кнопкой внутри. Сейчас попробую застилизовать
    – VladD
    Commented 16 мар. 2021 в 17:23

1 ответ 1

6

Ну например так. Положите кнопку на комбобокс. Утащите комбобокс под кнопку при помощи ZIndex. Застилизуйте ComboBoxItem, чтобы он показывал сепараторы в нужных местах. Выйдет что-то такое:

<Grid Height="20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="20"/>
    </Grid.ColumnDefinitions>
    <Button Grid.Column="0" Content="{Binding Text,ElementName=cb}"/>
    <ComboBox IsReadOnly="True" ItemsSource="{Binding}" DisplayMemberPath="DisplayName"
              Grid.ColumnSpan="2" Name="cb" Panel.ZIndex="-1">
        <ComboBox.Resources>
            <Style TargetType="{x:Type ComboBoxItem}">
                <Style.Triggers>
                    <!-- если на входе null, то... -->
                    <DataTrigger Binding="{Binding}" Value="{x:Null}">
                        <!-- не разрешаем выбирать этот элемент, и... -->
                        <Setter Property="IsEnabled" Value="False"/>
                        <!-- показываем вместо него разделитель -->
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Separator/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ComboBox.Resources>
    </ComboBox>
</Grid>

В DataContext в свойстве Items будет коллекция таких элементов:

class SelectItem
{
    public string DisplayName { get; }
    // тут другие члены
}

примерно такого вида:

new List<SelectItem>()
{
    new SelectItem { DisplayName = "Case insensitive" },
    null,
    new SelectItem { DisplayName = "Integer" },
    new SelectItem { DisplayName = "Positive integers" },
    new SelectItem { DisplayName = "Negative integers" },
    new SelectItem { DisplayName = "Year (1900-2099)" },
    null,
    new SelectItem { DisplayName = "AVI (*.avi)" },
    new SelectItem { DisplayName = "JPEG (*.jpg; *.jpeg)" },
    new SelectItem { DisplayName = "MKV (*.mkv)" },
    new SelectItem { DisplayName = "AVI (*.avi)" },
    null,
    new SelectItem { DisplayName = "Do not contain SUBSTRING" },
    new SelectItem { DisplayName = "Whitespace" }
}

Получается что-то такое:

картинка, как же без неё?

4
  • Спасибо за помощь.
    – Vladimir
    Commented 16 мар. 2021 в 18:26
  • 1
    @Vladimir: Пожалуйста!
    – VladD
    Commented 16 мар. 2021 в 18:38
  • 1
    Прицеп понятен, осталось красоту навести и подумать как это сделать стилем(чтобы использовать когда нужна будет такая кнопка).
    – Vladimir
    Commented 16 мар. 2021 в 18:49
  • 2
    @Vladimir: Возможно, лучше из этого сделать UserControl
    – VladD
    Commented 16 мар. 2021 в 19:10

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.