获取 Flipview ItemsPresenter 以显示下一个和上一个项目

Question

我有一个 uwp 翻转视图，想要让它显示一些下一个和上一个元素。本质上，这意味着使每个翻转视图项稍微小一些，以便您知道翻转视图可以滚动。这是我目前拥有的屏幕截图：

翻转视图是带有迈克尔·法斯宾德圆形图像的部分。你可以滑动到下一张，所以我想在左边显示下一张图片。我注意到 FlipView 默认样式在滚动查看器中有一个 ItemsPresenter（我们可以通过在 Visual Studio/Edit Style/Edit a Copy ... 中右键单击它来修改 FlipView 默认样式）。如果我将该 ItemsPresenter 的边距设置为每边的 -100，它在某些时候可以工作，但行为是奇怪的、不可预测的，并且取决于窗口的宽度。还有什么解决办法？

Answer 1

如果我将 ItemsPresenter 的边距设置为每边 -100，它在某些点上有效，但行为很奇怪，不可预测，并且取决于窗口的宽度。还有什么解决办法？

设置Margin 的Margin 是对的，但我认为-100 的值不能解决这里的问题，它应该取决于FilpView 的宽度，而不是窗口的宽度宽度。在这里我有一个解决方案还设置了Margin 属性：

<ItemsPresenter Margin="{Binding Width, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource marginvct}}" />

而我的转换器是这样的：

public class MarginConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        var width = (double)value;
        double itemmargin = width / 6;
        Thickness margin = new Thickness(itemmargin, 0, itemmargin, 0);
        return margin;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

从这段代码中可以看出，我将每个项目的宽度设置为整个FlipView的宽度的2/3，并保持左右两侧有一个空间与FlipView的1/6的宽度，所以下一个、当前和上一个元素会一起显示。

并且由于我将Margin的值绑定到Width，所以现在使用FlipView时，应该设置Width属性。你说这取决于窗口的大小，我猜你希望你的FlipView的宽度等于窗口的宽度，所以例如你可以这样编码：

<FlipView ItemsSource="{x:Bind collection}" Style="{StaticResource FlipViewStyle}" Width="{x:Bind CustomWidth}">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <Grid.Background>
                    <ImageBrush ImageSource="{Binding ContactImage}" />
                </Grid.Background>
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Ellipse Width="200" Height="200">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="{Binding ContactImage}" />
                        </Ellipse.Fill>
                    </Ellipse>
                    <TextBlock Margin="0,30,0,0" Text="{Binding ContactName}" FontSize="25" FontWeight="Bold" />
                    <TextBlock Margin="0,15,0,0" Text="{Binding ContactNumber}" FontSize="20" />
                    <TextBlock Margin="0,15,0,0" Text="{Binding ContactAddress}" FontSize="20" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

CustomWidth 后面的代码是这样的：

private double CustomWidth;

public MainPage()
{
    this.InitializeComponent();
    CustomWidth = Window.Current.Bounds.Width;
}

这是这个演示的渲染图：