WPF Combobox style and wpfcombobox Style

WPF Combobox style and wpfcombobox Style

<ControlTemplate x: Key = "ComboBoxToggleButton" TargetType = "{x: Type ToggleButton}"> <Grid x: Name = "grid"> <Grid. columnDefinitions> <ColumnDefinition/> <ColumnDefinition Width = "20"/> </Grid. columnDefinitions> <Rectangle Grid. columnSpan = "2" HorizontalAlignment = "Stretch" x: name = "Rectangle" verticalignment = "Stretch" Width = "Auto" Height = "Auto" RadiusX = "3" RadiusY = "3" Fill = "LightBlue"/> <! -- Combobox control shell --> <Rectangle Grid. column = "0" HorizontalAlignment = "Stretch" VerticalAlignment = "Stretch" Width = "Auto" Height = "Auto" RadiusX = "3" RadiusY = "3" Fill = "Gray" /> <! -- Remove other parts of the drop-down button --> <Border Margin = "," Grid. column = "1" Background = "Red" Width = "Auto" CornerRadius = "3, 3, 3" x: Name = "drop_border"/> <Path Grid. column = "1" HorizontalAlignment = "Center" Width = "Auto" x: Name = "Arrow" verticalignment = "Center" Fill = "{x: null} "Data =" M0.5, 0.5 L3, 6.5 5.5, 0.5 "Stroke =" Black "Margin =, 5, 0 "Height =" 7 "StrokeThickness =" 2 "Stretch =" Fill "/> <! -- Border and Path are drop-down buttons --> </Grid> <ControlTemplate. triggers> <Trigger Property = "IsMouseOver" Value = "true"> <Setter TargetName = "drop_border" Property = "Background" Value = "White"/> </Trigger> </ controlTemplate. triggers> </ControlTemplate> <ControlTemplate x: Key = "ComboBoxTextBox" TargetType = "{x: Type TextBox}"> <Border x: name = "PART_ContentHost" Focusable = "False" Background = "{TemplateBinding Background }" /> </ControlTemplate> <Style TargetType = "{x: type ComboBox} "> <Setter Property =" SnapsToDevicePixels "Value =" true "/> <Setter Property =" Template "> <Setter. value> <ControlTemplate TargetType = "{x: Type ComboBox}"> <Border BorderBrush = "Orange" x: Name = "border"> <Grid x: name = "grid"> <ToggleButton Template = "{StaticResource ComboBoxToggleButton}" x: Name = "ToggleButton" Focusable = "false" IsChecked = "{Binding P Ath = IsDropDownOpen, Mode = TwoWay, RelativeSource = {RelativeSource TemplatedParent} "ClickMode =" Press "/> <ContentPresenter HorizontalAlignment =" Left "x: name = "ContentSite" align = "Center" Content = "{TemplateBinding SelectionBoxItem}" ContentTemplate = "{TemplateBinding SelectionBoxItemTemplate}" inline = "{TemplateBinding inline}" IsHitTestVisible = "False "/> <Tex TBox Visibility = "Hidden" Margin = "2, 2, 2" x: Name = "PART_EditableTextBox" Style = "{x: null} "VerticalAlignment =" Center "Focusable =" True "IsReadOnly =" {TemplateBinding IsReadOnly} "Foreground =" Black "HorizontalAlignment =" Stretch "Background =" Azure "/> <! -- Text input box, displayed only when IsEditable is true --> <Popup IsOpen = "{TemplateBinding IsDropDownOpen}" Placement = "Bottom" x: name = "Popup" Focusable = "False" AllowsTransparency = "True" margin = "Slide"> <Grid MaxHeight = "{TemplateBinding MaxDropDownHeight}" MinWidth = "{TemplateBinding ActualWidth}" x: name = "DropDown" SnapsToDevicePixels = "True"> <Border x: Name = "DropDownBorder" Background = "WhiteSmoke" CornerRadius = "3, 3, 3, 3 "/> <ScrollViewer Margin =" 4, 6, 4,6 "SnapsToDevicePixels =" True "HorizontalScrollBarVisibility =" Auto "VerticalScrollBarVisibility =" Auto "CanContentScroll =" True "Foreground =" {StaticResource {x: Static SystemColors. activeCaptionTextBrushKey }}"> <StackPanel IsItemsHost = "True" KeyboardNavigation. directionalNavigation = "Contained"/> </ScrollViewer> </Grid> </Popup> </Grid> </Border> <ControlTemplate. triggers> <Trigger Property = "HasItems" Value = "false"> <Setter Property = "MinHeight" Value = "95" TargetName = "DropDownBorder"/> </Trigger> <Trigger property = "IsGrouping" Value = "true"> <Setter Property = "ScrollViewer. canContentScroll "Value =" false "/> </Trigger> <Trigger Property =" AllowsTransparency "SourceName =" Popup "Value =" true "> <Setter Property =" Margin "Value = "0, 2, 0, 0 "TargetName =" DropDownBorder "/> </Trigger> <Trigger Property =" IsEditable "Value =" true "> <Setter Property =" IsTabStop "Value =" false "/> <Setter Property = "Visibility" Value = "Visible" TargetName = "PART_EditableTextBox"/> <Setter Property = "Visibility" Value = "Hidden" TargetName = "ContentSite"/> </ trigger> </ControlTemplate. triggers> </ControlTemplate> </Setter. value> </Setter> </Style>

　　

I have never understood how Combobox is designed. Today I took the time to study it and finally understood it. It consists of three controls: ToggleButton, TextBox, and Popup,

ToggleButton: the entire control is a HorizontalAlignment = "Stretch" filled by ToggleButton. The ToggleButton is filled by a Rectangle, which sets the Border, Border, and background color of the Combobox, and then the Border with a width of 20, path is the drop-down button style, click the combobox drop-down button is actually click ToggleButton

 

TextBox: When IsEditable is True, the Textbox is displayed, and the Textbox is overwritten on ToggleButton. Note that you should set HorizontalAlignment = "Stretch" to overfill the Textbox, many settings on the Internet are Left, it is difficult to select TextBox, followed by setting Margin = ",", 22px from the right, so that the drop-down button cannot be blocked

Popup: used to display ComboboxItem

 

<ControlTemplate x: Key = "ComboBoxToggleButton" TargetType = "{x: Type ToggleButton}"> <Grid x: Name = "grid"> <Grid. columnDefinitions> <ColumnDefinition/> <ColumnDefinition Width = "20"/> </Grid. columnDefinitions> <Rectangle Grid. columnSpan = "2" HorizontalAlignment = "Stretch" x: name = "Rectangle" verticalignment = "Stretch" Width = "Auto" Height = "Auto" RadiusX = "3" RadiusY = "3" Fill = "LightBlue"/> <! -- Combobox control shell --> <Rectangle Grid. column = "0" HorizontalAlignment = "Stretch" VerticalAlignment = "Stretch" Width = "Auto" Height = "Auto" RadiusX = "3" RadiusY = "3" Fill = "Gray" /> <! -- Remove other parts of the drop-down button --> <Border Margin = "," Grid. column = "1" Background = "Red" Width = "Auto" CornerRadius = "3, 3, 3" x: Name = "drop_border"/> <Path Grid. column = "1" HorizontalAlignment = "Center" Width = "Auto" x: Name = "Arrow" verticalignment = "Center" Fill = "{x: null} "Data =" M0.5, 0.5 L3, 6.5 5.5, 0.5 "Stroke =" Black "Margin =, 5, 0 "Height =" 7 "StrokeThickness =" 2 "Stretch =" Fill "/> <! -- Border and Path are drop-down buttons --> </Grid> <ControlTemplate. triggers> <Trigger Property = "IsMouseOver" Value = "true"> <Setter TargetName = "drop_border" Property = "Background" Value = "White"/> </Trigger> </ controlTemplate. triggers> </ControlTemplate>
<ControlTemplate x: Key = "ComboBoxTextBox" TargetType = "{x: Type TextBox}"> <Border x: name = "PART_ContentHost" Focusable = "False" Background = "{TemplateBinding Background}"/> </ControlTemplate> <Style TargetType = "{x: type ComboBox} "> <Setter Property =" SnapsToDevicePixels "Value =" true "/> <Setter Property =" Template "> <Setter. value> <ControlTemplate TargetType = "{x: Type ComboBox}"> <Border BorderBrush = "Orang E "x: Name =" border "> <Grid x: Name =" grid "> <ToggleButton Template =" {StaticResource ComboBoxToggleButton} "x: name = "ToggleButton" Focusable = "false" IsChecked = "{Binding Path = IsDropDownOpen, Mode = TwoWay, relativeSource = {RelativeSource TemplatedParent} "ClickMode =" Press "/> <ContentPresenter placement =" Left "x: Name =" ContentSite "verticalignment =" Center "Content =" {TemplateBinding SelectionBox Item} "ContentTemplate =" {TemplateBinding SelectionBoxItemTemplate} "placement =" {TemplateBinding ItemTemplateSelector} "IsHitTestVisible =" False "/> <TextBox Visibility =" Hidden "Margin =" 2, 2, 22, 2 "x: Name =" PART_EditableTextBox "Style =" {x: null} "VerticalAlignment =" Center "Focusable =" True "IsReadOnly =" {TemplateBinding IsReadOnly} "Foreground =" Black "HorizontalAlignment =" Stretch "Background = "Azure"/> <! -- Text input box, displayed only when IsEditable is true --> <Popup IsOpen = "{TemplateBinding IsDropDownOpen}" Placement = "Bottom" x: name = "Popup" Focusable = "False" AllowsTransparency = "True" margin = "Slide"> <Grid MaxHeight = "{TemplateBinding MaxDropDownHeight}" MinWidth = "{TemplateBinding ActualWidth}" x: name = "DropDown" SnapsToDevicePixels = "True"> <Border x: Name = "DropDownBorder" Background = "WhiteSmoke" CornerRadius = "3, 3, 3, 3 "/> <ScrollViewer Margin =" 4, 6, 4,6 "SnapsToDevicePixels =" True "HorizontalScrollBarVisibility =" Auto "VerticalScrollBarVisibility =" Auto "CanContentScroll =" True "Foreground =" {StaticResource {x: Static SystemColors. activeCaptionTextBrushKey }}"> <StackPanel IsItemsHost = "True" KeyboardNavigation. directionalNavigation = "Contained"/> </ScrollViewer> </Grid> </Popup> </Grid> </Border> <ControlTemplate. triggers> <Trigger Property = "HasItems" Value = "false"> <Setter Property = "MinHeight" Value = "95" TargetName = "DropDownBorder"/> </Trigger> <Trigger property = "IsGrouping" Value = "true"> <Setter Property = "ScrollViewer. canContentScroll "Value =" false "/> </Trigger> <Trigger Property =" AllowsTransparency "SourceName =" Popup "Value =" true "> <Setter Property =" Margin "Value = "0, 2, 0, 0 "TargetName =" DropDownBorder "/> </Trigger> <Trigger Property =" IsEditable "Value =" true "> <Setter Property =" IsTabStop "Value =" false "/> <Setter Property = "Visibility" Value = "Visible" TargetName = "PART_EditableTextBox"/> <Setter Property = "Visibility" Value = "Hidden" TargetName = "ContentSite"/> </ trigger> </ControlTemplate. triggers> </ControlTemplate> </Setter. value> </Setter> </Style>