CODEWITHSUNDEEP
c#.netwpfxaml
Henry Otuadinma
Henry Otuadinma

Reputation: 49

How to make a listbox within a ComboBox vertically Scrollable in WPF

Please Gurus, i have ComboBoxes in my wpf aplication and was able to add ListBoxes containing CheckBoxes into them so that a user can select multiple items from a category. but the problem am having now is:

** The ListBoxes could not display the whole CheckBoxes as they refused to be scrollable despite setting the height to Auto.

THANKS IN ADVANCE FOR YOUR TIME IN CONSIDERING THIS QUESTION

*The styling below is for one of the CombBoxes since s ame step applies to the rest *

          <ComboBox Height="23" HorizontalAlignment="Left" Margin="20,10,0,0" Name="comboBox1" VerticalAlignment="Top" Width="120" Text="Hamburger & Sandwiches" StaysOpenOnEdit="True">

     <ListBox BorderThickness="0,0,2,0" ScrollViewer.VerticalScrollBarVisibility="Visible"
                SelectionMode="Multiple" Background="#E3418D00" Focusable="False" SnapsToDevicePixels="True"> 
                    <ListBox.BorderBrush>
                    <SolidColorBrush />
                </ListBox.BorderBrush>
                <CheckBox Foreground="Cyan" FontFamily="Lucida Sans" Content="Chicken Wrap" ClickMode="Release" BorderBrush="#FFF58B09" Name="chkChickenWrap">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkRibeyeSteakWrap" Content="Ribeye Steak Wrap" FontFamily="Lucida Sans" Foreground="Cyan" BorderBrush="Orange">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkShreddedBeefWrap" Foreground="Cyan" FontFamily="Lucida Sans" Content="Shredded Beef Wrap" BorderBrush="Orange">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkCheeseburgerParadiseWrap" Foreground="Cyan" FontFamily="Lucida Sans" BorderBrush="Orange" Content="Cheeseburger Paradise Wrap">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkVeggieWrap" BorderBrush="Orange" Content="Veggie Wrap" Foreground="Cyan" FontFamily="Lucida Sans">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkChiliBurger" Foreground="Cyan" FontFamily="Lucida Sans" Content="Chili Burger" BorderBrush="Orange">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkTiajuanaTorpedo" BorderBrush="Orange" Content="Tiajuana Torpedo" FontFamily="Lucida Sans" Foreground="Cyan">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Foreground="Cyan" FontFamily="Lucida Sans" Content="Stuffed Burger" BorderBrush="Orange" Name="chkStuffedBurger">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkCheeseBurger" BorderBrush="Orange" Content="Cheese Burger" Foreground="Cyan" FontFamily="Lucida Sans">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Foreground="Cyan" FontFamily="Lucida Sans" Content="Patty Melt" BorderBrush="Orange" Name="chkPattyMelt">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Foreground="Cyan" FontFamily="Lucida Sans" Content="Harry's Big Barn Burger" BorderBrush="Orange" Name="chkHarrysBigBarnBurger">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkTheReuban" BorderBrush="Orange" Content="The Reuban" FontFamily="Lucida Sans" Foreground="Cyan">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkBBQBeefSandwich" Foreground="Cyan" FontFamily="Lucida Sans" Content="BBQ Beef Sandwich" BorderBrush="Orange">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkSteakSandwich" BorderBrush="Orange" Content="Steak Sandwich" FontFamily="Lucida Sans" Foreground="Cyan">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkFrenchDip" BorderBrush="Orange" Content="French Dip" FontFamily="Lucid sans" Foreground="Cyan">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Foreground="Cyan" FontFamily="Lucida Sans" Content="Chili Dog" BorderBrush="Orange" Name="chkChiliDog">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkChickenFriedSteakSandwich" BorderBrush="Orange" Content="Chicken Fried Steak Sandwich" FontFamily="Lucida Sans" Foreground="Cyan">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkClubSandwich" BorderBrush="Orange" Content="Club Sandwich" Foreground="Cyan" FontFamily="Lucida Sans">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkCajunCatfishSandwich" Foreground="Cyan" FontFamily="Lucida Sans" Content="Cajun Catfish Sandwich" BorderBrush="Orange">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkEggAndCucumberTeaSandwich" BorderBrush="Orange" Content="Egg &amp; Cucumber Tea Sandwiches" FontFamily="Lucid sans" Foreground="Cyan">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
                <CheckBox Name="chkSmokedSalmonCrosini" BorderBrush="Orange" Content="Smoked Salmon Crosini Recipe" FontFamily="Lucida Sans" Foreground="Cyan">
                    <CheckBox.Background>
                        <SolidColorBrush />
                    </CheckBox.Background>
                </CheckBox>
            </ListBox>
        </ComboBox>

