片鱗懐古のブログ: wpf : TextBoxで項目を編集できるListView

ちょっと作りたいものがあって、その部品としてTextBoxで項目を編集できるListViewを作りました。その作り方をメモ。サンプルコードを実行するとこんなウィンドウが表示されます。

単にListViewにTextBoxを載せたデフォルトの状態だと色々不都合があるのでちょっと手を入れています。

作った環境はこちら。

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

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

kguの日記 ... コントロールテンプレート
憂国のプログラマHatena版 ... WPF FAQ Q101. ListBoxItemで子要素の編集時に強調表示するには?
ざっちのーと ... 【WPF】ListBoxのItemの幅がListBoxの幅にならない

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

<Window x:Class="ListViewItemHasTextBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="350">
    <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="メモ"  Width="200">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBox Text="{Binding Path=Memo}" TextWrapping="Wrap"/>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>
</Window>

MainWindow.xaml.csはこれです。

using System.Windows;

namespace ListViewItemHasTextBox
{
    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; }
    }
}

上のコードをそのまま実行するとTextBoxの幅が入力済みの文字の長さによって変わってしまいます。

これだと不恰好なのでTextBoxの幅を列幅いっぱいに拡大しましょう。

<Window ～略～>
    <ListView Name="listView">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.View>
            <GridView>
                ～略～
            </GridView>
        </ListView.View>
    </ListView>
</Window>

追加したのはListView.ItemContainerStyleの要素です。実行するとこうなります。

この状態ではTextBoxのフォーカスとListViewの選択行が一致しないという問題があります。

上の画像だと選択行は0行目、TextBoxのフォーカスは2行めです。ユーザーにとって分かり易い状態ではないので、TextBoxのフォーカスが変更されたらListViewの選択行もそれにあわせて移動するようにしましょう。

<Window ～略～>
    <ListView Name="listView">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Style.Triggers>
                    <Trigger Property="IsKeyboardFocusWithin" Value="true">
                        <Setter Property="IsSelected" Value="true" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.View>
            <GridView>
                ～略～
            </GridView>
        </ListView.View>
    </ListView>
</Window>

Style.Triggers要素を追加しました。 IsKeyboardFocusWithinプロパティは、子コントロールのどれかがキーボードフォーカスを持っていたらtrueになります。それをトリガーにして選択行を切り替えます。

最後に、TextBoxの枠が表示されるのを選択行だけにしましょう。

<Window ～略～>
    <ListView Name="listView">
        <ListView.Resources>
            <Style x:Key="{x:Type TextBox}" TargetType="TextBox">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TextBoxBase}">
                            <Border Name="TextBoxBorder" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" BorderThickness="1" BorderBrush="Transparent">
                                <ScrollViewer Margin="0" x:Name="PART_ContentHost" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsKeyboardFocusWithin" Value="True">
                                    <Setter TargetName="TextBoxBorder" Property="BorderBrush" Value="LightGray" />
                                    <Setter TargetName="TextBoxBorder" Property="Background" Value="White" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.Resources>
        <ListView.ItemContainerStyle>
            ～略～
        </ListView.ItemContainerStyle>
        <ListView.View>
            ～略～
        </ListView.View>
    </ListView>
</Window>

追加したのはListView.Resources要素です。 TextBoxのTemplateを指定して、普段のTextBoxは透明な枠の中に文字列を表示するようにしています。見た目はTextBlockのようになります。 TextBoxをクリックされるなどしてフォーカスが移るとトリガーにひっかかります。グレーの枠と白の背景色を設定して、TextBoxだと分かる表示に変えます。見た目は投稿冒頭のキャプチャ画像のとおりです。これで完成。

最後に、編集後のMainWindow.xaml全体を載せておきます。

<Window x:Class="ListViewItemHasTextBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="350">
    <ListView Name="listView">
        <ListView.Resources>
            <Style x:Key="{x:Type TextBox}" TargetType="TextBox">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TextBoxBase}">
                            <Border Name="TextBoxBorder" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" BorderThickness="1" BorderBrush="Transparent">
                                <ScrollViewer Margin="0" x:Name="PART_ContentHost" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsKeyboardFocusWithin" Value="True">
                                    <Setter TargetName="TextBoxBorder" Property="BorderBrush" Value="LightGray" />
                                    <Setter TargetName="TextBoxBorder" Property="Background" Value="White" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.Resources>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Style.Triggers>
                    <Trigger Property="IsKeyboardFocusWithin" Value="true">
                        <Setter Property="IsSelected" Value="true" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.View>
            <GridView>
                <GridViewColumn Header="ID" DisplayMemberBinding="{Binding Path=Id}" Width="60"/>
                <GridViewColumn Header="名前" DisplayMemberBinding="{Binding Path=Name}" Width="60"/>
                <GridViewColumn Header="メモ"  Width="200">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBox Text="{Binding Path=Memo}" TextWrapping="Wrap"/>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>
</Window>

片鱗懐古のブログ

2014年4月20日日曜日

wpf : TextBoxで項目を編集できるListView

閲覧数が多い投稿

ラベル

広告

投稿した動画

ブログアーカイブ