ComputerRoom.xaml

 前办场

<UserControl x:Class="ComputerDropDragControl.ComputerRoom"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel  Orientation="Vertical" x:Name="stackOne" HorizontalAlignment="Left" VerticalAlignment="Top">

        </StackPanel>
    </Grid>
</UserControl>

后办场

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;
using System.Collections.ObjectModel;

namespace ComputerDropDragControl
{
    /// <summary>
    /// “机房”界面
    /// 创建人：吴兆娟
    /// 创建时间：2011-10-24
    /// </summary>
    public partial class ComputerRoom : UserControl
    {
        #region <<页面加载>>

        public ComputerRoom(string roomID, UIElement ui)
        {
            InitializeComponent();

            BackElement = ui;

            RoomID = roomID;

            //加载数据
            LoadData();
            LoadDataDetail();

            //初始化界面
            InitForm();

            //加载界面           
            LoadRow();
        }

        /// <summary>
        /// 初始化界面
        /// </summary>
        private void InitForm()
        {
            //tbOne.Text = RoomID;
        }

        #endregion

        #region <<控件事件>>

        /// <summary>
        /// “排头”点击事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btnHead_Click(object sender, RoutedEventArgs e)
        {
            string rackID = "2";
            ((StackPanel)BackElement).Children.Clear();
            ComputerRack a = new ComputerRack(rackID);
            ((StackPanel)BackElement).Children.Add(a);
        }

        /// <summary>
        /// “机排”点击事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btn_Click(object sender, RoutedEventArgs e)
        {
            Button btn = (Button)sender;
            Frame entity = (Frame)btn.DataContext;
            ((StackPanel)BackElement).Children.Clear();
            ComputerRackSingle cr = new ComputerRackSingle("f1_r1");//先写死
            ((StackPanel)BackElement).Children.Add(cr);
        }

        #endregion

        #region <<辅助方法>>

        /// <summary>
        /// 加载界面
        /// </summary>
        private void LoadRow()
        {
            List<Room> result = (from room in rList
                                 where room.RoomID == RoomID
                                 select room).ToList<Room>();

            foreach (Room room in result)
            {
                LoadRowDetail(room);
            }
        }

        /// <summary>
        /// 加载行的明细
        /// </summary>
        /// <param name="rowNo"></param>
        private void LoadRowDetail(Room entity)
        {
            List<Frame> result = (from frame in fList
                                  where frame.RowNo == entity.RowNo
                                  select frame).ToList<Frame>();

            Border border = new Border();
            border.BorderBrush = new SolidColorBrush(Colors.Black);
            border.BorderThickness = new Thickness(1);
            border.Height = 150;
            border.HorizontalAlignment = HorizontalAlignment.Left;
            border.VerticalAlignment = VerticalAlignment.Bottom;
            border.Margin = new Thickness(10, 0, 0, 10);

            Grid RackGrid = new Grid();
            RackGrid.Background = new SolidColorBrush(Colors.White);
            RackGrid.Height = 180;
            RackGrid.HorizontalAlignment = HorizontalAlignment.Left;
            RackGrid.ShowGridLines = false;
            RackGrid.Width = 100 * entity.FrameCount;
            border.Width = 100 * entity.FrameCount;

            RowDefinition rd1 = new RowDefinition();
            rd1.Height = new GridLength(40);
            RowDefinition rd2 = new RowDefinition();
            rd2.Height = new GridLength(110);
            RackGrid.RowDefinitions.Add(rd1);
            RackGrid.RowDefinitions.Add(rd2);

            StackPanel stackHead = new StackPanel();
            stackHead.SetValue(Grid.ColumnSpanProperty, entity.FrameCount);
            stackHead.SetValue(Grid.RowProperty, 0);
            stackHead.Height = 40;
            stackHead.Background = new SolidColorBrush(Colors.LightGray);
            Button btnHead = new Button();
            btnHead.Content = entity.RowNo;
            btnHead.FontSize = 15;
            btnHead.VerticalAlignment = VerticalAlignment.Center;
            btnHead.Click += new RoutedEventHandler(btnHead_Click);

            stackHead.Children.Add(btnHead);
            RackGrid.Children.Add(stackHead);
            for (int i = 0; i < result.Count; i++)
            {
                ColumnDefinition c1 = new ColumnDefinition();
                c1.Width = new GridLength(100);
                RackGrid.ColumnDefinitions.Add(c1);

                Button btn = new Button();
                btn.SetValue(Grid.ColumnProperty, i);
                btn.SetValue(Grid.RowProperty, 1);
                btn.Width = 80;
                btn.Height = 80;
                btn.Content = result[i].FrameName;
                btn.Click += new RoutedEventHandler(btn_Click);
                btn.DataContext = result[i];
                RackGrid.Children.Add(btn);
            }

            border.Child = RackGrid;
            stackOne.Children.Add(border);
        }

