スクロール位置に応じてコンボボックスの動的要素を表示

Question

ItemSourceの要素をスクロールの位置に従って動的に表示するようにしようとしています。Facebookのニュースフィードのように、スクロールビューアの終わり。

ItemSourceの最初の20個の要素を表示し、残りの部分を折りたたみ、スクロールバーが下に達したときに表示されるようになると思ったが、まだ成功していない。

これは実現可能ですか？これができると思うのはあまりにも狂っていますか？

はまた、私はすべてのアイデア、提案やコメントは大歓迎です

<Style x:Key="CustomComboBox" TargetType="ComboBox"> 
    <Setter Property="SnapsToDevicePixels" Value="true" /> 
    <Setter Property="OverridesDefaultStyle" Value="true" /> 
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" /> 
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible" /> 
    <Setter Property="ScrollViewer.CanContentScroll" Value="true" /> 
    <Setter Property="IsEditable" Value="True"/> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="FontFamily" Value="Coves"/> 
    <Setter Property="FontWeight" Value="Normal"/> 
    <Setter Property="FontSize" Value="12"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ComboBox"> 
       <Border x:Name="TopBorder" 
         CornerRadius="8" 
         BorderBrush="Grey" 
         BorderThickness="1" 
         Padding="10,0,1,0"> 
        <Border.Background> 
         <LinearGradientBrush EndPoint="0.504,1.5" StartPoint="0.504,0.03"> 
          <GradientStop Color="White" Offset="0"/> 
          <GradientStop Color="#e3e3e5" Offset="0.65"/> 
         </LinearGradientBrush> 
        </Border.Background> 
        <Grid> 
         <ToggleButton 
         Name="ToggleButton" 
         Template="{DynamicResource CustomComboBoxToggleButton}" 
         Grid.Column="2" 
         Focusable="false" 
         IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" 
         ClickMode="Press"> 
         </ToggleButton> 
         <TextBlock Name="ContentSite" IsHitTestVisible="False" 
             Text="{Binding Source={StaticResource Proxy}, Path=Data.Name, UpdateSourceTrigger=PropertyChanged}" 
             Visibility="Visible" Foreground="#37465c" 
             Padding="3,3,23,3" VerticalAlignment="Center" 
             HorizontalAlignment="Left"/> 
         <Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" 
           Focusable="False" PopupAnimation="Fade"> 
          <StackPanel Orientation="Vertical" Width="215"> 
           <Grid Name="DropDown" SnapsToDevicePixels="True" 
            MaxHeight="{TemplateBinding MaxDropDownHeight}"> 
            <Border x:Name="DropDownBorder" BorderThickness="1" 
              BorderBrush="#888"> 
             <Border.Background> 
              <LinearGradientBrush EndPoint="0.504,1.5" StartPoint="0.504,0.03"> 
               <GradientStop Color="White" Offset="0"/> 
               <GradientStop Color="#e3e3e5" Offset="0.65"/> 
              </LinearGradientBrush> 
             </Border.Background> 
             <ScrollViewer Margin="0" SnapsToDevicePixels="True"> 
              <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/> 
             </ScrollViewer> 
            </Border> 
           </Grid> 
          </StackPanel> 
         </Popup> 
        </Grid> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Cursor" Value="Hand"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

このComboBoxのためにcuztomizedスタイルで働いています。 多くの感謝！

Answer 1

これを行う最も簡単な方法は、ComboBoxをサブクラス化し、それを修正してPagingComboBoxを作成することです。下に小さな例があります。完璧ではないが働いている。

XAML-使用

<PagingComboBox PagingSource="{Binding YourSource}" PageSize="15"/> 

コントロール

public class PagingComboBox : ComboBox { 

    public PagingComboBox() { 
     this.ItemsSource = new ObservableCollection<object>(); 
     this.Loaded += this.MyComboboxLoaded; 
    } 

    private int _currentItems = 0; 
    private void MyComboboxLoaded(object sender, RoutedEventArgs e) { 
     for (int i=0; i < this.PageSize; i++) 
     { 
     (this.ItemsSource as ObservableCollection<object>).Add(this.PagingSource[i]); 
     this._currentItems++; 
     } 

     var sv = this.Template.FindName("DropDownScrollViewer", this) as ScrollViewer; 
     sv.ScrollChanged += this.SvScrollChanged; 

    } 

    private void SvScrollChanged(object sender, ScrollChangedEventArgs e) { 
     var sv = sender as ScrollViewer; 
     var isAtEnd = sv.VerticalOffset == sv.ScrollableHeight; 
     var cLimmit = this._currentItems + this.PageSize; 
     if (isAtEnd && this._currentItems < this.PagingSource.Count) { 
     for (int i = this._currentItems; i < cLimmit; i++) 
     { 
      if (i > this.PagingSource.Count - 1) return; 
      (this.ItemsSource as ObservableCollection<object>).Add(this.PagingSource[i]); 
      this._currentItems++; 
     } 
     } 
    } 

    public int PageSize { 
     get { 
     return (int)GetValue(PageSizeProperty); 
     } 
     set { 
     SetValue(PageSizeProperty, value); 
     } 
    } 

    // Using a DependencyProperty as the backing store for PageSize. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty PageSizeProperty = 
     DependencyProperty.Register("PageSize", typeof(int), typeof(PagingComboBox), new PropertyMetadata(20)); 



    public IList PagingSource { 
     get { 
     return (IList)GetValue(PagingSourceProperty); 
     } 
     set { 
     SetValue(PagingSourceProperty, value); 
     } 
    } 

    // Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty PagingSourceProperty = 
     DependencyProperty.Register("PagingSource", typeof(IList), typeof(PagingComboBox), new PropertyMetadata(null)); 



    } 

NOTE

カスタムを作成したので、あなたはあなたのScrollViewerのに名前（DropDownScrollViewer）を得なければならないかもしれませんそれのためのテンプレート。欠点の1つは、コンボボックスの元のItemsSource-Propertyを失うことです。

これは、このような機能を実装する方法の手掛かりを提供します。