1，如何在WPF中使用ComboBox

代码

  1.     <Grid>
  2.         <ComboBox Width="200" Height="23">
  3.             <ComboBoxItem Content="Tea" />
  4.             <ComboBoxItem Content="Milk" IsSelected="True" />
  5.             <ComboBoxItem Content="Coffee" />
  6.         </ComboBox>
  7.     </Grid>

效果

image.png

2，自定义ComboBox的Item

代码

  1. <Grid>
  2.         <ComboBox
  3.             HorizontalAlignment="Center"
  4.             VerticalAlignment="Center"
  5.             SelectedIndex="1">
  6.             <ComboBoxItem>
  7.                 <StackPanel Orientation="Horizontal">
  8.                     <Image
  9.                         Width="60"
  10.                         Height="30"
  11.                         Source="/ComboBox Style Sample;component/img/copyright.png" />
  12.                     <TextBlock VerticalAlignment="Center" Foreground="Red">Itme1</TextBlock>
  13.                 </StackPanel>
  14.             </ComboBoxItem>
  15.             <ComboBoxItem>
  16.                 <StackPanel Orientation="Horizontal">
  17.                     <Image
  18.                         Width="60"
  19.                         Height="30"
  20.                         Source="/ComboBox Style Sample;component/img/down-circle.png" />
  21.                     <TextBlock VerticalAlignment="Center" Foreground="Green">Item2</TextBlock>
  22.                 </StackPanel>
  23.             </ComboBoxItem>
  24.             <ComboBoxItem>
  25.                 <StackPanel Orientation="Horizontal">
  26.                     <Image
  27.                         Width="60"
  28.                         Height="30"
  29.                         Source="/ComboBox Style Sample;component/img/left-circle.png" />
  30.                     <TextBlock VerticalAlignment="Center" Foreground="Blue">Item3</TextBlock>
  31.                 </StackPanel>
  32.             </ComboBoxItem>
  33.         </ComboBox>
  34.     </Grid>

效果

image.png

3，自定义ComboBox样式

代码

ComboBoxItem样式

  1.        <Style x:Key="stlCbxItem" TargetType="{x:Type ComboBoxItem}">
  2.             <Setter Property="HorizontalContentAlignment" Value="Stretch" />
  3.             <Setter Property="VerticalContentAlignment" Value="Center" />
  4.             <Setter Property="RenderOptions.ClearTypeHint" Value="Enabled" />
  5.             <Setter Property="BorderThickness" Value="0" />
  6.             <Setter Property="Foreground" Value="White" />
  7.             <Setter Property="Height" Value="28" />
  8.             <Setter Property="Template">
  9.                 <Setter.Value>
  10.                     <ControlTemplate TargetType="{x:Type ComboBoxItem}">
  11.                         <Grid Margin="0,0.5" Background="{TemplateBinding Background}">
  12.                             <Border
  13.                                 x:Name="ItemBackground"
  14.                                 Background="{TemplateBinding Background}"
  15.                                 BorderBrush="{TemplateBinding BorderBrush}"
  16.                                 BorderThickness="{TemplateBinding BorderThickness}"
  17.                                 CornerRadius="1"
  18.                                 IsHitTestVisible="False"
  19.                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
  20.                             <ContentPresenter
  21.                                 x:Name="contentPresenter"
  22.                                 Margin="{TemplateBinding Padding}"
  23.                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
  24.                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
  25.                         </Grid>
  26.                         <ControlTemplate.Triggers>
  27.                             <Trigger Property="IsSelected" Value="True">
  28.                                 <Setter TargetName="ItemBackground" Property="Background" Value="#224466" />
  29.                             </Trigger>
  30.                             <Trigger Property="IsMouseOver" Value="True">
  31.                                 <Setter TargetName="ItemBackground" Property="Background" Value="#226688" />
  32.                             </Trigger>
  33.                         </ControlTemplate.Triggers>
  34.                     </ControlTemplate>
  35.                 </Setter.Value>
  36.             </Setter>
  37.         </Style>