Upvotes: 1

Views: 453

Answers (2)

Claudiu Constantin
Claudiu Constantin

Reputation: 2228

In order to vertically scroll through ListBox items you may want to specify a maximum Height for items' panel.

This piece of code will do exactly what you want:

<ComboBox Height="23" HorizontalAlignment="Left" Margin="20,10,0,0" Name="comboBox1" VerticalAlignment="Top" Width="120" Text="Hamburger and Sandwiches">
    <ListBox BorderThickness="0,0,2,0" ScrollViewer.VerticalScrollBarVisibility="Visible"
        SelectionMode="Multiple" Background="#E3418D00" Focusable="False" SnapsToDevicePixels="True">

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" MaxHeight="200"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBox.BorderBrush>
            <SolidColorBrush />
        </ListBox.BorderBrush>
        <CheckBox Foreground="Cyan" FontFamily="Lucida Sans" Content="Chicken Wrap" ClickMode="Release" BorderBrush="#FFF58B09" Name="chkChickenWrap">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkRibeyeSteakWrap" Content="Ribeye Steak Wrap" FontFamily="Lucida Sans" Foreground="Cyan" BorderBrush="Orange">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkShreddedBeefWrap" Foreground="Cyan" FontFamily="Lucida Sans" Content="Shredded Beef Wrap" BorderBrush="Orange">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkCheeseburgerParadiseWrap" Foreground="Cyan" FontFamily="Lucida Sans" BorderBrush="Orange" Content="Cheeseburger Paradise Wrap">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkVeggieWrap" BorderBrush="Orange" Content="Veggie Wrap" Foreground="Cyan" FontFamily="Lucida Sans">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkChiliBurger" Foreground="Cyan" FontFamily="Lucida Sans" Content="Chili Burger" BorderBrush="Orange">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkTiajuanaTorpedo" BorderBrush="Orange" Content="Tiajuana Torpedo" FontFamily="Lucida Sans" Foreground="Cyan">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Foreground="Cyan" FontFamily="Lucida Sans" Content="Stuffed Burger" BorderBrush="Orange" Name="chkStuffedBurger">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkCheeseBurger" BorderBrush="Orange" Content="Cheese Burger" Foreground="Cyan" FontFamily="Lucida Sans">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Foreground="Cyan" FontFamily="Lucida Sans" Content="Patty Melt" BorderBrush="Orange" Name="chkPattyMelt">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Foreground="Cyan" FontFamily="Lucida Sans" Content="Harry's Big Barn Burger" BorderBrush="Orange" Name="chkHarrysBigBarnBurger">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkTheReuban" BorderBrush="Orange" Content="The Reuban" FontFamily="Lucida Sans" Foreground="Cyan">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkBBQBeefSandwich" Foreground="Cyan" FontFamily="Lucida Sans" Content="BBQ Beef Sandwich" BorderBrush="Orange">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkSteakSandwich" BorderBrush="Orange" Content="Steak Sandwich" FontFamily="Lucida Sans" Foreground="Cyan">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkFrenchDip" BorderBrush="Orange" Content="French Dip" FontFamily="Lucid sans" Foreground="Cyan">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Foreground="Cyan" FontFamily="Lucida Sans" Content="Chili Dog" BorderBrush="Orange" Name="chkChiliDog">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkChickenFriedSteakSandwich" BorderBrush="Orange" Content="Chicken Fried Steak Sandwich" FontFamily="Lucida Sans" Foreground="Cyan">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkClubSandwich" BorderBrush="Orange" Content="Club Sandwich" Foreground="Cyan" FontFamily="Lucida Sans">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkCajunCatfishSandwich" Foreground="Cyan" FontFamily="Lucida Sans" Content="Cajun Catfish Sandwich" BorderBrush="Orange">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkEggAndCucumberTeaSandwich" BorderBrush="Orange" Content="Egg &amp; Cucumber Tea Sandwiches" FontFamily="Lucid sans" Foreground="Cyan">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
        <CheckBox Name="chkSmokedSalmonCrosini" BorderBrush="Orange" Content="Smoked Salmon Crosini Recipe" FontFamily="Lucida Sans" Foreground="Cyan">
            <CheckBox.Background>
                <SolidColorBrush />
            </CheckBox.Background>
        </CheckBox>
    </ListBox>
</ComboBox>

Upvotes: 1

Nikhil Agrawal
Nikhil Agrawal

Reputation: 48568

Use Scrollviewer.

Put all your scrollable controls inside scrollviewer.

Upvotes: 1

Related Questions