如何使用WPF创建Flat组合框？

Question

您好我想用wpf创建一个平面组合框。实际上我已经完成了它但是当鼠标悬停在组合框上时它会返回旧样式。

我有这个xaml代码：

    <Style TargetType="ComboBox" x:Key="Flat_ComboBox">            
        <Setter Property="HorizontalAlignment" Value="Stretch"/>            
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="MinWidth" Value="60"/>
        <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
        <Setter Property="TextElement.Foreground" Value="Black"/>
        <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>            
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Background" Value="White" />       

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">                    
                <Setter Property="Background" Value="LightSkyBlue" />
            </Trigger>                
        </Style.Triggers>

    </Style>

触发器的哪些属性＆＃34; IsMouseOver＆＃34;我需要改变吗？

Answer 1

为什么这么复杂？ ;）

<ComboBox Style="{StaticResource {x:Static ToolBar.ComboBoxStyleKey}}"/>

Answer 2

您需要覆盖ControlTemplate的{​​{1}}。 voddy在评论中提到的链接会引导您（通过其他链接）使用默认的ComboBox样式（http://msdn.microsoft.com/en-us/library/ms752094.aspx），您应该可以调整它以获得所需的外观。

作为替代方案，您可以尝试使用Kaxaml（一个简洁的XAML工具）附带的ComboBox，这已经是一个更加平坦的＆＃34;外观

供参考（来自Kaxaml）：

ControlTemplate

会产生这样的东西：

您可能希望将模板分成<!-- Enclosed in your resources, or a resource dictionary --> <Window.Resources> <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="20" /> </Grid.ColumnDefinitions> <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="2" Background="#C0C0C0" BorderBrush="#404040" BorderThickness="1" /> <Border Grid.Column="0" CornerRadius="2,0,0,2" Margin="1" Background="#FFFFFF" BorderBrush="#404040" BorderThickness="0,0,1,0" /> <Path x:Name="Arrow" Grid.Column="1" Fill="#404040" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="ToggleButton.IsMouseOver" Value="true"> <Setter TargetName="Border" Property="Background" Value="#808080" /> </Trigger> <Trigger Property="ToggleButton.IsChecked" Value="true"> <Setter TargetName="Border" Property="Background" Value="#E0E0E0" /> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="Border" Property="Background" Value="#EEEEEE" /> <Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" /> <Setter Property="Foreground" Value="#888888"/> <Setter TargetName="Arrow" Property="Fill" Value="#888888" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}"> <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" /> </ControlTemplate> <Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}"> <Setter Property="SnapsToDevicePixels" Value="true"/> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> <Setter Property="ScrollViewer.CanContentScroll" Value="true"/> <Setter Property="MinWidth" Value="120"/> <Setter Property="MinHeight" Value="20"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type 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="3,3,23,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="#FFFFFF" BorderThickness="1" BorderBrush="#888888"/> <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="#888888"/> </Trigger> <Trigger Property="IsGrouping" Value="true"> <Setter Property="ScrollViewer.CanContentScroll" Value="false"/> </Trigger> <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true"> <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/> <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"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> </Style.Triggers> </Style> <!-- SimpleStyles: ComboBoxItem --> <Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}"> <Setter Property="SnapsToDevicePixels" Value="true"/> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ComboBoxItem}"> <Border Name="Border" Padding="2" SnapsToDevicePixels="true"> <ContentPresenter /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsHighlighted" Value="true"> <Setter TargetName="Border" Property="Background" Value="#DDDDDD"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="#888888"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> ，因此您可以在多个位置使用它。

您可能还想更改该行：

ResourceDictionary

要使用命名密钥，您可以将其应用于特定的<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}"> 元素：

ComboBox