控件通过 Windows Phone 8.1 上的 ComboBox 下拉菜单显示 [英] Controls show through ComboBox dropdown on Windows Phone 8.1

问题描述

我刚刚开始使用 VS2013 和 Windows Phone SDK 8 使用 XAML.我有一个 HubSection，在网格中有一些 ComboBox 控件.当您打开 ComboBox 下拉菜单时，它会在下拉菜单中显示应该在它后面的控件.

I'm just getting started working with XAML using VS2013 and Windows Phone SDK 8. I've got a HubSection with a few ComboBox controls in a Grid. When you open a ComboBox dropdown, it shows controls in the dropdown that should be behind it.

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

Any suggestions on how to fix this? Even if I can open the dropdown separately (I have another ComboBox with 13 items that will show full-screen automatically if it is opened).

感谢您的帮助.

截图 http://i112.photobucket.com/albums/albumscapellanx/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>

推荐答案

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

The problem is that the Controls are inside a Grid, this causes the Controls to overlay each other unless you use different rows/columns. But the easiest way to change this is to just use a StackPanel, which causes the elements to automatically stack horizontally or vertically. This means you don't need to use manual margins and alignments to get a nice layout.

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

Here is the modified XAML, I also added a ScrollViewer around to incase the ComboBox expands out of the view:

<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>

这篇关于控件通过 Windows Phone 8.1 上的 ComboBox 下拉菜单显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！