Question

请原谅长度，试图确保包含所有信息！

我需要一个单元格视图（具有相应VM的视图）几乎像这样的圆圈：

   ********
  **********
 ************
**************
**************
**************
**************
 ************
  **********
   ********

一些并发症：在我们启动之前，我不知道要显示多少个单元格。所有细胞的大小必须相等。整个视图必须是可扩展的。

在我简化的世界中，我的窗口创建了20个RowViewModel对象，并为每个构造函数传递它应该创建的列数。

我的主要观点：

<Viewbox Stretch="Uniform">
    <ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}},Path=Rows}" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="{Binding Path=Rows.Count}" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Viewbox>

我的RowView：

<Grid>
    <ItemsControl ItemsSource="{Binding Columns}" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="{Binding Columns.Count}"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

我的手机视图：

<Border >
    <Viewbox Stretch="Uniform" >
        <Label FontSize="10" Content="{Binding Notice}" Foreground="White" />
    </Viewbox>
</Border>

就目前而言，所有行的宽度都相同，因此具有较少单元格的行具有较宽的单元格。如果我告诉每一行有20个单元格，每个单元格大小相同但是尽管使用了HorizontalAlignment设置，所有内容都会左对齐，可能是因为它附加了空白单元格。我假设我可以在我想要的地方插入空白单元格，但这感觉就像数据的软糖一样使显示正确，我相信你会同意的是B-A-D。

我已经尝试了多种方法并且认为这是迄今为止最接近但我错过了它。你能帮忙吗？

感谢您的耐心等待。

Answer 1

嗯，也许这不可能？我最终向ViewModel添加了一个属性，用于构建网格并在生成期间分配适当的行/列，然后将contentcontrol数据绑定到该网格。

它仍未解决 - 如何在XAML中完成？

观点：

<Viewbox Stretch="Uniform">
    <ContentControl Content="{Binding PrettyGrid}" />
</Viewbox>

在ViewModel中：

public Grid PrettyGrid
{
    get
    {
        return BuildGrid(data);
    }
}

和BuildGrid片段：

private static Grid BuildGrid(List<objects> cellData)
{
    var localGrid = new Grid();

    // ...

    localGrid.RowDefintions.Add(...);
    localGrid.ColumnDefinitions.Add(...);

    cellData.ForEach(cell => 
    {
        ContentControl ctl = new ContentControl();
        ctl.Content = cell;
        Grid.SetRow(ctl, cell.Row);
        Grid.SetColumn(ctl, cell.Column);
        localGrid.Children.Add(ctl);
    });

    return localGrid;
}

通用，可绑定，均匀拉伸布局

1 个答案: