WPFのGridを動的に作成する

はじめに

WPFのxamlの基本といえばGridですが、基本的にはデザイン時にrow, columnを設定して使用します。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="1"/> // Grid.Row, ColumnでTextBlockの位置を指定して表示させる
    </Grid>

ただ、アプリを作っていると、たまにGridのRow, Columnを動的に設定したいというニーズがたまに出てくることがあります。

自分が開発していた時は、ListBoxのItemsPanelTemplateで動的にGridを設定したいということがありました。
カレンダーやスケジューラーのような月によって行数が変わるといった場合に、それをListBoxを使って実現しようと思うと、動的にGridを変更できるといいなということです。
以前 Drag&Dropの記事で、以下のような画面を紹介しましたが、この日にちごとのコマ割りで使用しています。

こんな感じでListBoxを作っています
見ていただけば、なんとなく構造がわかっていただけるのではと思います。

    <!--CustomGridを使用して、ListBoxItemを動的配置しています-->
    <ListBox Grid.Row="1"
            Visibility="{Binding CalendarVisitility.Value}"
            ItemsSource="{Binding CaseCalendarDatas}"
            Style="{StaticResource MaterialDesignCardsListBox}"
            ScrollViewer.CanContentScroll="False"
            dd:DragDrop.IsDropTarget="True">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <customgrid:CustomGrid GridColumnCount="{Binding GridColumnCount.Value}"
                                ColumnDefinitionWidth="0"
                                GridRowCount="{Binding GridRowCount.Value}"
                                RowDefinitionHeight="0"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem"
                BasedOn="{StaticResource MaterialDesignCardsListBoxItem}">
                <Setter Property="Margin" Value="5"/>
                <Setter Property="Grid.Row" Value="{Binding GridRowIndex}"/>
                <Setter Property="Grid.Column" Value="{Binding GridColumnIndex}"/>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <views:RegisterCaseControl DataContext="{Binding ControlViewModel}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

このxaml内でGridを継承したカスタムコントロール(CustomGrid)を使っています。
今回の記事は、このCustomGridのコードをご紹介させていただこうと思います。

カスタムGrid (AutoGrid)

Gridを継承して、AutoGridというカスタムコントロールを作成します。

public class AutoGrid : Grid

添付プロパティ

Columnの「幅」「数」
Rowの「高さ」「数」
　にあたる添付プロパティ(Dependency Property)を作成します。

        #region ColumnDefinitionWidth
        /// <summary>
        /// Row.Width
        /// 　負数：固定高(50pixel)
        /// 　 0　：可変(1*)
        /// 　正数：指定高
        /// </summary>
        public static readonly DependencyProperty ColumnDefinitionWidthProperty =
                                    DependencyProperty.Register("ColumnDefinitionWidth",
                                        typeof(int),
                                        typeof(AutoGrid),
                                        new PropertyMetadata(50));
        public int ColumnDefinitionWidth
        {
            get { return (int)GetValue(ColumnDefinitionWidthProperty); }
            set { SetValue(ColumnDefinitionWidthProperty, value); }
        }
        #endregion

        #region ColumnCount
        public static readonly DependencyProperty GridColumnCountProperty =
                                    DependencyProperty.RegisterAttached("GridColumnCount",
                                        typeof(int),
                                        typeof(AutoGrid),
                                        new PropertyMetadata(0, new PropertyChangedCallback(OnGridColumnCountChanged)));
        public int GridColumnCount
        {
            get { return (int)GetValue(GridColumnCountProperty); }
            set { SetValue(GridColumnCountProperty, value); }
        }

        #endregion

        #region RowDefinitionHeight
        /// <summary>
        /// Row.Height
        /// 　負数：固定高(14pixel)
        /// 　 0　：可変(1*)
        /// 　正数：指定高
        /// </summary>
        public static readonly DependencyProperty RowDefinitionHeightProperty =
                                    DependencyProperty.Register("RowDefinitionHeight",
                                        typeof(int),
                                        typeof(AutoGrid),
                                        new PropertyMetadata(-1));
        public int RowDefinitionHeight
        {
            get { return (int)GetValue(RowDefinitionHeightProperty); }
            set { SetValue(RowDefinitionHeightProperty, value); }
        }
        #endregion

        #region RowCount 
        public static readonly DependencyProperty GridRowCountProperty =
                                    DependencyProperty.RegisterAttached("GridRowCount",
                                        typeof(int),
                                        typeof(AutoGrid),
                                        new PropertyMetadata(1, new PropertyChangedCallback(OnGridRowCountChanged)));
        public int GridRowCount
        {
            get { return (int)GetValue(GridRowCountProperty); }
            set { SetValue(GridRowCountProperty, value); }
        }

        #endregion

PropertyChangedCallback

Row, Columnの数を設定した際のイベントを作成します。

OnGridRowCountChanged

Rowを指定された「数」で、指定された「高さ」で作成します

        /// <summary>
        /// GridRowCountで指定された数のRowDefinitionsを作成
        /// </summary>
        /// <param name="d"></param>
        /// <param name="e"></param>
        private static void OnGridRowCountChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (!(d is Grid) || (int)e.NewValue < 0)
                return;

            Grid grid = (Grid)d;

            grid.RowDefinitions.Clear();

            int heightProperty = (int)d.GetValue(RowDefinitionHeightProperty);

            for (int i = 0; i < (int)e.NewValue; i++)
            {

                RowDefinition rowDefinition = new RowDefinition();
                if (heightProperty < 0)
                {
                    rowDefinition.Height = new GridLength(14, GridUnitType.Pixel);
                }
                else if (heightProperty > 0)
                {
                    rowDefinition.Height = new GridLength(heightProperty, GridUnitType.Pixel);
                }
                else if (heightProperty == 0)
                {
                    rowDefinition.Height = new GridLength(1, GridUnitType.Star);
                }
                grid.RowDefinitions.Add(rowDefinition);
            }
        }

OnGridColumnCountChanged

Columnを指定された「数」で、指定された「幅」で作成します

        /// <summary>
        /// GridColumnCountで指定された数のColumnDefinitionsを作成
        /// </summary>
        /// <param name="d"></param>
        /// <param name="e"></param>
        private static void OnGridColumnCountChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (!(d is Grid) || (int)e.NewValue < 0)
                return;

            Grid grid = (Grid)d;

            grid.ColumnDefinitions.Clear();

            int widthProperty = (int)d.GetValue(ColumnDefinitionWidthProperty);

            for (int i = 0; i < (int)e.NewValue; i++)
            {

                ColumnDefinition columnDefinition = new ColumnDefinition();
                if (widthProperty < 0)
                {
                    columnDefinition.Width = new GridLength(50, GridUnitType.Pixel);
                }
                else if (widthProperty > 0)
                {
                    columnDefinition.Width = new GridLength(widthProperty, GridUnitType.Pixel);
                }
                else if (widthProperty == 0)
                {
                    columnDefinition.Width = new GridLength(1, GridUnitType.Star);
                }
                grid.ColumnDefinitions.Add(columnDefinition);
            }
        }

実装

あとは、作成したカスタムコントロールを参照指定して、xaml内で以下のような感じで記述すればOKです。
.ValueがついているのはReactivePropertyを使用しているためです。

xmlns:customgrid="clr-namespace:..(参照先)..."

    <customgrid:CustomGrid GridColumnCount="{Binding GridColumnCount.Value}"
                        ColumnDefinitionWidth="0"
                        GridRowCount="{Binding GridRowCount.Value}"
                        RowDefinitionHeight="0"/>