具备界面基础功能

SHH.CameraDashboard/Pages/CameraItemTop.xaml.cs

@@ -0,0 +1,55 @@
+using System.Windows;
+using System.Windows.Controls;
+
+namespace SHH.CameraDashboard
+{
+    /// <summary>
+    /// CameraItemTop.xaml 的交互逻辑
+    /// </summary>
+    public partial class CameraItemTop : UserControl
+    {
+        // 持有 ViewModel 的实例
+        private CameraItemTopViewModel _viewModel;
+
+        public CameraItemTop()
+        {
+            InitializeComponent();
+
+            // 1. 初始化 ViewModel
+            _viewModel = new CameraItemTopViewModel();
+
+            // 2. 设置 DataContext，这样 XAML 里的 {Binding Name} 就能找到 VM 里的属性
+            this.DataContext = _viewModel;
+        }
+
+        // ============================================================
+        //  定义依赖属性 (DependencyProperty) - 这是接收绑定的关键
+        // ============================================================
+
+        // 注册一个名为 "DataSource" 的依赖属性
+        public static readonly DependencyProperty DataSourceProperty =
+            DependencyProperty.Register(
+                nameof(DataSource),                         // 属性名
+                typeof(WebApiCameraModel),                  // 属性类型
+                typeof(CameraItemTop),                      // 所属类型
+                new PropertyMetadata(null, OnDataSourceChanged)); // 回调函数
+
+        // 这是一个普通的包装属性，方便代码访问
+        public WebApiCameraModel DataSource
+        {
+            get => (WebApiCameraModel)GetValue(DataSourceProperty);
+            set => SetValue(DataSourceProperty, value);
+        }
+
+        // 当外部绑定的数据发生变化时（比如用户在左侧列表点选了新项）
+        private static void OnDataSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var control = d as CameraItemTop;
+            if (control != null && control._viewModel != null)
+            {
+                // 【核心逻辑】将外部传进来的数据，转发给 ViewModel
+                control._viewModel.Camera = e.NewValue as WebApiCameraModel;
+            }
+        }
+    }
+}