Click here to Skip to main content
12,076,727 members (44,867 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: C# WPF C#4.0 combobox
In my WPF application I have two projects main project and User control project.
In usercontrol library project I am having one usercontrol, that user control having one ComboBox.

I am binding database to this combobox more than 1000 records.For this combo box i am applying the style. So its taking more time dropdown.

If I remove the style Combobox droping down with in Millie seconds.
This is my code
Exportusercontrol.xaml
<usercontrol.resources>
        <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070" />
 
        <Geometry x:Key="DownArrowGeometry">M 0,1 C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1 z</Geometry>
            <Style x:Key="ComboBoxToggleButton150" TargetType="ToggleButton">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="IsTabStop" Value="false" />
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <chrome:ButtonChrome x:Name="Chrome"
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    removed="{TemplateBinding Background}"
                                    CornerRadius="0"
                                    RenderEnabled="{TemplateBinding IsEnabled}"
                                    RenderMouseOver="{Binding IsMouseOver, ElementName=PART_DropDownButton}"
                                    RenderNormal="False"
                                    RenderPressed="{Binding IsPressed, ElementName=PART_DropDownButton}"
                                    SnapsToDevicePixels="True">
                            <Grid HorizontalAlignment="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                                <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="3,0,3,0" VerticalAlignment="Center" />
                            </Grid>
                        </chrome:ButtonChrome>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="RenderPressed" TargetName="Chrome" Value="True" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 
        <Style x:Key="ComboBoxStyle" TargetType="ComboBox">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
            <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
            <Setter Property="Padding" Value="2" />
            <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
            <Setter Property="ScrollViewer.PanningMode" Value="Both" />
            <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid x:Name="MainGrid" SnapsToDevicePixels="true">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0" />
                            </Grid.ColumnDefinitions>
 
                            <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" StaysOpen="False" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                                <Grid MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
                                    <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" removed="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
                                        <ScrollViewer x:Name="DropDownScrollViewer">
                                            <Grid RenderOptions.ClearTypeHint="Enabled">
                                                <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                                    <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}" />
                                                </Canvas>
                                                <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                            </Grid>
                                        </ScrollViewer>
                                    </Border>
                                </Grid>
                            </Popup>
 
                            <Border Grid.ColumnSpan="2" removed="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
                            
                            <TextBox x:Name="PART_EditableTextBox" Text="{TemplateBinding Text}" IsReadOnly="False" BorderThickness="0" removed="Transparent" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Width="170" />
                            <ToggleButton x:Name="PART_DropDownButton" 
                                          Grid.Column="1" 
                                          BorderBrush="{TemplateBinding BorderBrush}" 
                                          removed="{TemplateBinding Background}" 
                                          IsChecked="{Binding Path=IsDropDownOpen,Mode=Default, RelativeSource={RelativeSource TemplatedParent}}" 
                                          Style="{StaticResource ComboBoxToggleButton150}"
                                IsHitTestVisible="{Binding Path=IsDropDownOpen,RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}" ClickMode="Release"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEditable"
               Value="true">
                                <Setter Property="IsTabStop" Value="false"/>
                                <Setter TargetName="PART_EditableTextBox" Property="Visibility"  Value="Visible"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
</usercontrol.resources>
<grid>
<ComboBox Style="{StaticResource ComboBoxStyle}" Height="20" HorizontalAlignment="Left" Margin="60,5,499,5" Name="cmbDataBase" VerticalAlignment="Top" Width="150" FontFamily="Verdana" FontWeight="Normal" SelectedIndex="0" IsEditable="True" SelectionChanged="cmbDataBase_SelectionChanged" IsEnabled="True">
                                            <ComboBox.Resources>
                                                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFCF00"/>
                                            </ComboBox.Resources>
                                            <ComboBox.ItemContainerStyle>
                                                <Style TargetType="{x:Type ComboBoxItem}">
                                                    <Style.Triggers>
                                                        <Trigger Property="IsMouseOver" Value="true">
                                                            <Setter Property="BorderBrush" Value="#FFCF00" />
                                                            <Setter Property="BorderThickness" Value="0" />
                                                            <Setter Property="Foreground" Value="Black" />
                                                        </Trigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </ComboBox.ItemContainerStyle>
                                        </ComboBox>
</grid>

ExportUserControl.cs
I am binding like this

DataTable dtZipList = new DataTable();
dtZipList = objIED_DAL.GetListOfZip(ConnectionStr, selectedCountry, selectedState, selectedCounty, selectedaggregate).Tables[0];
string Zip = string.Empty;
  if (dtZipList.Rows.Count > 0)
{
  foreach (DataRow dr in dtZipList.Rows)
 {
  Zip = dr["ZIP_CODE"].ToString();
                            
  cmbDataBase.Items.Add(Zip);
 }
}

Finally I am accessing this control in my mainwindow project.


So my Problem is how can achieve this to load quickly if we apply the styles.
Please provide your valuable solutions.
Posted 19-Mar-13 17:26pm
D-Kishore4.1K
Edited 19-Mar-13 23:18pm
v13
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 3

