田舎のプログラマーになる: TreeListView

ラベル TreeListView の投稿を表示しています。すべての投稿を表示

WPFの画面表示速度について

TreeListViewの画面表示が遅かったのでいろいろ調べてみた。
結論的には、WPFが遅いんじゃなくて、私の使い方が間違っているだけだった。
WPFはいろんなことができるけど、使い方を間違っちゃうことが多いのでまだまだ場数が足りないのかなと思う。

250アイテムを表示するのに20秒以上かかっている。

どうやら画面表示が遅いので、いろいろと試してみた結果、TreeListViewにTextBoxを利用しているのが原因みたい。

TextBlockに置き換えることで比べ物にならないぐらい早くなった。
確かにTextBoxを250行×5列の数だけ表示していれば遅くなるのも当然な気がする。

常に編集状態にする必要はないのでExcelみたいに編集モードになった箇所だけTextBoxを表示して編集できるように修正をした。

Bool値をVisiblityに変換するConverterを定義し、普段はTextBlockを表示しておいて、IsSelectedプロパティがTrueになったときだけ、TextBoxのVisibilityをCollapsedからVisibleに変換する。

<GridViewColumn x:Name="gvcTitle" Header="タイトル" Width="200" HeaderContainerStyle="{StaticResource GridViewColumnHeaderStyle}">
<GridViewColumn.CellTemplate>
<DataTemplate>

<Border BorderBrush="Black" BorderThickness="0,0,0.5,0" Margin="-6,0,-6,0">
<DockPanel>

<TreeListView:TreeListViewExpander Focusable="False" Visibility="{Binding TitleExpanderVisibility}"/>
<TreeListViewSubControls:TreeListItemTextBox Text="{Binding Data.Title, Mode=TwoWay}" VerticalContentAlignment="Center" VerticalAlignment="Stretch" Margin="2,2,2,2" HorizontalContentAlignment="Stretch"

Style="{StaticResource EditTreeListTextBoxStyle}" HorizontalAlignment="Stretch" BorderThickness="0" Opacity="1" TabIndex="1"

Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type DockPanel}}}" IsReadOnly="{Binding IsReadOnly}"

Visibility="{Binding IsSelected,Converter={StaticResource boolToVisiblityConverter},ConverterParameter=True}"/>
<Border BorderThickness="0" Visibility="{Binding IsSelected,Converter={StaticResource boolToVisiblityConverter},ConverterParameter=False}" Margin="2,2,2,2" HorizontalAlignment="Stretch">
<TreeListViewSubControls:TreeListItemTextBlock Text="{Binding Data.Title, Mode=TwoWay}" Style="{StaticResource TreeListTextBlockStyle}" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type DockPanel}}}" />
</Border>
</DockPanel>
</Border>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>

WPFのコンボボックスの背景色について

TreeListView上でコンボボックスを利用するときにフォーカスのあるコンボボックスの色をイベントで変えようとしたけど上手くいかなかった。

色々と調べているとXaml側のテンプレートをいじる必要があるみたいだったので、いろいろとやってみた。

とりあえず、コンボボックスをデザイナに配置し、コンボボックスを選択した状態で「右クリック」－＞「テンプレートの編集」ー＞「コピーして編集」を選択する。

リソースの名前は後でも変更できるのと、自動で作成されるXAMLの場所も移動できるので一旦は初期のままにして「OK」を押す。

ものすごく長いリソースがWindow.Resourceの中に作成される

このリソースの中でBackgroundを管理している箇所のStyleを変更すれば変えることができる。具体的には下記の画像の部分。
※編集可能なコンボボックスを使っているときは「ComboBox.Static.Editable.Background」を変更すればよいと思われる。

今回の場合は、フォーカスの移動によって背景色を変更したかったので、「ComboBox.Static.Background」、「ComboBox.MouseOver.Background」をデザイナ上は「Transparent」に設定しておいて、プログラムからGotFocusイベントとLostFocusイベントを利用して変更している。

