C# 如何在WPF中创建两列组合框并设置其样式

我使用了

样式

和

控制模板

来更改

组合框

和

组合框项

的外观。现在，最终外观如下所示

现在我想要的是以某种方式更改

ComboBoxItem

的模板，使其如下所示。我不需要关于如何绘制彩色矩形的说明。如何创建两列模板以及如何更新它

下面是我用来实现第一个图像的代码：

<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>

模型
列布局
柱立面图
柱截面
梁布局
梁立面图
楼层布置

下面是使用

标记

属性的最简单解决方案

<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>

---

PS：预期的UI可能与您想要的不太接近，但它会让您知道从何处开始。

如何设置组合框项目的第二个图像/进度条值？@YuliamChandra这是我的主要问题之一。我更喜欢通过代码设置。要在组合框区域显示图像，请访问此..可能会有帮助，非常感谢Yuliam，这样做实际上是一个天才的想法。但是，当我选择一个项目并关闭弹出窗口时，我还希望图像显示在组合框区域。@Vahid，您还需要修改组合框模板：）您能告诉我应该在哪里更改吗。我很感激，我试过了，但失败了。@Vahid，复制粘贴默认模板并开始计算网格的放置位置：）@Vahid，是的，我注意到，可能标记的绑定选择器效率不高，或者可能将对象强制转换为整数花了时间，理想情况下为每个组合框itme创建自定义数据上下文

<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>