Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: 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
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 at 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 at 21-Mar-13 13:17pm
   
I played with your xaml and updated my answer, see above
D-Kishore at 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 at 22-Mar-13 8:22am
   
Try to remove StaysOpen from Popup
D-Kishore at 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 at 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 at 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)



Advertise | Privacy | Mobile
Web02 | 2.8.1411022.1 | Last Updated 21 Mar 2013
Copyright © CodeProject, 1999-2014
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