＝＝＝　ソース抜粋１　＝＝＝
// 選択中の背景色を設定する
this.GotFocus += SetSelectionBackgroundColor;
// 選択中の背景色を初期値にもどす
this.LostFocus += ClearSelectionBackgroundColor;
＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝　ソース抜粋２　＝＝＝

/// <summary>
/// フォーカス取得時の背景色
/// </summary>
public Brush SelectionBackgroundColor = new SolidColorBrush(Color.FromArgb(255, 250, 250, 0));

/// <summary>
/// 選択中のコンボボックスの背景色を設定
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void SetSelectionBackgroundColor(object sender, RoutedEventArgs e)
{
var grid = this.Template.FindName("templateRoot", this) as Grid;
if (grid != null)
grid.Background = SelectionBackgroundColor;
}

/// <summary>

/// 選択中のコンボボックスの背景色を初期化

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void ClearSelectionBackgroundColor(object sender, RoutedEventArgs e)

{

var grid = this.Template.FindName("templateRoot", this) as Grid;

if (grid != null)

grid.Background = null;

}

＝＝＝＝＝＝＝＝＝＝＝＝＝
※templateRootは先ほどデザイナから自動生成されたXAMLの中で「ComboBoxTemplate」というControlTemplateがあるが、その中のGridのこと。
　なのでコンボボックスを構成する各コントロールを配置している元のGridの背景色を変更しているだけ。逆に言うとコンボボックスをどうやって作っているのかがControlTemplateを見ればわかる。

後はこの作成したリソースをコンボボックスのStyleに適用すればよい。

＝＝＝　ソース抜粋３　＝＝＝
<ComboBox ItemsSource="{Binding PriorityList, Mode=TwoWay}"
DisplayMemberPath="Name" SelectedValuePath="PriorityNo"
SelectedValue="{Binding SelectedPriorityNo}" Style="{StaticResource ComboBoxStyle1}">

＝＝＝＝＝＝＝＝＝＝＝＝＝

Window.Resourceに配置すると他のWindowでは利用できなくなるので、App.Xamlに配置すれば他のWindowから利用できる。
App.Xamlが長くなりすぎるのであれば、別のリソースディクショナリに作成して、App.Xamlは「ResourceDictionary.MergedDictionaries」でリソースの指定をすればよい。

＜適用した例＞

TreeListViewでのコンボボックスのデータバインドについて

TreeListViewにコンボボックスを表示するのに手間取ったのでメモ。

相変わらずゆっくりとガントチャートのアプリをいじっている。
前作っていたのはZipファイルにデータを保存する形式だったので、今度はSqliteにデータを保存する形に作り直している。

別のアプリのTaskManagerと共通のデータベースを利用すれば面白いのではないかと思って作っていたら、コンボボックスの表示がうまくできなかったので試行錯誤をしていた。

クラスとしてはこんな構造を持っていた。

メイン画面のDataContextにMainWindowViewModelをバインドして、TreeListViewには下記のような形でTreeViewへのバインドと同じような形で処理をしていた。

＝＝＝＝　ソース抜粋　＝＝＝＝

<TreeListView:TreeListView x:Name="treeView" Background="White" AllowsColumnReorder="True" ItemsSource="{Binding TreeListViewModel.TreeListItems ,Mode=TwoWay}">
<TreeListView:TreeListView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}" />
</TreeListView:TreeListView.ItemTemplate>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

コンボボックスの中身をバインドでやろうとして、プロパティをMainViewModelやTreeListViewModelに実装し、「ItemsSource="{Binding MainWindowViewModel.ComboboxItems,Mode=TwoWay}">」や「ItemsSource="{Binding TreeListViewModel.ComboboxItems,Mode=TwoWay}">」と指定していたが、うまく表示されない。コンボボックスを開いてみても項目の生成すらされていなかったので、バインディング自体が上手くいっていなかったので、よくよく考えるとChildにはTreeListItemをバインドしているのだから、TreeListItemクラスにコンボボックスの中身を持つ必要があるんド絵はないかと思って、TreeListItemクラスにコンボボックスの内容を作成し、バインドしてみたら上手くいった・・・。

