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

Question

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

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

Answer 1

如果我将该 ItemsPresenter 的边距设置为每边的 -100，它在某些时候可以工作，但行为是奇怪的、不可预测的，并且取决于窗口的宽度。还有什么其他的解决方案？

您设置 theMargin是对的ItemsPresenter，但我认为 -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();
    }
}

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

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

<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;
}

这是此演示的渲染图像：