ListBox コントロールなどを物理スクロールにする

(2017/05/16 8:03:37 created.)

(2017/05/24 16:59:25 modified.)

ListBox コントロールや DataGrid コントロールはアイテム個々のコンテナを表示していますが、アイテム数が多くてコントロールからはみ出る場合、スクロールバーによってスクロールして表示できるようになっています。このとき、スクロール表示の方法は、既定では論理スクロールといって、アイテムのコンテナ毎の移動量でスクロールする方法になっています。これに対し、ScrollViewer コントロールでの動作に見られるようなピクセル毎の移動量でスクロールする方法を物理スクロールといいます。

言葉で説明されるよりも実際に触って見たほうがわかりやすいので、さっそくサンプルコードを掲載します。

MainViewModel.cs

```
namespace Tips_PixelScroll.ViewModels
```
```
{
```
```
    using System.Collections.Generic;
```
```
    using System.Linq;
```
```
    using Tips_PixelScroll.Models;
```
```
 
```

    public class MainViewModel : NotificationObject

```
    {
```

        private IEnumerable<Person> _people;

```
        /// <summary>
```

        /// 人物データコレクションを取得します。

```
        /// </summary>
```

        public IEnumerable<Person> People

```
        {
```
```
            get
```
```
            {
```

                if (this._people == null)

```
                {
```

                    this._people = Enumerable.Range(0, 1000)

                                  .Select(i => new Person() { Name = "田中太郎 " + i, Age = i });

```
                }
```
```
                return this._people;
```
```
            }
```
```
        }
```
```
    }
```
```
}
```

MainView.xaml

<Window x:Class="Tips_PixelScroll.Views.MainView"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainView" Height="300" Width="500">

```
    <Window.Resources>
```

        <Style TargetType="ListBoxItem">

            <Setter Property="Template">

```
                <Setter.Value>
```

                    <ControlTemplate TargetType="ContentControl">

                        <Border BorderBrush="Black" BorderThickness="1" Margin="2">

                            <StackPanel>

                                <TextBlock Text="{Binding Name}" />

                                <TextBlock Text="{Binding Age}" />

                            </StackPanel>

```
                        </Border>
```
```
                    </ControlTemplate>
```
```
                </Setter.Value>
```
```
            </Setter>
```
```
        </Style>
```
```
    </Window.Resources>
```
```
 
```
```
    <Grid>
```
```
        <Grid.RowDefinitions>
```

            <RowDefinition Height="Auto" />

```
            <RowDefinition />
```
```
        </Grid.RowDefinitions>
```
```
        <Grid.ColumnDefinitions>
```
```
            <ColumnDefinition />
```
```
            <ColumnDefinition />
```
```
            <ColumnDefinition />
```
```
        </Grid.ColumnDefinitions>
```
```
 
```

        <TextBlock Grid.Row="0" Grid.Column="0" Text="既定の ListBox" />

        <ListBox Grid.Row="1" Grid.Column="0" ItemsSource="{Binding People}" />

```
 
```

        <TextBlock Grid.Row="0" Grid.Column="1" Text="仮想化して物理スクロール" />

        <ListBox Grid.Row="1" Grid.Column="1" ItemsSource="{Binding People}"

                 VirtualizingPanel.ScrollUnit="Pixel" />

```
 
```

        <TextBlock Grid.Row="0" Grid.Column="2" Text="仮想化なしで物理スクロール" />

        <ListBox Grid.Row="1" Grid.Column="2" ItemsSource="{Binding People}"

                 VirtualizingPanel.ScrollUnit="Pixel"

                 VirtualizingPanel.IsVirtualizing="False" />

```
    </Grid>
```
```
</Window>
```

論理スクロールでは先頭のアイテムが必ず上からきちんと表示されますが、スクロールさせるとアイテムが動いていないように見えるので、スクロールしているかどうかがわかりにくくなります。これに対して物理スクロールでは、ピクセル単位でのスクロールとなるため、スクロール動作がスムーズに見えます。

どちらがいいかは時と場合によりますが、これらを使い分けられるようにしておくことが大切です。