try this one:
<Window.Resources>
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070" />
 
    <Geometry x:Key="DownArrowGeometry">M 0,1 C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1 z</Geometry>
    <Style x:Key="ComboBoxToggleButton150" TargetType="ToggleButton">
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <chrome:ButtonChrome x:Name="Chrome"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                removed="{TemplateBinding Background}"
                                RenderMouseOver="{Binding IsMouseOver, ElementName=PART_DropDownButton}"
                                RenderPressed="{Binding IsPressed, ElementName=PART_DropDownButton}"
                                SnapsToDevicePixels="True">
                        <Grid HorizontalAlignment="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                            <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="3,0,3,0" VerticalAlignment="Center" />
                        </Grid>
                    </chrome:ButtonChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="RenderPressed" TargetName="Chrome" Value="True" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ComboBoxStyle" TargetType="ComboBox">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
        <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="Padding" Value="2" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
        <Setter Property="ScrollViewer.PanningMode" Value="Both" />
        <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid x:Name="MainGrid" SnapsToDevicePixels="true">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0" />
                        </Grid.ColumnDefinitions>
 
                        <Popup x:Name="PART_Popup" AllowsTransparency="False" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" StaysOpen="False" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                            <Grid MinWidth="{Binding ActualWidth, ElementName=MainGrid}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}"
                                        BorderThickness="1" removed="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" >
                                    <ScrollViewer x:Name="DropDownScrollViewer" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
                                        <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                    </ScrollViewer>
                                </Border>
                            </Grid>
                        </Popup>
 
                        <Border Grid.ColumnSpan="2" removed="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
 
                        <TextBox x:Name="PART_EditableTextBox" Text="{TemplateBinding Text}" IsReadOnly="False" BorderThickness="0"
                                 removed="Transparent" Margin="{TemplateBinding Padding}"
                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                 HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Width="170" />
                        <ToggleButton x:Name="PART_DropDownButton"
                                      Grid.Column="1"
                                      BorderBrush="{TemplateBinding BorderBrush}"
                                      removed="{TemplateBinding Background}"
                                      IsChecked="{Binding Path=IsDropDownOpen,Mode=Default, RelativeSource={RelativeSource TemplatedParent}}"
                                      Style="{StaticResource ComboBoxToggleButton150}"
                                      ClickMode="Release"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEditable" Value="true">
                            <Setter Property="IsTabStop" Value="false"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility"  Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <Style x:Key="ComboBoxItemStyle" TargetType="{x:Type ComboBoxItem}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="BorderBrush" Value="#FFCF00" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="Foreground" Value="Black" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
 
<Grid removed="Green">
    <ComboBox x:Name="cmb" Style="{StaticResource ComboBoxStyle}" Height="20" HorizontalAlignment="Left" ItemContainerStyle="{StaticResource ComboBoxItemStyle}"
              VerticalAlignment="Top" Width="150" FontFamily="Verdana" FontWeight="Normal" SelectedIndex="0" IsEditable="True" IsEnabled="True" >
        <ComboBox.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFCF00"/>
        </ComboBox.Resources>
        <ComboBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel />
            </ItemsPanelTemplate>
        </ComboBox.ItemsPanel>
    </ComboBox>
</Grid>
Note, I removed IsHitTestVisible for ToggleButton just to doesn't search for converter, insert it back.
  Permalink  
v4
Comments
D-Kishore 20-Mar-13 23:17pm
   
Dear Irina,

I did what you said, its displaying fastly, but its taking entire width and its loading 2 times.
first time its displaying left corner of the application than its occupied the entire application.

And there is no removed property for ScrollViewer.
here I am confused, can you please explain with full code.
Irina Pykhova 21-Mar-13 13:17pm
   
I played with your xaml and updated my answer, see above
D-Kishore 22-Mar-13 5:20am
   
Thank you so much, I solved this issue yesterday night.
Mine 5+.

One more thing when I use the this styles for combo, if the combo contains more than 100 items will get the verticalscroll bar. Here if i move scrollbar up and down at this time if i click on the combobox togglebutton items are drop downed 2nd time(actually if i click toggele button it has to collaps).
Irina Pykhova 22-Mar-13 8:22am
   
Try to remove StaysOpen from Popup
D-Kishore 26-Mar-13 2:23am
   
Thank you Irina
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

This is not really binding -

foreach (DataRow dr in dtZipList.Rows)
{
 Zip = dr["ZIP_CODE"].ToString();
 
 cmbDataBase.Items.Add(Zip);
}

You are basially doing this the 'old' way by running a loop and adding to the dropdown.

Create and ObservableCollection[^] of these items and the directly set the itemsource of the dropdown to this collection.
  Permalink  
Comments
D-Kishore 19-Mar-13 22:50pm
   
But If I remove the style everything working fine Abhinav.

And also i modified the code like below.

ObservableCollection sampleData = new ObservableCollection();
DataTable dtZipList = new DataTable();
dtZipList = objIED_DAL.GetListOfZip(ConnectionStr, selectedCountry, selectedState, selectedCounty, selectedaggregate).Tables[0];
string Zip = string.Empty;
if (dtZipList.Rows.Count > 0)
{
foreach (DataRow dr in dtZipList.Rows)
{
Zip = dr["ZIP_CODE"].ToString();
sampleData.Add(Zip);
}
}
cmbDataBase.ItemsSource = sampleData;

Even though when I click the combobox its taking more time to popup.
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

Place your style code in resource dictionary than access it in your usecontrol.
  Permalink  
Comments
D-Kishore 19-Mar-13 23:33pm
   
Can you please explain, how can I access resource dictionary in usercontrol

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.160212.1 | Last Updated 21 Mar 2013
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100