WPF开发中重写Combox样式遇到的一些问题

内科發表於 2025-7-10 16:55:00

WPF开发中重写Combox样式遇到的一些问题

<h1 id="在实际的wpf开发过程中你可能需要自定义combox的样式重写的样式可能不出效果背景色无法正常显示或者是显示的内容出现白色遮罩如以下的效果">在实际的WPF开发过程中，你可能需要自定义ComBox的样式，重写的样式可能不出效果，背景色无法正常显示，或者是显示的内容出现白色遮罩，如以下的效果：</h1>
<h2 id="1combox样式如下">1.ComBox样式如下：</h2>
<pre><code> <Style TargetType="TextBlock" x:Key="BaseTextBlockStyle">
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Padding" Value="0"/>

</Style>

<Style x:Key="BaseComboBoxStyle" TargetType="ComboBox">
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Margin" Value="5,0,5,0"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="Width" Value="160"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Background" Value="#0D0D19"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="IsEditable" Value="False"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ResourceKey=BaseTextBlockStyle}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</code></pre>
<p>页面展示如下：</p>
<pre><code> <ComboBox Tag="SelectTestPositonList"
   ItemsSource="{Binding SelectTestPositonList, Mode=OneWay}"
   SelectedItem="{Binding SelectTestPositionItem}"
   SelectionChanged="ComboBox_SelectionChanged">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ResourceKey=BaseTextBlockStyle}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</code></pre>
<p>运行效果如下：</p>
<p><img src="https://img2024.cnblogs.com/blog/2212230/202507/2212230-20250710164726654-1126209127.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/2212230/202507/2212230-20250710165338102-1756235764.png"></p>
<h2 id="2原因">2.原因</h2>
<p>这是因为 <strong>WPF 默认的 ComboBox 模板中</strong>，其子元素（如 ToggleButton、ContentPresenter、Popup 等）有独立的样式，你仅仅设置 Background 并不会影响内部结构，尤其是：</p>
<ul>
<li>下拉按钮（ToggleButton）</li>
<li>选中项显示区域</li>
<li>下拉列表（Popup）</li>
</ul>
<p>解决方案：<strong>重写 ComboBox 的控件模板</strong>（ControlTemplate）</p>
<h2 id="3重写样式">3.重写样式：</h2>
<pre><code><Style TargetType="TextBlock" x:Key="BaseTextBlockStyle">
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Padding" Value="0"/>

</Style>

<Style x:Key="BaseComboBoxStyle" TargetType="ComboBox">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#0D0D19"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Width" Value="160"/>
<Setter Property="Height" Value="32"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="5,0,5,0"/>
<Setter Property="IsEditable" Value="False"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" Margin="5,0,0,0" Style="{StaticResource BaseTextBlockStyle}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton
Name="ToggleButton"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}">
<Grid>
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
VerticalAlignment="Center"
HorizontalAlignment="Left" Width="160"
Margin="6,0,0,0"
RecognizesAccessKey="True"/>
<Path
HorizontalAlignment="Right"
Margin="0,0,6,0"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="White"/>
</Grid>
</ToggleButton>
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid
Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="200"
Background="#0D0D19">
<Border x:Name="DropDownBorder" BorderThickness="0" Background="#0D0D19"/>
<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="Gray"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#1A1A2A"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</code></pre>
<p>使用方式如下：</p>
<p>效果图1：<br>
<img src="https://img2024.cnblogs.com/blog/2212230/202507/2212230-20250710165222295-432797959.png"></p>
<p>效果图2：<br>
<img src="https://img2024.cnblogs.com/blog/2212230/202507/2212230-20250710165437100-1045629082.png"></p>
<p><strong>如果本文介绍对你有帮助，可以一键四连：点赞+评论+收藏+推荐，谢谢！</strong></p><br><br>
来源：https://www.cnblogs.com/chenshibao/p/18977257

頁: [1]

琼殿技术论坛's Archiver

WPF开发中重写Combox样式遇到的一些问题