在后面的代碼中將內容動態添加到stackpanel

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

使用數據綁定， 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;
}