CODEWITHSUNDEEP
c#wpfwindows-7comboboxcustomization
ganesh
ganesh

Reputation: 899

custom combobox in wpf Application

Im new to WPF Application. I need to customize my combobox like this image.SAMPLE IMAGE

I have tried this example 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>

This output works like textbox.Please help me guys!

Upvotes: 33

Views: 106909

Answers (3)

olonge
olonge

Reputation: 1279

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

Upvotes: 77

Haapavuo
Haapavuo

Reputation: 354

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>

Upvotes: 3

Enrico
Enrico

Reputation: 621

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.

Upvotes: 7

Related Questions