Controls show through ComboBox dropdown on Windows Phone 8.1

问题

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.

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

Thanks for any help.

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>

回答1:

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.

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>

来源：https://stackoverflow.com/questions/24577123/controls-show-through-combobox-dropdown-on-windows-phone-8-1