在Stackpanel中排列子元素

Question

我使用單獨的類創建了一個Inkcanvas控件。我以以下方式創建了stackpanel。我正嘗試通過以下方式將inkcanvas插入stackpanel。但是該inkcanvas被添加到了窗口之外。請找到我的錯誤。

XAML代碼為

<StackPanel  Name="stkm" Background="CadetBlue" HorizontalAlignment="Right" Orientation="Horizontal" Width="1140" Margin="0,107,-1,94" Grid.Column="1">
    <Grid Height="459" Name="grid2" Width="1130">

    </Grid>
</StackPanel>

我的inkcanvas類代碼是

class mycan : InkCanvas
{
    string name;
    public mycan(string n)
    {
        name = n;
        this.Width =  250;
        this.Height = 200;
        // MouseDown += class1_MouseDown;
        Margin = new Thickness(5, 2, 5, 2);           

        // MouseRightButtonDown += class1_MouseRightButtonDown;     
    }
}

IAM通過以下方式添加stackpanel子級

public MainWindow()
{
    InitializeComponent();
    mycan mycanvas1 = new mycan("PA");
    mycan mycanvas2 = new mycan("RA");
    mycan mycanvas3 = new mycan("JA");           
    stkm.Children.Add(mycanvas1);
    stkm.Children.Add(mycanvas2);
    stkm.Children.Add(mycanvas3);
}

Answer 1

有什么特殊的原因需要將InkCanvas動態添加到StackPanel中？

一種簡單得多的方法是使用以下方法：

<StackPanel  Name="stkm" Background="CadetBlue" HorizontalAlignment="Right" Orientation="Horizontal" Width="1140" Margin="0,107,-1,94" Grid.Column="1">
   <Grid Height="459" Name="grid2" Width="1130">
      <InkCanvas Name="PA" Width="250" Height="200" Margin="5,2"/>
      <InkCanvas Name="RA" Width="250" Height="200" Margin="5,2"/>
      <InkCanvas Name="JA" Width="250" Height="200" Margin="5,2"/>
   </Grid>
</StackPanel>

另外，如果您確實需要動態生成InkCanvas，則實際上不需要在新類中從InkCanvas繼承。

InkCanvas mycanvas1 = new InkCanvas()
{
   Name = "PA",
   Width = 250,
   Height = 200,
   Margin = new Thickness(5, 2, 5, 2)
};

Answer 2

主要問題是您在XAML文件中添加到StackPanel的Grid幾乎完全填滿了StackPanel-StackPanel的寬度為1140px，而Grid的寬度為1130px。

請記住，StackPanels使用相對布局工作，這意味着一個元素的位置取決於上一個元素的大小和位置。 這意味着，在網格之后，僅剩下10px的StackPanel用於InkCanvas。 如果您打算使用絕對布局，請改為將畫布添加到Grid控件中。

不過，我也同意Mike Eason的觀點。 通常，最佳做法是在XAML中保留盡可能多的UI代碼。 您可以使用Visibility屬性在運行時顯示/隱藏畫布。 可以通過代碼隱藏，甚至更好地使用數據綁定來更改此屬性。

<StackPanel  Name="stkm" Background="CadetBlue" HorizontalAlignment="Right" Orientation="Horizontal" Width="1140" Margin="0,107,-1,94" Grid.Column="1">
    <InkCanvas Name="PA" Width="250" Height="250" Margin="5, 2, 5, 2" Visibility="Visible" />
    <InkCanvas Name="RA" Width="250" Height="250" Margin="5, 2, 5, 2" Visibility="Visible" />
    <InkCanvas Name="JA" Width="250" Height="250" Margin="5, 2, 5, 2" Visibility="Collapsed" />
</StackPanel>