WPF Compobox - how to display entire content of the two items without scrolling?

Question

The following Combobox in WPF project needs to always have exactly two Rectangles of heights 256 and 36 in each item respectively. And when user clicks on the dropdown button of the Combobox I would like to have it display both ComboboxItems without user having to scroll.

Question: How can we achieve it? Currently it displays only first ComboboxItem (Aqua color rectangle inside), and you have to scroll to get to see the second ComboboxItem (YellowGreen color rectangle inside). I have tried setting ScrollViewer.VerticalScrollBarVisibility="Hidden" on combo box but that makes it even worst since it does not even allow to show the second item.

XANL:

<Window x:Class="Wpf_TestApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_TestApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="569.455" Width="800">
    <Grid>
        <StackPanel Margin="5" Width="15">
                <ComboBox DockPanel.Dock="Top" Width="25">
                    <DockPanel>
                        <ComboBoxItem DockPanel.Dock="Top">
                            <StackPanel Width="180" Height="260">
                                <Rectangle x:Name="MyRectangle" Fill="Aqua" Width="176" Height="256"/>
                            </StackPanel>
                        </ComboBoxItem>
                    </DockPanel>
                    <DockPanel>
                        <ComboBoxItem DockPanel.Dock="Top">
                            <StackPanel Width="180" Height="38">
                                <TextBlock Text="Second Item:" />
                                <Rectangle x:Name="MyOtherRectangle" Fill="YellowGreen" Width="176" Height="36"/>
                            </StackPanel>
                        </ComboBoxItem>
                    </DockPanel>
                </ComboBox>
        </StackPanel>
    </Grid>
</Window>

Screenshot of the above combobox:

Display when user first clicks on dropdown of the combobox:

User has to scroll to get to the second item of the combobox:

Answer 1

You can use dependency property MaxDropDownHeight of ComboBox as shown below to display both combo box items in the drop down without having to scroll,

        <ComboBox DockPanel.Dock="Top" Width="25" MaxDropDownHeight="Auto">

I have tested your code with 320 Height and it works perfectly fine. If you need to add more items, you can increase the MaxDropDownHeight value accordingly.