如何将图像控件和列表控件添加到数据透视项？答案

【问题标题】：How to add an image control and a list control to a pivot item?如何将图像控件和列表控件添加到数据透视项？
【发布时间】：2014-07-26 20:47:45
【问题描述】：

我对 Windows Phone 开发完全不熟悉，并决定从 Windows Phone 8 Pivot 应用程序开始。所以我有一个带有枢轴的页面，其中包含两个枢轴项目。在其中一个上，我想在图像下方添加一个图像控件和一个 ListBox 控件，我应该使用网格还是堆栈面板？有人知道怎么做吗？

【问题讨论】：

标签： c# xaml windows-phone-8

【解决方案1】：

从头开始，非常简单。首先只需在 Grid(LayoutRoot Grid) 中添加一个枢轴。

在 Pivot Item 内部，创建一个新网格，因为您要在其中放入两个控件，PivotItem 只能初始化一个内容，因此创建一个 MainGrid。

从代码中可以看出，将 MainGrid 分成两行。在第一行，放置您的图像控件。

在第二行，放置一个新的网格（ListboxGrid），在第一行设置新的网格，并在其中放置一个列表框。在这种情况下，我建议您不要使用 stackpanel，因为 Grid 会根据列表框项目扩展其高度，但 stackpanel 不会。因此，当您使用 StackPanel 时，您将很难在 ListBox 项目中滚动。在这里，您可以使用代码，

<Grid x:Name="LayoutRoot" Background="Transparent">
    <phone:Pivot >
        <phone:PivotItem Header="item1">
            <Grid x:Name="MainGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Image Grid.Row="0" Height="300"/>
                <Grid Grid.Row="1" x:Name="ListboxGrid">
                    <ListBox>
                        <ListBoxItem >
                            <TextBlock Text="list1"/>
                        </ListBoxItem>
                        <ListBoxItem >
                            <TextBlock Text="list2"/>
                        </ListBoxItem>
                    </ListBox>
                </Grid>
            </Grid>
        </phone:PivotItem>
    </phone:Pivot>
</Grid>

【讨论】：

【解决方案2】：

我会同时使用 Hubert。通过单击 Visual Studio 中的 xaml 文件来习惯使用 XAML 设计器。

在我看来，Grid 基本上是您的 HTML 表格，但有一些不同之处。所以用它来精确对齐你的元素。

当每个子项的可见性设置为 Visibility="Collapsed" 时，堆栈面板将折叠项。

<Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Pivot Control-->
        <phone:Pivot Title="MY APPLICATION">
            <phone:PivotItem Header="first">
                <Grid>
                    <StackPanel>
                        <Image></Image>
                        <ListBox></ListBox>
                    </StackPanel>
                </Grid>
            </phone:PivotItem>
        </phone:Pivot>
</Grid>

【讨论】：