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に持つようにした。


==== ソース抜粋1 ====

   /// <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(); } }

===============

==== ソース抜粋1 ====

    /// <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);
            }
        }

===============


==== ソース抜粋3 ====
                        <!-- *** 状態 *** -->
                        <GridViewColumn Header="状態" Width="80"  HeaderContainerStyle="{StaticResource GridViewColumnHeaderStyle}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <!-- Marginで左右から-6pxとしないとHearder部のタイトルとラインの位置がずれる.GridViewの既知の不具合 -->
                                    <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を使うような状況になっている人がどれだけいるのか謎だけど。









0 件のコメント:

コメントを投稿

PowerShellでEdgeを自動化(インストール不要。参考:郵便追跡サービス自動操作)

1.経緯について  RPAのソフトをインストールできないので、これまでVBSでCreateObjectでブラウザの自動操作をすることがたまにあった。 ※いざというときの手札として持っているだけで安心感が段違い  見た目上IEがインストールされていなくても、CreateObject...