フリップビューアイテムを取得するプレゼンター次のアイテムと前のアイテムを表示するプレゼンター

Question

私はuwpフリップビューを持っており、次の要素と前の要素のビットを表示したいと思っています。基本的に、これは、各フリップビュー項目をわずかに小さくして、フリップビューがスクロールできることを知ることを意味します。ここで私は、現在持っているもののスクリーンショットです：

flipviewは、マイケル・ファスベンダーの円形画像と一部です。次の画像にスワイプすることができますので、次の画像を少し左に表示します。 FlipViewのデフォルトスタイルには、スクロールビューア内のItemsPresenterがあります（Visual Studio /スタイルの編集/コピーの編集...）。FlipViewのデフォルトのスタイルを変更することができます。そのItemsPresenterのマージンを両側に-100と設定すると、いくつかの点で動作しますが、動作は奇妙で予測不可能であり、ウィンドウの幅に依存します。他にどんな解決策がありますか？

Answer 1

各ItemsPresenterのマージンを各側で-100と設定すると、いくつかの点で動作しますが、動作は奇妙で予測不可能で、ウィンドウの幅にもよります。他にどんな解決策がありますか？

あなたはそのItemsPresenterのMarginの設定について正しいですが、私は-100の値が、ここで問題を解決できないと思うし、それがFilpViewの幅ではなく、ウィンドウの幅に依存する必要があります。

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

そして、私のコンバータは、このようなものです：：ここで私もMarginプロパティを設定するソリューションを持っているあなたは、このコードから見ることができるように

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の幅のうち、左と右の辺にはFlipViewの幅の1/6のスペースがあるので、次の現在の要素と前の要素が一緒に表示されます。

そして、私はWidthにMarginの値をバインドするので、今FlipViewを使用した場合、Widthプロパティを設定する必要があります。あなたは、私は、例えば、あなたがこのようにコーディングすることができますので、あなたは、あなたのFlipViewの幅、ウィンドウの幅と等しいたいと思い、それは、ウィンドウのサイズに依存言った：

CustomWidthための背後にあるコードは次のようである

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

：ここでは

private double CustomWidth; 

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

は、このデモのレンダリング画像は、次のとおりです。