通过 Windows Phone 8.1 上的 ComboBox 下拉菜单显示控件

Question

我刚刚开始使用 VS2013 和 Windows Phone SDK 8 处理 XAML。我有一个 HubSection，在网格中包含几个 ComboBox 控件。当您打开 ComboBox 下拉菜单时，它会在下拉菜单中显示应位于其后面的控件。

关于如何解决此问题的任何建议？即使我可以单独打开下拉菜单（我还有另一个包含 13 个项目的 ComboBox，如果打开它会自动全屏显示）。

感谢您的帮助。

screenshot http://i112.photobucket.com/albums/n182/capellanx/wp_ss_20140704_0002_zps877f0a6a.jpg

<HubSection x:Uid="CharacterInfo" Header="Character Information" DataContext="{Binding Groups}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
            <DataTemplate>
                <Grid>
                    <TextBlock HorizontalAlignment="Left" Margin="10,0,0,0" TextWrapping="Wrap" Text="Character Name:" VerticalAlignment="Top" FontSize="18"/>
                    <TextBox HorizontalAlignment="Left" Margin="10,20,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="321" Height="10"/>

                    <TextBlock HorizontalAlignment="Left" Margin="10,60,0,0" TextWrapping="Wrap" Text="Breed:" VerticalAlignment="Top" FontSize="18"/>
                    <ComboBox HorizontalAlignment="Left" Margin="10,80,0,0" VerticalAlignment="Top" Width="321">
                        <ComboBoxItem Tag="HOMID" IsSelected="True">Homid</ComboBoxItem>
                        <ComboBoxItem Tag="METIS">Metis</ComboBoxItem>
                        <ComboBoxItem Tag="LUPUS">Lupus</ComboBoxItem>
                    </ComboBox>

                    <TextBlock HorizontalAlignment="Left" Margin="10,150,0,0" TextWrapping="Wrap" Text="Auspice:" VerticalAlignment="Top" FontSize="18"/>
                    <ComboBox HorizontalAlignment="Left" Margin="10,170,0,0" VerticalAlignment="Top" Width="321">
                        <ComboBoxItem Tag="RAGABASH" IsSelected="True">Ragabash (New Moon)</ComboBoxItem>
                        <ComboBoxItem Tag="THEURGE">Theurge (Crescent Moon)</ComboBoxItem>
                        <ComboBoxItem Tag="PHILODOX">Philodox (Half Moon)</ComboBoxItem>
                        <ComboBoxItem Tag="GALLIARD">Galliard (Gibbous Moon)</ComboBoxItem>
                        <ComboBoxItem Tag="AHROUN">Ahroun (Full Moon)</ComboBoxItem>
                    </ComboBox>

                    <TextBlock HorizontalAlignment="Left" Margin="10,240,0,0" TextWrapping="Wrap" Text="Tribe:" VerticalAlignment="Top" FontSize="18"/>
                    <ComboBox HorizontalAlignment="Left" Margin="10,260,0,0" VerticalAlignment="Top" Width="321">
                        <ComboBoxItem Tag="BLACKFURIES" IsSelected="True">Black Furies</ComboBoxItem>
                        <ComboBoxItem Tag="BONEGNAWERS">Bone Gnawers</ComboBoxItem>
                        <ComboBoxItem Tag="CHILDRENOFGAIA">Children of Gaia</ComboBoxItem>
                        <ComboBoxItem Tag="FIANNA">Fianna</ComboBoxItem>
                        <ComboBoxItem Tag="GETOFFENRIS">Get of Fenris</ComboBoxItem>
                        <ComboBoxItem Tag="GLASSWALKERS">Glass Walkers</ComboBoxItem>
                        <ComboBoxItem Tag="REDTALONS">Red Talons</ComboBoxItem>
                        <ComboBoxItem Tag="SHADOWLORDS">Shadow Lords</ComboBoxItem>
                        <ComboBoxItem Tag="SILENTSTRIDERS">Silent Striders</ComboBoxItem>
                        <ComboBoxItem Tag="SILVERFANGS">Silver Fangs</ComboBoxItem>
                        <ComboBoxItem Tag="STARGAZERS">Stargazers</ComboBoxItem>
                        <ComboBoxItem Tag="UKTENA">Uktena</ComboBoxItem>
                        <ComboBoxItem Tag="WENDIGO">Wendigo</ComboBoxItem>
                    </ComboBox>
                </Grid>
            </DataTemplate>
        </HubSection>

