片鱗懐古のブログ: wpf : ListViewのある列の幅を自動でいっぱいに広げその他の列幅は固定

ちょっと作りたいものがあって、その部品としてある列の幅を自動でいっぱいに広げ、その他の列幅は固定するListViewを作りました。その作り方をメモ。サンプルコードを実行するとこんなウィンドウが表示されます。

ユーザーがウィンドウサイズを変更すると「メモ」の列は自動で調整されます。その他の列は固定幅です。列の入れ替えも禁止にしました。

作った環境はこちら。

Windows7 64bit home
Visual Studio 2012 Express for Desktop
.NET Framework 4.5

参考サイトはこちらです。

Microsoft .NET Framework forums(en) ... how to set GridView column widths
frog.raindrop.jp.knowledge ... ListViewのカラムヘッダの幅を固定する
Microsoft .NET Framework フォーラム ... ListViewのカラム移動について
MSDN ... Control Styles and Templates

まずはサンプルコードのガワとなる部分を載せましょう。これを書き換えて目的のコードを作ります。 MainWindow.xamlはこれ。

<Window x:Class="ListViewAutoAdjustColumnWidth.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <ListView Name="listView">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="ID" DisplayMemberBinding="{Binding Path=Id}" Width="60"/>
                <GridViewColumn Header="名前" DisplayMemberBinding="{Binding Path=Name}" Width="60"/>
                <GridViewColumn Header="メモ" DisplayMemberBinding="{Binding Path=Memo}" Width="200"/>
            </GridView>
        </ListView.View>
    </ListView>
</Window>

MainWindow.xaml.csはこれです。

using ...略...;

namespace ListViewAutoAdjustColumnWidth
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            listView.ItemsSource = new Item[]{
                new Item(0, "秋田", "稲庭うどん、しょっつる鍋、いぶりがっこ、ハタハタ、比内地鶏"),
                new Item(1, "静岡", "お茶、金目鯛、桜えび、わさび、メロン"),
                new Item(2, "山口", "ふぐ、見島牛、車エビ、蒲鉾"),
                new Item(3, "和歌山", "梅干し、みかん、ラーメン")
            };
        }
    }
}

Item.csはこれです。

namespace ListViewAutoAdjustColumnWidth
{
    class Item
    {
        public Item(int id, string name, string memo)
        {
            Id = id;
            Name = name;
            Memo = memo;
        }
        public int Id { get; set; }
        public string Name { get; set; }
        public string Memo { get; set; }
    }
}

まずは列幅の固定と入れ替え禁止の簡単なやり方から。 GridViewColumnHeaderを明示的に書いて無効します。最初に挙げたコードでは列名をGridViewColumn要素のHeader属性で指定していました。これをこういう風に書き換えます。

<GridViewColumn
        DisplayMemberBinding="{Binding Path=Id}"
        Width="100"
>
    <GridViewColumnHeader
            IsEnabled="False"
            Foreground="Black"
            Content="ID"
    />
</GridViewColumn>

GridViewColumnHeader要素にForeground属性を指定しているのは、無効にすると文字の色がグレーになってしまうため。それは文字の色を黒で上書きして対処しています。 Widthを省略すると列幅を自動調整するところで誤動作します。明記しておいてください。

列ヘッダにメニューやクリックイベントなどを何も実装しない場合はこれでokです。ですがメニューなどが必要な場合は無効にすると無反応になってしまいます。別のやり方をする必要があります。

そういう場合は、このやり方にしましょう。 GridViewColumnHeaderを明示的に書くところは同じ。ただし無効にはしません。通常はマウス操作で列のサイズ変更と列の入れ替えができてしまいます。ここでは列の入れ替えを防ぐためにMouseDownイベントのハンドラを付けます。

<GridViewColumn
        DisplayMemberBinding="{Binding Path=Id}"
        Width="100"
>
    <GridViewColumnHeader
            MouseDown="ListViewColumnHeaderMouseDownHandler"
            Content="ID"
    />
