When using Style for combobox, its taking more time to dropdown In WPF(C#)

Question

4.00/5 (1 vote)

See more:

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

XML

<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

C#

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 16:26pm

D-Kishore

Updated 19-Mar-13 22:18pm

v13

Add a Solution

3 solutions

Solution 1

This is not really binding -

C#

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.

Posted 19-Mar-13 16:43pm

Abhinav S

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<string> sampleData = new ObservableCollection<string>();
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.

Solution 2

Place your style code in resource dictionary than access it in your usecontrol.

Posted 19-Mar-13 17:31pm

dmunisubbu

Comments

D-Kishore 19-Mar-13 23:33pm

Can you please explain, how can I access resource dictionary in usercontrol

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Irina Pykhova · Accepted Answer · 2013-03-19T23:43:00

try this one:

HTML

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