0

動的グリッドを使用して UI を構築したいと考えています。少なくとも、グリッドは進むべき道だと思います。各セルのコントロールは同じでなければなりませんTextBox。

各行には異なる数のセルを含めることができ、ColumnSpanプロパティを使用してUIを次のように見せることを考えました

First row, 2 cells
Second row, 3 cells
Third row, 1 cell

各セルは fe の一部である必要があり、、、ObservableCollection<MyCellClass>などのプロパティを持つ必要があります。RowColumnColumnspanText

動的グリッドを構築する方法は知っていますが、テンプレートを使用してセルのコンテンツを設定する方法と、テキスト ボックスをデータバインドする方法がわかりません。

たぶん私のアプローチは最善ではなく、あなたは私の問題を解決するための他のアイデアを持っています.

4

2 に答える 2

2

Grid をItemsPanelItemsControl の として使用し、ItemsSourceプロパティを ObservableCollection にバインドできます。

cell クラスが次のようになっていると仮定します。

public class Cell
{
    public int Column { get; set; }
    public int ColumnSpan { get; set; }
    public int Row { get; set; }
    public int RowSpan { get; set; }
    public string Text { get; set; }
}

XAML は次のように記述できます。

<ItemsControl ItemsSource="{Binding}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.Column" Value="{Binding Column}"/>
            <Setter Property="Grid.ColumnSpan" Value="{Binding ColumnSpan}"/>
            <Setter Property="Grid.Row" Value="{Binding Row}"/>
            <Setter Property="Grid.RowSpan" Value="{Binding RowSpan}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBox Text="{Binding Text}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

次のコードは、ItemsControl の 2 つのセルを初期化します。

public MainWindow()
{
    InitializeComponent();

    var cells = new ObservableCollection<Cell>();
    cells.Add(new Cell { Column = 0, Row = 0, ColumnSpan = 1, RowSpan = 1, Text = "Cell 1" });
    cells.Add(new Cell { Column = 2, Row = 2, ColumnSpan = 2, RowSpan = 1, Text = "Cell 2" });
    DataContext = cells;
}
于 2013-05-16T10:34:42.633 に答える