c# – custom combobox in wpf Application

c# – custom combobox in wpf Application

I also liked the format and decided to reproduce it. Please find the XAML below. Hope it helps someone…

<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>

Check out this link:

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

This is a blog with example code on how to make a custom Combobox. The custom combobox he is making looks very much like the one you need. So I think this will be very useful to you.

c# – custom combobox in wpf Application

Here is a complete style for WPF ComboBox. It is also easy to customize.

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

The codes are quite long so I will not post them all here. However, here is the base ComboBox style:

<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>

Leave a Reply

Your email address will not be published.