        #endregion

        /// <summary>
        /// 机房ID
        /// </summary>
        public string RoomID { get; set; }

        public UIElement BackElement { get; set; }

        public ObservableCollection<Room> rList;

        public ObservableCollection<Frame> fList;

        #region <<定义实体类>>

        public class Room
        {
            public Room(string roomID, string rowNo, int frameCount)
            {
                RoomID = roomID;

                RowNo = rowNo;

                FrameCount = frameCount;
            }

            public string RoomID { get; set; }

            public string RowNo { get; set; }

            public int FrameCount { get; set; }
        }

        private ObservableCollection<Room> LoadData()
        {
            return rList = new ObservableCollection<Room>
            {
                new Room("1","r1_1",4),
                new Room("1","r2_1",4),
                new Room("1","r3_1",3),

                new Room("5","r1_5",7),
                new Room("5","r2_5",8),
                new Room("5","r3_5",9)
            };
        }

        public class Frame
        {
            public Frame(string frameID, string frameName, string rowNo, string roomID)
            {
                FrameID = frameID;

                FrameName = frameName;

                RowNo = rowNo;

                RoomID = roomID;
            }

            public string FrameID { get; set; }

            public string FrameName { get; set; }

            public string RowNo { get; set; }

            public string RoomID { get; set; }
        }

        private ObservableCollection<Frame> LoadDataDetail()
        {
            return fList = new ObservableCollection<Frame>
            {
                new Frame("f1_r1","A-1","r1_1","1"),
                new Frame("f2_r1","A-2","r1_1","1"),
                new Frame("f3_r1","A-3","r1_1","1"),
                new Frame("f4_r1","A-4","r1_1","1"),

                new Frame("f1_r2","A-1","r2_1","1"),
                new Frame("f2_r2","A-2","r2_1","1"),
                new Frame("f3_r2","A-3","r2_1","1"),
                new Frame("f4_r2","A-4","r2_1","1"),

                new Frame("f1_r3","A-1","r3_1","1"),
                new Frame("f2_r3","A-2","r3_1","1"),
                new Frame("f3_r3","A-3","r3_1","1"),

                new Frame("f1_r5","A-1","r1_5","5"),
                new Frame("f2_r5","A-2","r1_5","5"),
                new Frame("f3_r5","A-3","r1_5","5"),
                new Frame("f1_r5","A-4","r1_5","5"),
                new Frame("f2_r5","A-5","r1_5","5"),
                new Frame("f3_r5","A-6","r1_5","5"),
                new Frame("f3_r5","A-7","r1_5","5"),

                new Frame("f1_r5","A-1","r2_5","5"),
                new Frame("f2_r5","A-2","r2_5","5"),
                new Frame("f3_r5","A-3","r2_5","5"),
                new Frame("f1_r5","A-4","r2_5","5"),
                new Frame("f2_r5","A-5","r2_5","5"),
                new Frame("f3_r5","A-6","r2_5","5"),
                new Frame("f2_r5","A-7","r2_5","5"),
                new Frame("f3_r5","A-8","r2_5","5"),

                new Frame("f1_r5","A-1","r3_5","5"),
                new Frame("f2_r3","A-2","r3_5","5"),
                new Frame("f3_r5","A-3","r3_5","5"),
                new Frame("f1_r5","A-4","r3_5","5"),
                new Frame("f2_r5","A-5","r3_5","5"),
                new Frame("f3_r5","A-6","r3_5","5"),
                new Frame("f1_r5","A-7","r3_5","5"),
                new Frame("f2_r5","A-8","r3_5","5"),
                new Frame("f2_r5","A-9","r3_5","5")
            };
        }
        #endregion

    }
}