ToggleButton样式

  1.        <Style x:Key="stlToggleButton" TargetType="{x:Type ToggleButton}">
  2.             <Setter Property="Foreground" Value="White" />
  3.             <Setter Property="Template">
  4.                 <Setter.Value>
  5.                     <ControlTemplate>
  6.                         <Grid Background="Transparent">
  7.                             <Grid.ColumnDefinitions>
  8.                                 <ColumnDefinition Width="0.7*" />
  9.                                 <ColumnDefinition
  10.                                     Width="0.3*"
  11.                                     MinWidth="16"
  12.                                     MaxWidth="30" />
  13.                             </Grid.ColumnDefinitions>
  14.                             <TextBlock
  15.                                 Grid.Column="0"
  16.                                 Margin="5,0,0,0"
  17.                                 VerticalAlignment="Center"
  18.                                 Foreground="White"
  19.                                 Text="{Binding Text, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}, Mode=FindAncestor}}" />
  20.                             <Border
  21.                                 x:Name="Back"
  22.                                 Grid.Column="1"
  23.                                 Background="Transparent"
  24.                                 BorderBrush="Transparent"
  25.                                 BorderThickness="0">
  26.                                 <Path
  27.                                     x:Name="PathFill"
  28.                                     Width="8"
  29.                                     Height="6"
  30.                                     Data="M5,0 L10,10 L0,10 z"
  31.                                     Fill="#1b94e0"
  32.                                     RenderTransformOrigin="0.5,0.5"
  33.                                     Stretch="Fill"
  34.                                     StrokeThickness="0">
  35.                                     <Path.RenderTransform>
  36.                                         <TransformGroup>
  37.                                             <ScaleTransform />
  38.                                             <SkewTransform />
  39.                                             <RotateTransform Angle="180" />
  40.                                             <TranslateTransform />
  41.                                         </TransformGroup>
  42.                                     </Path.RenderTransform>
  43.                                 </Path>
  44.                             </Border>
  45.                         </Grid>
  46.                         <ControlTemplate.Triggers>
  47.                             <Trigger Property="IsMouseOver" Value="True">
  48.                                 <Setter TargetName="PathFill" Property="Fill" Value="#1b94e0" />
  49.                                 <Setter TargetName="Back" Property="Background" Value="Transparent" />
  50.                                 <Setter TargetName="Back" Property="BorderBrush" Value="Transparent" />
  51.                             </Trigger>
  52.                         </ControlTemplate.Triggers>
  53.                     </ControlTemplate>
  54.                 </Setter.Value>
  55.             </Setter>
  56.         </Style>