</GridViewColumn>

MouseDownイベントのハンドラの処理は、

private void ListViewColumnHeaderMouseDownHandler(object sender, MouseButtonEventArgs e)
{
    e.Handled = true;
}

これだけです。これで列の入れ替え処理にイベントが到達する事はありません。

列のサイズ変更も止めなければなりません。 GridViewColumnHeaderは子にThumbを持っています。それを無効にしましょう。参考サイトはxamlで書いて長くなっています。 ListView全体を書き換えるときはそちらのやり方の方がよさそうですが、大変です。この例ではその処理はListViewのLoadedイベントでやります。

private void ListViewLoadedHandler(object sender, RoutedEventArgs e)
{
    var view = listView.View as GridView;
    foreach (var column in view.Columns)
    {
        var header = column.Header as GridViewColumnHeader;
        var g = VisualTreeHelper.GetChild(header, 0) as DependencyObject;
        var c = VisualTreeHelper.GetChild(g, 3) as Canvas;
        var t = VisualTreeHelper.GetChild(c, 0) as Thumb;
        t.IsEnabled = false;
    }
}

GridViewColumnHeaderを明記しないとheaderの中身は文字列になったり別のコントロールになったりしてうまくいかないので注意。 GridViewColumnHeaderの子コントロールの階層はMSDNのページで「Default WPF Themes」を落としてきて確認。デフォルトのテンプレートはClassic.xamlに書いてあります。

これで列幅の固定は完了。

最後にListViewのサイズが変更されたとき、それにあわせて「メモ」の列を調整する処理を書きます。 ListViewにSizeChangedイベントのハンドラを追加。

private const double LIST_VIEW_COLUMN_MARGIN = 10;
private const double LIST_VIEW_COLUMN_MIN_WIDTH = 100;

private void ListViewSizeChangedHandler(object sender, SizeChangedEventArgs e)
{
    var view = listView.View as GridView;
    var w = listView.ActualWidth
            - view.Columns[0].ActualWidth
            - view.Columns[1].ActualWidth
            - LIST_VIEW_COLUMN_MARGIN;
    if (w < LIST_VIEW_COLUMN_MIN_WIDTH)
        w = LIST_VIEW_COLUMN_MIN_WIDTH;
    view.Columns[2].Width = w;
}

参考サイトにはいくつかやり方が書いてあるけど、やりたいこととかける時間の兼ね合いでこれを選びました。引き算で幅を決めるだけです。参考サイトで幅が取得できないとか書いてるのはGridViewColumnHeaderを明記してないからですね。この例の通りに書けば大丈夫です。

ただListViewの幅から各列の幅を引いただけだとちょっと「メモ」の列幅が大きくなってしまうので余分にLIST_VIEW_COLUMN_MARGINを引いてます。これはListViewの枠幅(BorderThickness)とか、行選択の青い四角形を描くための余白とかのようですね。手作業で適当な値を探しました。

ListViewのBorderThicknessを変えると当然LIST_VIEW_COLUMN_MARGINの値も変わります。たいした手間では無いのでそのつど探しましょう。ちょうどいい値だと横のスクロールバーが表示されません。

wpfはディスプレイの設定とかで勝手に拡大縮小されるんですよね。そういうのとか、別のなんかのはずみとかでLIST_VIEW_COLUMN_MARGINがちょうどいい値でも横のスクロールバーが出てしまうことがあるかもしれません。そういうのが嫌ならListViewのScrollViewer.HorizontalScrollBarVisibilityプロパティをHiddenにして、横のスクロールバーが表示されないようにしておきます。

これで列の自動調整処理もできました。

最後に、サンプルコード全体も載せておきましょう。一応、列ヘッダのクリックイベントとコンテキストメニューが動くのを確認するためのコード数行が追加されています。まずはMainWindow.xamlから。

