Get flipview ItemsPresenter to show next and previous items

Question

I have a uwp flipview, and want to get it to show a bit of the next and previous elements. Essentially, this means make each flipviewitem slightly smaller, so that you know that the flipview can be scrolled across. Here's a screenshot of what I currently have:

The flipview is the part with the circular image of Michael Fassbender. You can swipe to the next one, so I want to show a bit of the next image to the left. I've noticed that the FlipView default style has an ItemsPresenter inside a scrollviewer (we can modify a FlipView default style by right click it in Visual Studio/Edit Style/Edit a Copy ...). If I set the margin of that ItemsPresenter to say -100 on each side, it works at some points, but the behavior is weird, unpredictable, and depends of the window's width. What other solution would there be?

Answer 1

If I set the margin of that ItemsPresenter to say -100 on each side, it works at some points, but the behavior is weird, unpredictable, and depends of the window's width. What other solution would there be?

You are right about setting the Margin of that ItemsPresenter, but I think the value of -100 can't solve the problem here, and it should depends on the FilpView's width, not the window's width. Here I have a solution also setting the Margin property:

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

And my converter is like this:

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

As you can see from this code, I set the width of each item to 2/3 of the whole FlipView's width and keep the left and right sides have a space with 1/6 of the FlipView's width, so will the next, current and previous elements be shown together.

And since I bind the value of Margin to Width, when using FlipView now, the Width property should be set. You said it depends on the window's size, I guess that you want your FlipView's width equal with the window's width, so for example you can code like this:

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

The code behind for the CustomWidth is like this:

private double CustomWidth;

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

Here is the rendering image of this demo: