Как создать и стилизовать ComboBox с двумя столбцами в WPF

1

Я использовал Styles и ControlTemplate для изменения внешнего вида ComboBox и ComboBoxItem. Теперь последний вид выглядит следующим образом.

Изображение 174551

Теперь я хочу как-то изменить шаблон ComboBoxItem чтобы он выглядел ниже. Мне не нужны инструкции о том, как рисовать цветные прямоугольники. Как создать шаблон с двумя столбцами и как его обновить.

Изображение 174551

Вот код, который я использовал для достижения первого изображения:

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />


<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
    <Rectangle x:Name="Border" Width="188" Height="23" Fill="{StaticResource NormalImg}"></Rectangle>
    <ControlTemplate.Triggers>

        <Trigger Property="ToggleButton.IsChecked" Value="true">
            <Setter TargetName="Border" Property="Fill" Value="{StaticResource PressedImg}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Fill" Value="{StaticResource NormalImg}" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
    <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>

<Style x:Key="ComboBoxStyle" TargetType="ComboBox">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="UseLayoutRounding" Value="True"></Setter>
    <Setter Property="TextOptions.TextFormattingMode" Value="Display"></Setter>
    <Setter Property="Foreground" Value="White"></Setter>
    <Setter Property="FontSize" Value="11"></Setter>
    <Setter Property="RenderOptions.ClearTypeHint" Value="Enabled"></Setter>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="MinWidth" Value="188"/>
    <Setter Property="MinHeight" Value="23"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid>
                    <ToggleButton 
    Name="ToggleButton" 
    Template="{StaticResource ComboBoxToggleButton}" 
    Grid.Column="2" 
    Focusable="false"
    IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
    ClickMode="Press">
                    </ToggleButton>
                    <ContentPresenter
    Name="ContentSite"
    IsHitTestVisible="False" 
    Content="{TemplateBinding SelectionBoxItem}"
    ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
    ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
    Margin="7,0,0,3"
    VerticalAlignment="Center"
    HorizontalAlignment="Left" />
                    <TextBox x:Name="PART_EditableTextBox"
    Style="{x:Null}" 
    Template="{StaticResource ComboBoxTextBox}" 
    HorizontalAlignment="Left" 
    VerticalAlignment="Center" 
    Margin="3,3,23,3"
    Focusable="True" 
    Background="Transparent"
    Visibility="Hidden"
    IsReadOnly="{TemplateBinding IsReadOnly}"/>
                    <Popup 
    Name="Popup"
    Placement="Bottom"
    IsOpen="{TemplateBinding IsDropDownOpen}"
    AllowsTransparency="True" 
    Focusable="False"
    PopupAnimation="Slide">
                        <Grid 
        Name="DropDown"
        SnapsToDevicePixels="True"                
        MinWidth="{TemplateBinding ActualWidth}"
        MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border 
        x:Name="DropDownBorder"
        Background="{StaticResource WindowBackgroundBrush}"
        BorderThickness="1"
        BorderBrush="{StaticResource SolidBorderBrush}"/>
                            <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                    </Trigger>
                    <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                        <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                    </Trigger>
                    <Trigger Property="IsEditable"
        Value="true">
                        <Setter Property="IsTabStop" Value="false"/>
                        <Setter TargetName="PART_EditableTextBox" Property="Visibility"    Value="Visible"/>
                        <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                        <Setter Property="Foreground" Value="#FFFFFF"></Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ComboBoxItemStyle" TargetType="ComboBoxItem">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="UseLayoutRounding" Value="True"></Setter>
    <Setter Property="TextOptions.TextFormattingMode" Value="Display"></Setter>
    <Setter Property="RenderOptions.ClearTypeHint" Value="Enabled"></Setter>
    <Setter Property="Foreground" Value="Black"></Setter>
    <Setter Property="FontSize" Value="11"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBoxItem">
                <Border 
    Name="Border"
    Padding="2"
    SnapsToDevicePixels="true" TextOptions.TextFormattingMode="Display">
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="#EEEEEE"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#FFFFFF"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ComboBox Width="188" Height="23" Margin="0 1 0 0" Style="{StaticResource ComboBoxStyle}">
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}">Model</ComboBoxItem>
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}">Columns Layout</ComboBoxItem>
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}">Column Elevations</ComboBoxItem>
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}">Column Sections</ComboBoxItem>
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}">Beams Layout</ComboBoxItem>
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}">Beam Elevations</ComboBoxItem>
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}">Floors Layout</ComboBoxItem>
</ComboBox>
  • 0
    Как вы хотите установить второе изображение / значение индикатора выполнения из элемента комбинированного списка?
  • 0
    @YuliamChandra Это одна из моих главных проблем. Я бы предпочел установить его с помощью кода.
Показать ещё 1 комментарий
Теги:
wpf
combobox
styles

1 ответ

2
Лучший ответ

Вот самое простое решение для использования свойства Tag.

<ComboBox Width="188" Height="23" Margin="0 1 0 0" Style="{StaticResource ComboBoxStyle}">
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}" Tag="10">Model</ComboBoxItem>
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}" Tag="20">Columns Layout</ComboBoxItem>
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}" Tag="30">Column Elevations</ComboBoxItem>
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}" Tag="40">Column Sections</ComboBoxItem>
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}" Tag="50">Beams Layout</ComboBoxItem>
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}" Tag="60">Beam Elevations</ComboBoxItem>
    <ComboBoxItem Style="{StaticResource ComboBoxItemStyle}" Tag="70">Floors Layout</ComboBoxItem>
</ComboBox>

Затем обновите свой ComboBoxItemStyle Template.

<Style x:Key="ComboBoxItemStyle" TargetType="ComboBoxItem">
    <!-- other code omitted -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBoxItem">
                <Border  Name="Border" Padding="2" SnapsToDevicePixels="true" TextOptions.TextFormattingMode="Display">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="20" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <ContentPresenter Grid.Column="0" />
                        <ProgressBar Grid.Column="2" Value="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" Maximum="100" Width="100"></ProgressBar>
                    </Grid>
                </Border>
                <!-- other code omitted -->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

PS: Ожидаемый пользовательский интерфейс может быть не очень близок к тому, что вы хотите, но он даст вам представление о том, с чего начать.

  • 0
    Большое спасибо, Юлям, это на самом деле гениальная идея сделать это так. Но когда я выбираю элемент и закрываю всплывающее окно, я также хочу, чтобы изображение отображалось в поле со списком.
  • 0
    @Vahid, вам также нужно изменить шаблон ComboBox :)
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню