2017/03/26 22:21

ListView の表形式表示で改行があると

カテゴリ:: .NET/C#

コメント数:: Comments: 0

タグ：: #C#; #WPF

◆ 改行が表示されて表の 1 行に複数行表示される
◆ 見づらいので Converter 使って 1 行に変換する
◆ 複数行になる可能性ある列は多いと思うので Converter を Binding ごとに書くのは面倒
◆ → ユーザコントロール作る

ListView で GridView を使って表形式（エクスプローラの詳細表示みたいの）で表示するときにテキスト中に改行があるとそのまま表示されて表の 1 行の高さが揃わなくなります

[Window1.xaml]

[Window1.xaml.cs]

namespace w01
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            this.DataContext = new
            {
                items = new[]
                {
                    new { text = "1行", },
                    new { text = "２\n行", },
                    new { text = "あ\nい\nう\nえ\nお", },
                }
            };
        }
    }
}

こんな感じで binding してるデータに \n を含めると

gridcolumn-multilinetext

HTML みたいに何もしないと改行は無視されて明示的に改行を反映するように書かないと (white-space: pre-wrap; とか) 改行されて表示されないと思ってたのに普通に表示されていました

表示するデータの元はユーザ入力が多いと思うので何も対策しないと入力によって見づらい事になっていまう可能性があります
特に 1 行の高さが画面の高さ以上になるとホイールでのスクロールで一気進んでしまったり操作もまともにできなくなって使いものになりません

スクロール問題だけなら ListView に

ScrollViewer.CanContentScroll="False"

を設定すればいいのですが表の 1 行に複数行のテキストがある時点でみづらいので 1 行になるようにしたいです

NoWrap?

単純に NoWrap でできないかなという希望でこんなことしてみました

<GridViewColumn Header="名前" Width="100">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding text}" TextWrapping="NoWrap"></TextBlock>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>v

DisplayMemberBinding に代わりに DataTemplate を使って内部を自分で書いて TextBlock に NoWrap を指定してます

結果は効果なし

NoWrap は端までいったときの自動改行のオプションなので明示的な改行文字があれば改行されます

SingleLineConverter

スタイルではどうにもできなさそうなので仕方なく Converter を使って View 側の表示時に変換を行います

改行を半角空白に置換する Converter を作ります

public class SingleLineConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (targetType != typeof(string) || !(value is string))
        {
            throw new InvalidOperationException("Only supports converting between strings.");
        }

        return Regex.Replace((string)value, "\r\n|\r|\n", " ", RegexOptions.ECMAScript);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

Binding にこの Converter を使います

Window.Resources でリソース定義して DisplayMemberBinding の Converter でリソースを指定しています

これで複数行あっても 1 行で表示されるようになりました

gridcolumn-multilinetext2

SingleLineGridViewColumn

1 行で表示できるようになったのはいいのですが毎回コンバータを書くのは面倒ですよね
自動でコンバータを通してくれるユーザコントロールを作ってもう少し楽にします

自動でコンバータを通す場合にもともとコンバータが指定されていた場合に順番にコンバータ通すようなコンバータが必要です
なのでこういうコンバータを作りました

public class SequentialConverter : IValueConverter
{
    public List<IValueConverter> converters { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return converters.Aggregate(value, (acc, converter) =>
        {
            return converter.Convert(acc, targetType, parameter, culture);
        });
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return converters.Reverse<IValueConverter>().Aggregate(value, (acc, converter) =>
        {
            return converter.Convert(acc, targetType, parameter, culture);
        });
    }
}

プロパティ converters に IValueConverter のリストを入れておいて Convert などが呼ばれたら順番に IValueConverter を通します

次にユーザコントロールです

public class SingleLineGridViewColumn : GridViewColumn
{
    public new Binding DisplayMemberBinding
    {
        get { return (Binding)base.DisplayMemberBinding; }
        set
        {
            if(value.Converter == null)
            {
                value.Converter = new SingleLineConverter();
            }
            else
            {
                value.Converter = new SequentialConverter()
                {
                    converters = new List<IValueConverter>
                    {
                        value.Converter,
                        new SingleLineConverter(),
                    }
                };
            }
            base.DisplayMemberBinding = value;
        }
    }
}

すごくシンプルで GridViewColumn を継承して DisplayMemberBinding を再定義しています
set されたときに SingleLineConverter をセットして親クラスの DisplayMemberBinding にセットします
get はそのまま親クラスのものを返します

すでに何かのコンバータがあるときは上で作ったコンバータを順に通すコンバータを使って最後に SingleLineConverter を通すようにセットします

これで使うときには

これだけで済むようになりました
複数行のテキストが来る可能性あるところは GridViewColumn の代わりに SingleLineGridViewColumn を使うだけで大丈夫です

NoWrap?

SingleLineConverter

SingleLineGridViewColumn

「.NET/C#」カテゴリの最新記事

COMMENT