修改ComboBox控件模板实例

  WPF中自定义控件是可以通过修改控件模板很容易实现的，下面是一个ComboBox控件模板的实例。

 定义一个SolidColorBrush 

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

定义ComboBox控件中TextBox控件的模板
    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
      <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
    </ControlTemplate>
   

定义ComboBox控件中ToggleButton控件的模板
    <ControlTemplate x:Key="ComboBoxToggleButtonStyle" TargetType="{x:Type ToggleButton}">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition Width="19" />
        </Grid.ColumnDefinitions>
        <Border
           x:Name="Border"
           Grid.ColumnSpan="2"
           CornerRadius="0"
           BorderThickness="0"
           BorderBrush="White"
           FocusVisualStyle="{x:Null}" >
          <Border.Background>
            <SolidColorBrush Color="#0000FF00" />
          </Border.Background>
        </Border>
        <Border
           Grid.Column="0"
           CornerRadius="0,0,0,0"
           Margin="1"
           BorderThickness="0" />
        <Image
          x:Name="Arrow"
          Grid.Column="1"
          Width ="14"
          Height ="13"
          Margin="6,6,0,0"
          HorizontalAlignment="Left"
          VerticalAlignment="Top"
        />
      </Grid>
    </ControlTemplate>
   

定义ComboBox的风格，应用上面定义的各个模板
    <Style x:Key="ComboBoxStyle" 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 ComboBoxToggleButtonStyle}"
                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="White"
                Visibility="Visible"
                IsReadOnly="False"
                />
              <!--="{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"
                    BorderThickness="1"
                    BorderBrush="{StaticResource SolidBorderBrush}">
                    <Border.Background>
                      <SolidColorBrush Color="#cc336699" />
                    </Border.Background>
                  </Border>
                  <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                  </ScrollViewer>
                </Grid>
              </Popup>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
      </Style.Triggers>
    </Style> 

 

使用上面定义的Style生成一个ComboBox控件

<ComboBox Name="comboBoxNetwork" Height="24" Margin="50,50,0,0" VerticalAlignment="Top" Width="204" BorderThickness="0" FontFamily="Square721 Ex BT" FontSize="14" Foreground="White" Style="{StaticResource ComboBoxStyle}"/>

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1586159