Использование Canvas в шаблоне ComboBox по умолчанию

Question

Я работаю над шаблоном ComboBox в последнее время. И я обнаружил, что в шаблоне ComboBox по умолчанию есть следующие коды:

<ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}">
        <Grid x:Name="templateRoot" 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}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                <Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
                    <Border x:Name="dropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="Red">
                        <ScrollViewer x:Name="DropDownScrollViewer" CanContentScroll="False">
                            <Grid x:Name="grid">
                                <Canvas x:Name="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>
                </Themes:SystemDropShadowChrome>
            </Popup>

Сначала я не понял, для чего использовался Canvas, поэтому я попытался удалить Canvas и поместить Прямоугольник прямо в метку сетки. Затем произошла странная вещь. Когда я запускаю проект, всплывающее окно горизонтально заполняет экран следующим образом. Всплывающее окно заполнило ширину экрана

Так что я сразу понял, что Canvas использовался для поиска всплывающего окна, чтобы его верхний левый угол мог быть выровнен с левым нижним углом ToggleButton.

Но я не понимаю, почему всплывающее окно так же широко, как и мой экран. Теоретически, холст должен просто найти свои дочерние элементы вместо того, чтобы ограничивать их размеры (если для ClipToBounds не установлено значение true). Так почему в этом случае, почему при добавлении Canvas, ширина всплывающего окна может контролироваться под шириной ToggleButton.

И я уже пытался изменить ширину прямоугольника на конкретную c номера. Поэтому я не думаю, что речь идет о фактической ширине привязки.

<Rectangle x:Name="opaqueRect" Fill="{Binding Background, ElementName=dropDownBorder}" Height="500" Width="1000"/>

Ширина всплывающего окна больше ширины комбинированного списка

Может кто-нибудь сказать мне, что контролирует ширина прямоугольника и отсечение его ширины в этом случае. Заранее спасибо.