Windows phone 水平列表框图像中心锁定

Question

我有一个带有图像作为项目的ListBox，我需要每个图像占据屏幕的整个宽度，并且要居中锁定（就像 android 中的 ViewPager）

这是我目前所拥有的：

<Grid x:Name="ContentPanel" Grid.Row="1" VerticalAlignment="Bottom">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ListBox Grid.Row="1" ItemsSource="{Binding Zones[0].listBannieres}" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"></StackPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Image Source="{Binding banniere}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
 </Grid>

谢谢。

已解决

<phone:PivotItem Header="Zone 1"  Margin="0">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <StackPanel Grid.Row="1" VerticalAlignment="Bottom" >
                        <phone:Pivot ItemsSource="{Binding Zones[0].listBannieres}">
                            <phone:Pivot.HeaderTemplate>
                                <DataTemplate />
                            </phone:Pivot.HeaderTemplate>
                            <phone:Pivot.ItemContainerStyle>
                                <Style TargetType="phone:PivotItem">
                                    <Setter Property="Margin" Value="0"/>
                                </Style>
                            </phone:Pivot.ItemContainerStyle>
                            <phone:Pivot.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <Image Source="{Binding banniere}"/>
                                    </StackPanel>
                                </DataTemplate>
                            </phone:Pivot.ItemTemplate>
                        </phone:Pivot>
                    </StackPanel>
                </Grid>
            </phone:PivotItem>

Answer 1

我建议按照 cmets 或全景控件中的建议使用 Pivot，如果将它们放在另一个控件中，则只能在底部显示它们。这是一个带有枢轴的示例：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="200" />
    </Grid.RowDefinitions>

    <phone:Pivot Grid.Row="1" ItemsSource="{Binding Images}" Margin="0">
        <phone:Pivot.HeaderTemplate>
            <DataTemplate></DataTemplate>
        </phone:Pivot.HeaderTemplate>

        <phone:Pivot.ItemContainerStyle>
            <Style TargetType="phone:PivotItem">
                <Setter Property="Margin" Value="0" />
            </Style>
        </phone:Pivot.ItemContainerStyle>

        <phone:Pivot.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding ImagePath}" Stretch="Fill" />
            </DataTemplate>
        </phone:Pivot.ItemTemplate>
    </phone:Pivot>
</Grid>

这里只滚动到你想要的底部。它还会在滚动时“捕捉”到图像，我也认为 Android viewpager 会这样做。 :)

如果您改为将 Pivot 更改为 Panorama 并将 PivotItem 更改为 PanoramaItem，您可以获得另一个不错的结果，您可以在其中看到下一张图像的一小部分。这是结果的图像：

编辑：要删除边距和标题，请确保将 HeaderTemplate 设置为空，并将 PivotItem 上的边距设置为 0。请参阅上面的更新代码。