在后面的代碼中創建一個具有動態大小的 WPF 對象

Question

我想在 wpf 中使用網格繪制條形圖。 由於設計問題，我創建了一個包含 6 行預定義行的網格，但如有必要可以添加更多行。

作為酒吧，我也想使用網格（矩形也可能是可能的，但我想稍后在其中寫入文本，到目前為止使用網格更容易）

彼此相鄰的所有條形將是主網格大小的 100%，而每個條形本身只是它們組合值的斷裂（以 % 為單位）。 每個條形都在自己的行中，中間有一個小間隙。

我很難找到一種方法來將條形的大小設置為主網格大小的百分比。

到目前為止，我的代碼如下所示：

XAML：

<Window x:Class="BarChart.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:BarChart"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">

<Grid Height="Auto" Width="Auto">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Name="MainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="4"/>
            <RowDefinition/>
            <RowDefinition Height="4"/>
            <RowDefinition/>
            <RowDefinition Height="4"/>
        </Grid.RowDefinitions>
    </Grid>
</Grid>

C＃：

    namespace BarChart
{
    /// <summary>
    /// tbd
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            int counter = 1;
            int counter_c = 0;
            double[] values = { 656, 333, 812 };
            SolidColorBrush[] colors = { new SolidColorBrush(Colors.Red), new SolidColorBrush(Colors.Green), new SolidColorBrush(Colors.Blue) };
            double maxValue = 0;
            foreach (double d in values)
            {
                maxValue = maxValue + d;
            }


        InitializeComponent();

        foreach (double d in values)
        {
            if(MainGrid.RowDefinitions.Count > counter)
            {
                RowDefinition row = new RowDefinition();
                MainGrid.RowDefinitions.Add(row);
                RowDefinition gap = new RowDefinition();
                gap.Height = new GridLength(4);
                MainGrid.RowDefinitions.Add(gap);

            }
            Grid gd = new Grid();
            gd.Width = d / maxValue * MainGrid.ActualWidth;
            gd.Background = colors[counter_c];
            Grid.SetRow(gd, counter);
            counter += 2;
            counter_c++;
            MainGrid.Children.Add(gd);
        }

    }
}

目前，高度和寬度（MainGrid.ActualWidth 當前為 0）似乎都沒有設置為任何可用的值。 我希望我的條形圖隨每個窗口大小動態縮放（Ofc 我稍后也需要一個調整大小事件。但首先我需要能夠繪制一次）。

Answer 1

看起來您正試圖在構造函數中找到MainGrid.ActualWidth ，這將是在可視化創建控件之前。 為了解決這個問題，連接一個ContentRendered事件並將邏輯放在那里。

public MainWindow()
    {
        this.ContentRendered += MainWindow_ContentRendered;
        InitializeComponent();
    }

    private void MainWindow_ContentRendered(object sender, EventArgs e)
    {
        // Your Logic here...
    }

UserControls沒有此事件，但您可以改用Loaded事件。

public YourUserControl()
    {
        this.Loaded += YourUserControl_Loaded;
        InitializeComponent();
    }

    private void YourUserControl_Loaded(object sender, RoutedEventArgs e)
    {
        // Your Logic here...
    }

這些事件將在控件創建后觸發，您將能夠看到具有適當值的ActualWidth屬性。