ComboBox样式

  1.        <Style x:Key="stlCbx" TargetType="{x:Type ComboBox}">
  2.             <Setter Property="SnapsToDevicePixels" Value="True" />
  3.             <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
  4.             <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
  5.             <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
  6.             <Setter Property="HorizontalAlignment" Value="Left" />
  7.             <Setter Property="Height" Value="28" />
  8.             <Setter Property="Margin" Value="0,0,0,0" />
  9.             <Setter Property="ItemContainerStyle" Value="{StaticResource stlCbxItem}" />
  10.             <Setter Property="ItemTemplate">
  11.                 <Setter.Value>
  12.                     <DataTemplate>
  13.                         <TextBlock
  14.                             Margin="0,3,0,3"
  15.                             Foreground="#ffffff"
  16.                             Text="{Binding Text}" />
  17.                     </DataTemplate>
  18.                 </Setter.Value>
  19.             </Setter>
  20.             <Setter Property="Template">
  21.                 <Setter.Value>
  22.                     <ControlTemplate TargetType="{x:Type ComboBox}">
  23.                         <Border
  24.                             Background="#aaaaaa"
  25.                             BorderBrush="#eee"
  26.                             BorderThickness="0"
  27.                             CornerRadius="2">
  28.                             <Grid>
  29.                                 <ToggleButton
  30.                                     ClickMode="Press"
  31.                                     IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
  32.                                     Style="{StaticResource stlToggleButton}" />
  33.                                 <Popup
  34.                                     x:Name="Popup"
  35.                                     AllowsTransparency="True"
  36.                                     Focusable="False"
  37.                                     IsOpen="{TemplateBinding IsDropDownOpen}"
  38.                                     Placement="Bottom"
  39.                                     PopupAnimation="Slide">
  40.                                     <Border
  41.                                         x:Name="DropDown"
  42.                                         MinWidth="{TemplateBinding ActualWidth}"
  43.                                         MaxHeight="{TemplateBinding MaxDropDownHeight}"
  44.                                         Background="Transparent"
  45.                                         SnapsToDevicePixels="True">
  46.                                         <Border
  47.                                             Margin="0,2,0,0"
  48.                                             Background="#002244"
  49.                                             CornerRadius="2">
  50.                                             <ScrollViewer
  51.                                                 MaxHeight="{TemplateBinding MaxDropDownHeight}"
  52.                                                 Margin="4,6,4,6"
  53.                                                 CanContentScroll="True"
  54.                                                 HorizontalScrollBarVisibility="Auto"
  55.                                                 SnapsToDevicePixels="True"
  56.                                                 VerticalScrollBarVisibility="Auto">
  57.                                                 <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
  58.                                             </ScrollViewer>
  59.                                         </Border>
  60.                                     </Border>
  61.                                 </Popup>
  62.                             </Grid>
  63.                         </Border>
  64.                     </ControlTemplate>
  65.                 </Setter.Value>
  66.             </Setter>
  67.         </Style>

页面中使用ComboBox样式

  1. <Window
  2.     x:Class="ComboBox_Style_Sample.MainWindow"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  7.     Title="MainWindow"
  8.     Width="800"
  9.     Height="450"
  10.     mc:Ignorable="d">
  11.     <Grid>
  12.         <ComboBox
  13.             Width="377"
  14.             Height="33"
  15.             Margin="0"
  16.             HorizontalAlignment="Center"
  17.             VerticalAlignment="Center"
  18.             Style="{StaticResource stlCbx}">
  19.             <ComboBoxItem Content="item1" />
  20.             <ComboBoxItem Content="item2" />
  21.         </ComboBox>
  22.     </Grid>
  23. </Window>

效果

combobox1.png

4，数据绑定

代码

  1.     <Grid>
  2.         <StackPanel VerticalAlignment="Center" Orientation="Vertical">
  3.             <ComboBox
  4.                 Name="myComboBox"
  5.                 Width="200"
  6.                 Height="23"
  7.                 SelectionChanged="myComboBox_SelectionChanged" />
  8.             <Label Width="97" Content="Selected Data:" />
  9.             <TextBox
  10.                 Name="txtData"
  11.                 Width="202"
  12.                 Height="23"
  13.                 Text="TextBox"
  14.                 TextWrapping="Wrap" />
  15.         </StackPanel>
  17.     </Grid>
  1.    public partial class DataBindingSample : Window
  2.     {
  3.         private List<Computer> Computers;
  4.         public DataBindingSample()
  5.         {
  6.             InitializeComponent();    
  7.             Computers = new List<Computer>();
  8.             myComboBox.ItemsSource = Computers;
  9.             myComboBox.DisplayMemberPath = "Name";
  10.             myComboBox.SelectedValuePath = "ID";
  11.         }
  13.         private void Window_Loaded(object sender, RoutedEventArgs e)
  14.         {
  16.             Computers.Add(new Computer() { ID = 1, Name = "Computer A"});
  17.             Computers.Add(new Computer() { ID = 2, Name = "Computer B" });
  18.             Computers.Add(new Computer() { ID = 3, Name = "Computer C" });
  20.             myComboBox.SelectedIndex = 1;
  21.         }
  23.         private void myComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
  24.         {
  25.             txtData.Text = myComboBox.SelectedValue.ToString();
  26.         }
  27.     }
  29.     public class Computer
  30.     {
  31.         public string Name { get; set; }
  32.         public int ID { get; set; }
  33.     }

效果

image.png

5，示例代码下载