Question

我目前正在尝试设计一个如下所示的条形图：每行的行数和条数可以根据我的图表所依赖的dataTable而变化。（差距不是意图，但不是我的问题）

bar chart

我试图通过使用网格来实现我的BarChart。我的DataTable为我提供了一个Key，一个Length，一个Name和一个Parent（这是右边栏的键，因为每一行只是将右边的栏分成更小的栏）。

网格大小目前基于我的maingrid，它在XAML-ViewModel中设置为900 * 400。我的酒吧目前设置为他们的长度/ MaxLength * GridLength（而第一个Bar总是MaxLength）并且有一个保证金，因为我希望他们从右到左。我的问题是，我希望这个网格的大小是动态的，但是如果我没有为我的MainGrid设置固定的大小，我的网格的大小是NaN或0。

我删除了一些非常令人困惑的部分，但基本上这是我的代码背后：

<UserControl x:Class="WpfApp.MainWindow"
    <Grid x:Name="MainGrid"  Background="#f0f0f0" Height="400" Width="900" />
</UserControl>

XAML：

private placeTable() {

    Word.run(function (context) {
        var values = [["Apple"]];
        var selectionRange = context.document.getSelection();
        var paragraph = selectionRange.insertParagraph("", "Before");

        return context.sync()
            .then(function () {
                var table = paragraph.insertTable(1, 1, "Before", values);
                var contentControl = table.insertContentControl();
            })
            .then(context.sync)
            .catch(function (error) {
                console.log(error);
            });
    });

我也尝试过使用ItemsControl，但我似乎无法使用它。

Answer 1

要使大小调整动态，可以使用网格和网格列。 Grid是一个很棒的布局控件，因为它可以使用所有可用空间。只要确保不要在任何时候设置其或其列宽。这样外部控件（如Page或Window）可以控制它使用的空间。

过程：

通过查找数据表中的最大长度来确定maxLength值。
将多个网格列添加到网格中。确保不要设置列宽。以下代码与添加* -column相同，这是我们需要的：
```
for (int i = 0; i < maxLength; i++)
{
    MyGrid.ColumnDefinitions.Add(new ColumnDefinition());
}
```

对于每个条形，创建矩形但不要设置它们的宽度或边距。而是设置Column和ColumnSpan。例如：

var rectangle = new Rectangle
{
    Fill = new SolidColorBrush(Colors.LightGray),
    Opacity = 0.5,
    Margin = new Thickness(0, -10, 0, 0),
    Height = 66
};

MyGrid.SetColumn(rectangle, (int)maxLength - data.Length);
MyGrid.SetColumnSpan(rectangle, data.Length);

希望这会有所帮助。如果您遇到任何问题，请告诉我。

在代码隐藏中设置WPF对象的动态大小

1 个答案: