Question

我有一个uwp flipview，并想让它显示下一个和前一个元素。从本质上讲，这意味着使每个flipviewitem略小，以便您知道flipview可以滚动。这是我目前所拥有的屏幕截图：

翻阅视图是Michael Fassbender的圆形图像的一部分。你可以滑动到下一个，所以我想在左边显示下一个图像。我注意到FlipView默认样式在scrollviewer中有一个ItemsPresenter（我们可以通过在Visual Studio / Edit Style / Edit a Copy ...中右击它来修改FlipView默认样式）。如果我将ItemsPresenter的边距设置为每边-100，它可以在某些点上工作，但行为很奇怪，不可预测，并且取决于窗口的宽度。还有什么其他解决方案？

Answer 1

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

您设置Margin的{{1}}是正确的，但我认为-100的值无法在此解决问题，而且应该取决于{{1}宽度，而不是窗口的宽度。在这里，我有一个解决方案，也设置ItemsPresenter属性：

FilpView

我的转换器是这样的：

Margin

从这段代码中可以看出，我将每个项目的宽度设置为整个<ItemsPresenter Margin="{Binding Width, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource marginvct}}" />宽度的2/3，并保持左右两侧有1/6的空格在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的值绑定到FlipView，因此现在使用Margin时，应设置Width属性。你说它取决于窗口的大小，我想你希望FlipView的宽度等于窗口的宽度，所以你可以像这样编码： / p>

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>

以下是此演示的渲染图像：

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

1 个答案: