c# - 在代码隐藏中动态地将内容添加到堆栈面板

Question

我正在尝试在代码隐藏的堆栈面板中添加一组标签和图像。最后将该堆栈面板附加到网格控件的特定列。我的预期输出应该是这样的

<image><label> 

组合

但我的输出就像它在网格的第一列中显示标签，在下一列中显示图像。(我无法添加快照，因为我没有足够的声誉)

XAML 代码

<Window x:Class="Ping.MainWindow" WindowStyle="ThreeDBorderWindow" Icon="F:\ChatApplication\Ping\Ping\Images\title.ico" Cursor="Pen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Ping - Connected by alphabets" Height="450" Width="750" WindowStartupLocation="CenterScreen" SizeToContent="WidthAndHeight"  >
<Grid Name="grid_window">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <GridSplitter HorizontalAlignment="Right" 
              VerticalAlignment="Stretch" 
              Grid.Column="1" ResizeBehavior="PreviousAndNext"
              Width="5" Background="#FFBCBCBC"/>

    <TabControl Grid.ColumnSpan="2" Name="tab_control" BorderBrush="Cornsilk" BorderThickness="4" HorizontalAlignment="Left" Height="419" Margin="227,0,0,0" VerticalAlignment="Top" Width="515">
        <TabItem Header="Home" BorderBrush="Green"/>
    </TabControl>
</Grid>

代码隐藏

public MainWindow()
    {
        InitializeComponent();
        DBCoding dbobj = new DBCoding();
        //Contains names {"Dhivi","Walle"}
        List<string> online = new List<string>();

        online = dbobj.onlineUsers();
        StackPanel myStackPanel = new StackPanel();
        myStackPanel.Orientation = Orientation.Vertical;
        foreach (var item in online)
        {
            Image myImage = new Image();
            myImage.Source = new BitmapImage(new Uri("F:\\ChatApplication\\Ping\\Ping\\Images\\visible.png"));
            myImage.Width = 10;
            myImage.Height = 10;
            //myImage.Margin = new Thickness(-10,0,-80,0);
            myImage.Height = 10;
            Label user = new Label();
            user.Content = item.ToString();
            myStackPanel.Children.Add(myImage);
            myStackPanel.Children.Add(user);
        }
        grid_window.Children.Add(myStackPanel);
        Grid.SetColumnSpan(myStackPanel, 1);
        Grid.SetColumn(myStackPanel, 0);

    }

谁能告诉我解决办法

Answer 1

使用数据绑定(bind)、ItemsControl 和 DataTemplate，您的代码应该是这样的:

XAML

<Window x:Class="Ping.MainWindow" WindowStyle="ThreeDBorderWindow" Icon="F:\ChatApplication\Ping\Ping\Images\title.ico" Cursor="Pen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Ping - Connected by alphabets" Height="450" Width="750" WindowStartupLocation="CenterScreen" SizeToContent="WidthAndHeight"  >
<Grid Name="grid_window">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <GridSplitter HorizontalAlignment="Right" 
              VerticalAlignment="Stretch" 
              Grid.Column="1" ResizeBehavior="PreviousAndNext"
              Width="5" Background="#FFBCBCBC"/>

    <TabControl Grid.ColumnSpan="2" Name="tab_control" BorderBrush="Cornsilk" BorderThickness="4" HorizontalAlignment="Left" Height="419" Margin="227,0,0,0" VerticalAlignment="Top" Width="515">
        <TabItem Header="Home" BorderBrush="Green"/>
    </TabControl>

    <ItemsControl ItemsSource="{Binding}">
        <ItemsControl.ItemTemplate>
             <DataTemplate>
                  <DockPanel>
                      <!-- You really should add the image as a resource to the project -->
                      <Image Source="F:\ChatApplication\Ping\Ping\Images\visible.png" 
                             Width="10" Height="10" />
                      <TextBlock Text="{Binding}" />
                  </DockPanel>
              </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

C#

public MainWindow()
{
    InitializeComponent();

    DBCoding dbobj = new DBCoding();
    List<string> online = dbobj.onlineUsers();
    DataContext = online;
}