combobox tùy chỉnh trong ứng dụng wpf

Question

Im mới vào ứng dụng WPF. Tôi cần phải tùy chỉnh combobox của tôi như hình ảnh này.

Tôi đã thử ví dụ này http://www.eidias.com/Blog/2012/2/20/customizing-wpf-combo-box-style

<Window x:Class="win.Window1" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="Window1" Height="300" Width="300" Background="Red"> 
    <Window.Resources> 
     <ControlTemplate x:Key="CustomToggleButton" TargetType="ToggleButton"> 
      <Grid> 
       <Border Name="Border" /> 
       <Border Name="SmallBorder" /> 
       <Path Name="Arrow" /> 
      </Grid> 
     </ControlTemplate> 
     <Style TargetType="{x:Type ComboBoxItem}"> 
      <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True" /> 
      <Setter Property="Control.Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ComboBoxItem}"> 
         <Border> 
          <ContentPresenter /> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style TargetType="{x:Type ComboBox}"> 
      <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True" /> 
      <Setter Property="Control.Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ComboBox"> 
         <Grid> 
          <ToggleButton Template="{StaticResource CustomToggleButton}" /> 
          <ContentPresenter /> 
          <TextBox /> 
          <Popup> 
           <Grid> 
            <Border> 
             <ScrollViewer> 
              <ItemsPresenter /> 
             </ScrollViewer> 
            </Border> 
           </Grid> 
          </Popup> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <ComboBox Grid.Column="1" Height="40" Width="200" > 
      <ComboBoxItem Name="item1">item1</ComboBoxItem> 
      <ComboBoxItem Name="item2">item2</ComboBoxItem> 
      <ComboBoxItem Name="item3">item3</ComboBoxItem> 
     </ComboBox> 
    </Grid> 
</Window> 

sản lượng này hoạt động như textbox.Please giúp tôi guys!

Answer 1

Tôi cũng thích định dạng và quyết định tạo lại. Vui lòng tìm XAML bên dưới. Hy vọng nó sẽ giúp người ...

<Window x:Class="ComboStyle.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525"> 

<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="0" 
        Background="#FF3F3F3F" 
        BorderBrush="#FF97A0A5" 
        BorderThickness="1" /> 
      <Border 
        Grid.Column="0" 
        CornerRadius="0" 
        Margin="1" 
        Background="#FF3F3F3F" 
        BorderBrush="#FF97A0A5" 
        BorderThickness="0,0,1,0" /> 
      <Path 
        x:Name="Arrow" 
        Grid.Column="1"  
        Fill="White" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 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="Foreground" Value="White"/> 
     <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="#FF3F3F3F" 
          Foreground="Green" 
          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="#FF3F3F3F" 

           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="0"/> 
          <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="Foreground" Value="White"/> 
     <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="#FF4F4F4F"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="#888888"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 


<Grid> 
    <Border Padding="10" Background="#FF3F3F3F"> 
     <ComboBox Grid.Column="1" Height="30" Width="250" > 
      <ComboBoxItem Name="Item1">Item1</ComboBoxItem> 
      <ComboBoxItem Name="Item2">Item2</ComboBoxItem> 
      <ComboBoxItem Name="Item3">Item3</ComboBoxItem> 
      <ComboBoxItem Name="Item4">Item4</ComboBoxItem> 
      <ComboBoxItem Name="Item5">Item5</ComboBoxItem> 
      <ComboBoxItem Name="Item6">Item6</ComboBoxItem> 
     </ComboBox>   
    </Border> 

</Grid> 

Answer 2

Kiểm tra liên kết này:

http://www.eidias.com/Blog/2012/2/20/customizing-wpf-combo-box-style

Đây là một blog với mã ví dụ về cách làm cho một Combobox tùy chỉnh. Các combobox tùy chỉnh, ông đang làm trông rất giống như một trong những bạn cần. Vì vậy, tôi nghĩ rằng điều này sẽ rất hữu ích cho bạn.

Answer 3

Đây là một phong cách hoàn chỉnh cho ComboBox WPF. Nó cũng dễ dàng tùy chỉnh.

http://www.wpfhelper.com/index.php/styles-in-wpf/combobox/15-combobox-style-in-wpf

Các mã này khá dài nên tôi sẽ không đăng tất cả ở đây. Tuy nhiên, đây là kiểu ComboBox cơ bản:

<Style TargetType="{x:Type ComboBox">   
    <Setter Property="Foreground" Value="Gray" /> 
    <Setter Property="BorderBrush" Value="Gray" /> 
    <Setter Property="Background" Value="White" /> 
    <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="FontSize" Value="16" /> 
    <Setter Property="FontWeight" Value="Bold" /> 
    <Setter Property="MinWidth" Value="50"/> 
    <Setter Property="MinHeight" Value="32"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ComboBox"> 
       <Grid> 
        <ToggleButton 
          Name="ToggleButton" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          Background="{TemplateBinding Background}" 
         Foreground="{TemplateBinding Foreground}" 
          Style="{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="10,3,30,3" 
          VerticalAlignment="Center" 
          HorizontalAlignment="Center" /> 
        <TextBox x:Name="PART_EditableTextBox" 
          Style="{x:Null}" 
          Template="{StaticResource ComboBoxTextBox}" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" 
          Margin="3,3,23,3" 
          Focusable="True"        
          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="White" 
            BorderThickness="2" 
            BorderBrush="Gray"/> 
          <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="IsGrouping" Value="true"> 
         <Setter Property="ScrollViewer.CanContentScroll" Value="false"/> 
        </Trigger> 
        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true"> 
         <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0"/> 
         <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>