<Window x:Class="ListViewAutoAdjustColumnWidth.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <ListView Name="listView" Loaded="ListViewLoadedHandler" SizeChanged="ListViewSizeChangedHandler" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
        <ListView.View>
            <GridView>
                <GridView.ColumnHeaderContextMenu>
                    <ContextMenu>
                        <MenuItem Header="test"/>
                    </ContextMenu>
                </GridView.ColumnHeaderContextMenu>
                <GridViewColumn DisplayMemberBinding="{Binding Path=Id}" Width="100">
                    <GridViewColumnHeader Content="ID" MouseDown="ListViewColumnHeaderMouseDownHandler" Click="ListViewColumnHeaderClickHandler"/>
                </GridViewColumn>
                <GridViewColumn DisplayMemberBinding="{Binding Path=Name}" Width="100">
                    <GridViewColumnHeader Content="名前" MouseDown="ListViewColumnHeaderMouseDownHandler"/>
                </GridViewColumn>
                <GridViewColumn DisplayMemberBinding="{Binding Path=Memo}" Width="200">
                    <GridViewColumnHeader Content="メモ" MouseDown="ListViewColumnHeaderMouseDownHandler"/>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>
</Window>

MainWindow.xaml.csです。

using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;

namespace ListViewAutoAdjustColumnWidth
{
    public partial class MainWindow : Window
    {
        private const double LIST_VIEW_COLUMN_MARGIN = 6;
        private const double LIST_VIEW_COLUMN_MIN_WIDTH = 100;

        public MainWindow()
        {
            InitializeComponent();

            listView.ItemsSource = new Item[]{
                new Item(0, "秋田", "稲庭うどん、しょっつる鍋、いぶりがっこ、ハタハタ、比内地鶏"),
                new Item(1, "静岡", "お茶、金目鯛、桜えび、わさび、メロン"),
                new Item(2, "山口", "ふぐ、見島牛、車エビ、蒲鉾"),
                new Item(3, "和歌山", "梅干し、みかん、ラーメン")
            };
        }

        private void ListViewLoadedHandler(object sender, RoutedEventArgs e)
        {
            var view = listView.View as GridView;
            foreach (var column in view.Columns)
            {
                var header = column.Header as GridViewColumnHeader;
                var g = VisualTreeHelper.GetChild(header, 0) as DependencyObject;
                var c = VisualTreeHelper.GetChild(g, 3) as Canvas;
                var t = VisualTreeHelper.GetChild(c, 0) as Thumb;
                t.IsEnabled = false;
            }
        }

        private void ListViewSizeChangedHandler(object sender, SizeChangedEventArgs e)
        {
            var view = listView.View as GridView;
            var w = listView.ActualWidth - view.Columns[0].ActualWidth - view.Columns[1].ActualWidth - LIST_VIEW_COLUMN_MARGIN;
            if (w < LIST_VIEW_COLUMN_MIN_WIDTH)
                w = LIST_VIEW_COLUMN_MIN_WIDTH;
            view.Columns[2].Width = w;
        }

        private void ListViewColumnHeaderMouseDownHandler(object sender, MouseButtonEventArgs e)
        {
            e.Handled = true;
        }

        private void ListViewColumnHeaderClickHandler(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(this, "clicked");
        }
    }
}

2014/04/21追記

ListViewの右側に出るスクロールバーの幅の調べ方を書くの忘れてました。こんな感じです。

var listBoxChrome = VisualTreeHelper.GetChild(listView, 0) as FrameworkElement;
var scrollViewer = VisualTreeHelper.GetChild(listBoxChrome, 0) as ScrollViewer;
var scrollBar = scrollViewer.Template.FindName("PART_VerticalScrollBar", scrollViewer) as ScrollBar;
var w = scrollBar.ActualWidth;

スクロールバーの表示の有無で調節する列の幅を変えたり、スクロールバーを表示しっぱなしにして常にその分の幅を引いたりしましょう。

片鱗懐古のブログ

2014年4月18日金曜日

wpf : ListViewのある列の幅を自動でいっぱいに広げその他の列幅は固定

閲覧数が多い投稿

ラベル

広告

投稿した動画

ブログアーカイブ