とはいえ、TreeListItemの中身にコンボボックスの要素を実体として持つなどあほらしすぎる。
というわけで、コンボボックスの実体はTreeListViewModelに作成しておいて、参照のみTreeListItemに持つようにした。

＝＝＝＝　ソース抜粋１　＝＝＝＝

/// <summary>
/// TreeListViewにバインディングするクラス
/// </summary>
public class TreeListItem : Model.ModelBase
{
public TreeListViewViewModel TreeListVM;
private ObservableCollection<Model.Status> _statusList;
/// <summary>
/// 状況コンボボックスに表示するリストを定義
/// データのもとはTreeListViewModelに設定をし、TreeListItemは参照（Class）のみとする。
/// </summary>
public ObservableCollection<Model.Status> StatusList { get { return this._statusList; } set { this._statusList = value; NotifyPropertyChanged(); } }

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝　ソース抜粋１　＝＝＝＝

/// <summary>
/// TreeListItemを生成したときの初期設定
/// </summary>
/// <param name="task"></param>
/// <param name="treeListViewViewModel"></param>
public void Init(Model.Task task, TreeListViewViewModel treeListViewViewModel,TreeListItem parentTree)
{
this.Data = task;
this.TreeListVM = treeListViewViewModel;

// コンボボックス用の参照をセットする
this.StatusList = treeListViewViewModel.StatusList;
this.DifficultyList= treeListViewViewModel.DifficultyList;
this.PriorityList = treeListViewViewModel.PriorityList;
this.SelectedStatsuNo = Data.CardStatusNo;
this.SelectedDifficultyNo = Data.DifficultyNo;
this.SelectedPriorityNo= Data.PriorityNo;

this.Data.TreeItem = this;

if (parentTree != null)
{
SetParent(parentTree, null);
}
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝　ソース抜粋３　＝＝＝＝

<GridViewColumn Header="状態" Width="80" HeaderContainerStyle="{StaticResource GridViewColumnHeaderStyle}">
<GridViewColumn.CellTemplate>
<DataTemplate>

<Border BorderBrush="Black" BorderThickness="0,0,0.5,0" Margin="-6,0,-6,0">
<DockPanel >
<ComboBox VerticalAlignment="Stretch" VerticalContentAlignment="Center" ItemsSource="{Binding StatusList,Mode=TwoWay}"
HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"
DisplayMemberPath="Name" SelectedValuePath="StatusNo"
SelectedValue="{Binding SelectedStatsuNo}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock><Run Text="{Binding StatusNo, Mode=TwoWay}" /><Run Text=":" /><Run Text="{Binding Name, Mode=TwoWay}" /></TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</DockPanel>
</Border>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

クラスは参照型なので、TreeListViewModel側でインスタンス化し、各選択肢をリストに追加して、TreeListItemでは参照の設定のみとしておく。

昔はClassが参照型、Structureが値型だとかは知識としては知っていたけど、あまり意識して利用するところはなかった。（それはそれでどうなのかと思うけど）
こういう時にちゃんと知っていると便利だと思う。

ComboboxのBindingについては、他のいろんなサイト見れば参考になると思う。
そもそもTreeListViewでComboboxを使うような状況になっている人がどれだけいるのか謎だけど。

複数列をもつTreeViewについて

以前の記事でも書いた複数列を持つTreeViewについて、独自でいろいろと改良したコントロールをdllにして、プロジェクトに組み込んでいたが、dllでの利用がやはりなれないので、シンプルにしたものを作成した。（MultiColumnTreeView）
以前の記事：https://inakaprogrammer.blogspot.com/2017/10/treelistview.html

（参照元：https://www.codeproject.com/Articles/24973/TreeListView）

まずは展開・非展開のToggleButtonをよく見る「＋」「－」へ変更している。
あとは、カーソルのあるテキストボックスの背景色を変更するために、独自コントロールを作成し、DataTemplateとして指定できるようにしている。状況によってはコンボボックスやDatePickerなどを設置できるようにするべきかもしれない。

別プロジェクトとしてdllを作成するほどではないので、下記のサンプルプロジェクトの中では、TreeListViewフォルダをプロジェクト内に作成し、そのフォルダを別プロジェクトに移して、名前空間を修正したうえで、App.xamlに下記のソースを追加すれば使えるようになるはず。

<Application x:Class="MultiColumnTreeView.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MultiColumnTreeView"
StartupUri="MainWindow.xaml">
<Application.Resources>

<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="TreeListView/TreeListViewStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

</Application.Resources>
</Application>

各画面での利用例

<TreeListView:TreeListView x:Name="treeView" Background="White" AllowsColumnReorder="True" ItemsSource="{Binding TreeRoot}" >
<TreeListView:TreeListView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}" />
</TreeListView:TreeListView.ItemTemplate>

<TreeListView:TreeListView.Columns>

<GridViewColumn Header="分類" Width="200">
<GridViewColumn.CellTemplate>
<DataTemplate>

<Border BorderBrush="Black" BorderThickness="0,0,0.5,0" Margin="-6,0,-6,0">
<DockPanel >

<TreeListView:TreeListViewExpander Focusable="False"/>
<TreeListViewSubControls:TreeListItemTextBox Text="{Binding Text}" VerticalContentAlignment="Center" VerticalAlignment="Stretch" Margin="2,2,2,2"
HorizontalAlignment="Stretch" BorderThickness="0" Opacity="1" TabIndex="1" />
</DockPanel>
</Border>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>

<GridViewColumn Header="期限" Width="80">
<GridViewColumn.CellTemplate>
<DataTemplate>

<Border BorderBrush="Black" BorderThickness="0,0,0.5,0" Margin="-6,0,-6,0">
<DockPanel >
<TreeListViewSubControls:TreeListItemTextBox Text="{Binding Limit}" VerticalContentAlignment="Center" VerticalAlignment="Stretch" Margin="2,2,2,2"
HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" BorderThickness="0" Opacity="1" TabIndex="1" />
</DockPanel>
</Border>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>

</TreeListView:TreeListView.Columns>
</TreeListView:TreeListView>

サンプルプロジェクト

＜DownLoad＞

https://sites.google.com/site/mmbloguserfile/wai-bufairu/20190704_MultiColumnTreeView.zip

TreeListViewについて

TreeViewは１つの列しか表示できないので、複数の列を表示できるようなコントロールを探していたところ、下記のサイトにサンプルを見つけた。
（URL：https://www.codeproject.com/Articles/24973/TreeListView）

このサンプルをもとにdllを作成して、下記のような表現ができるようになった。

ガントチャートを表現するための独自コントロールと合わせることで、スケジュール管理用のソフトを作成できそう・・・！！

というわけで下記のようなものを作ってみた。

それっぽい感じにはなってきたが、使いにくいのでもうちょっと手を入れたい・・・。
つーか、タスク数が多くなると動きが遅くなる・・・。
５００タスク程度は軽く扱えるように作りたい。できれば１０００タスク。
作業者ごとの画面とかも表示したりしたいし・・・。

うーん、夢が広がってきて果たしていついったん完成とすることができるかなぁ。

登録: 投稿 (Atom)

田舎のプログラマーになる

WPFの画面表示速度について

WPFのコンボボックスの背景色について

TreeListViewでのコンボボックスのデータバインドについて

複数列をもつTreeViewについて

TreeListViewについて

PowerShellでWPFアプリケーションをBindingするときの注意点

このブログを検索