Answer 1

问题在于控件位于网格内，这会导致控件相互重叠，除非您使用不同的行/列。但改变这一点的最简单方法是只使用 StackPanel，它会导致元素自动水平或垂直堆叠。这意味着您无需使用手动边距和对齐方式来获得漂亮的布局。

这是修改后的 XAML，我还在周围添加了一个 ScrollViewer 以防止 ComboBox 扩展到视图之外：

<HubSection x:Uid="CharacterInfo" Header="Character Information" DataContext="{Binding Groups}">
    <DataTemplate>
        <ScrollViewer>
            <StackPanel>
                <TextBlock TextWrapping="Wrap" Text="Character Name:" FontSize="18"/>
                <TextBox TextWrapping="Wrap" Text="TextBox"/>

                <TextBlock TextWrapping="Wrap" Text="Breed:" FontSize="18"/>
                <ComboBox>
                    <ComboBoxItem Tag="HOMID" IsSelected="True">Homid</ComboBoxItem>
                    <ComboBoxItem Tag="METIS">Metis</ComboBoxItem>
                    <ComboBoxItem Tag="LUPUS">Lupus</ComboBoxItem>
                </ComboBox>

                <TextBlock TextWrapping="Wrap" Text="Auspice:" FontSize="18"/>
                <ComboBox>
                    <ComboBoxItem Tag="RAGABASH" IsSelected="True">Ragabash (New Moon)</ComboBoxItem>
                    <ComboBoxItem Tag="THEURGE">Theurge (Crescent Moon)</ComboBoxItem>
                    <ComboBoxItem Tag="PHILODOX">Philodox (Half Moon)</ComboBoxItem>
                    <ComboBoxItem Tag="GALLIARD">Galliard (Gibbous Moon)</ComboBoxItem>
                    <ComboBoxItem Tag="AHROUN">Ahroun (Full Moon)</ComboBoxItem>
                </ComboBox>

                <TextBlock TextWrapping="Wrap" Text="Tribe:" FontSize="18"/>
                <ComboBox>
                    <ComboBoxItem Tag="BLACKFURIES" IsSelected="True">Black Furies</ComboBoxItem>
                    <ComboBoxItem Tag="BONEGNAWERS">Bone Gnawers</ComboBoxItem>
                    <ComboBoxItem Tag="CHILDRENOFGAIA">Children of Gaia</ComboBoxItem>
                    <ComboBoxItem Tag="FIANNA">Fianna</ComboBoxItem>
                    <ComboBoxItem Tag="GETOFFENRIS">Get of Fenris</ComboBoxItem>
                    <ComboBoxItem Tag="GLASSWALKERS">Glass Walkers</ComboBoxItem>
                    <ComboBoxItem Tag="REDTALONS">Red Talons</ComboBoxItem>
                    <ComboBoxItem Tag="SHADOWLORDS">Shadow Lords</ComboBoxItem>
                    <ComboBoxItem Tag="SILENTSTRIDERS">Silent Striders</ComboBoxItem>
                    <ComboBoxItem Tag="SILVERFANGS">Silver Fangs</ComboBoxItem>
                    <ComboBoxItem Tag="STARGAZERS">Stargazers</ComboBoxItem>
                    <ComboBoxItem Tag="UKTENA">Uktena</ComboBoxItem>
                    <ComboBoxItem Tag="WENDIGO">Wendigo</ComboBoxItem>
                </ComboBox>
            </StackPanel>
        </ScrollViewer>
    </DataTemplate>
</HubSection>