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

我建议按照注释或Panorama控件中的建议使用Pivot，如果将它们放在另一个控件中，则只能在底部显示它们。以下是使用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，则可以获得另一个不错的结果，您可以在其中看到下一个图像的一小部分。这是结果的图像：

enter image description here

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

Windows手机水平列表框图像中心锁

1 个答案: