Question

我需要在WPF中创建动态UI。如下所示，

  Date   Hyatt Regency  Ritz Carlton    Holiday Inn..
             16             10               5
 12/16      20%             12%             10%

            10              5                4
 12/17      2%              3%               1%

现在，我的问题是，由于整个用户界面都是动态的，酒店会命名数字金额，我无法正确分配它们。因此，如果酒店名称变长，则下面的记录不能正确对齐。在WPF中是否有一种方法可以动态地从代码创建XAML并且看起来仍然是完美的间距。

Answer 1

您是否尝试过DataGrid？

如果内置的没有为你做，那么有很多第三方数据网格控件：

Telerik GridView

DevExpress DXGrid

还有更多。如果你环顾四周，你也可以找到免费的。

Answer 2

我认为你是在追求这样的事情：

public partial class Window2 : Window
{
    public Window2()
    {
        InitializeComponent();

        List<List<String>> data = GetData();
        var grid = CreateGrid(data.Count, data.First().Count());
        PopulateGrid( grid, data );
        this.Content = grid;            
    }

    private void PopulateGrid(Grid grid, List<List<string>> data)
    {
        int rowNumber = 0;
        foreach (var rowContents in data)
        {
            int colNumber = 0;
            foreach (var colValue in rowContents)
            {
                var tb = new TextBlock { Text = colValue, HorizontalAlignment = HorizontalAlignment.Center, Margin=new Thickness(5) };
                Grid.SetRow(tb, rowNumber);
                Grid.SetColumn(tb, colNumber);
                grid.Children.Add(tb);
                colNumber++;
            }
            rowNumber++;
        }
    }

    private List<List<string>> GetData()
    {
        return new List<List<String>>() 
        {
            new List<String>( ) { "Date",  "Hyatt Regency",  "Ritz Carlton", "Holiday Inn" },
            new List<String>( ) { "",  "16",  "10", "5" },
            new List<String>( ) { "12/16",  "20%",  "12%", "10%" },
            new List<String>( ) { "",  "",  "", "" },
            new List<String>( ) { "",  "10",  "5", "4" },
            new List<String>( ) { "12/17",  "2%",  "3%", "1%" },
        };
    }

    private Grid CreateGrid(int rows, int cols)
    {
        var grid = new Grid();

        for (int r = 0; r < rows; r++)
            grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
        for (int c = 0; c < rows; c++)
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });

        return grid;
    }
}

Answer 3

您可以使用常规旧Grid：

日期凯悦酒店丽思卡尔顿假日酒店

    <TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right">16</TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right">10</TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="3" HorizontalAlignment="Right">5</TextBlock>

    <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center">12/16</TextBlock>
    <TextBlock Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right">20%</TextBlock>
    <TextBlock Grid.Row="2" Grid.Column="2" HorizontalAlignment="Right">12%</TextBlock>
    <TextBlock Grid.Row="2" Grid.Column="3" HorizontalAlignment="Right">10%</TextBlock>

    <TextBlock Grid.Row="3" Grid.Column="1" HorizontalAlignment="Right">10</TextBlock>
    <TextBlock Grid.Row="3" Grid.Column="2" HorizontalAlignment="Right">5</TextBlock>
    <TextBlock Grid.Row="3" Grid.Column="3" HorizontalAlignment="Right">4</TextBlock>

    <TextBlock Grid.Row="4" Grid.Column="0" HorizontalAlignment="Center">12/17</TextBlock>
    <TextBlock Grid.Row="4" Grid.Column="1" HorizontalAlignment="Right">2%</TextBlock>
    <TextBlock Grid.Row="4" Grid.Column="2" HorizontalAlignment="Right">3%</TextBlock>
    <TextBlock Grid.Row="4" Grid.Column="3" HorizontalAlignment="Right">1%</TextBlock>
  </Grid>
  <TextBlock/>
</DockPanel>

但是如果你使用代码隐藏构建这样的东西，那你就错了。您应该使用数据模板和绑定。为此，您实际上为每个数据块创建一个单独的网格，并使用共享大小组来保持列宽度同步。这是一个更大的问题，但是你可以在布局正确之后解决这个问题。

帮助WPF UI

3 个答案: