wpf图书借阅管理系统页面设计

### WPF 图书借阅管理系统页面布局与 UI 设计

#### 创建项目结构
为了构建一个功能完善的图书借阅管理系统，在 Visual Studio 中新建一个名为 `LibraryManagementSystem` 的 WPF 应用程序。此操作会自动生成带有 App.xaml 文件的解决方案，该文件负责配置 Application 类并指定启动界面。

<!-- App.xaml -->
<Application x:Class="LibraryManagementSystem.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!-- 可在此处定义全局样式和其他资源 -->
    </Application.Resources>
</Application>

#### 主窗口设计 (MainWindow.xaml)

主窗口作为应用的主要入口点，通常用于展示导航菜单或其他核心组件。这里采用 Grid 布局来安排控件位置，并利用 StackPanel 来组织按钮排列[^1]：

<Window x:Class="LibraryManagementSystem.MainWindow"
        Title="图书馆借阅管理" Height="450" Width="800">

    <Grid Background="#FFDDEBF7">
        <DockPanel LastChildFill="True">
            <Menu DockPanel.Dock="Top">
                <MenuItem Header="_文件"/>
                <MenuItem Header="_编辑"/>
                <MenuItem Header="_帮助"/>
            </Menu>

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,30,10,0">
                <Button Content="登录" Padding="10,5"/>
                <Button Content="退出" Padding="10,5"/>
            </StackPanel>

            <TabControl Name="MainTabCtrl" BorderBrush="{x:Null}" >
                <TabItem Header="书籍列表">
                    <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Books}">
                        <DataGrid.Columns>
                            <DataGridTextColumn Binding="{Binding Id}" Header="编号"/>
                            <DataGridTextColumn Binding="{Binding Title}" Header="名称"/>
                            <DataGridTextColumn Binding="{Binding Author}" Header="作者"/>
                            <DataGridTextColumn Binding="{Binding Status}" Header="状态"/>
                        </DataGrid.Columns>
                    </DataGrid>
                </TabItem>
                
                <TabItem Header="借还记录">
                    <ListView ItemsSource="{Binding BorrowRecords}">
                        <ListView.View>
                            <GridView>
                                <GridViewColumn DisplayMemberBinding="{Binding UserId}" Header="读者ID"/>
                                <GridViewColumn DisplayMemberBinding="{Binding BookId}" Header="书籍ID"/>
                                <GridViewColumn DisplayMemberBinding="{Binding DateBorrowed}" Header="借出日期"/>
                                <GridViewColumn DisplayMemberBinding="{Binding DueDate}" Header="应还日期"/>
                                <GridViewColumn DisplayMemberBinding="{Binding ReturnDate}" Header="实际归还日期"/>
                            </GridView>
                        </ListView.View>
                    </ListView>
                </TabItem>
            </TabControl>
            
        </DockPanel>
        
    </Grid>
    
</Window>

上述 XAML 定义了一个包含顶部菜单栏、右侧快捷按钮以及标签页视图的主窗口。其中 DataGrid 和 ListView 控件分别用来显示书籍信息表单和历史借阅记录表格数据。

#### 数据绑定模型类

为了让界面上的数据能够动态更新，还需要编写相应的 ViewModel 或 Model 层代码实现 MVVM 架构模式下的双向绑定机制。以下是简化版的 C# 实现片段：

using System.Collections.ObjectModel;
// ...

public partial class MainWindow : Window {
    public ObservableCollection<Book> Books { get; set; }
    public ObservableCollection<BorrowRecord> BorrowRecords { get; set; }

    public MainWindow() {
        InitializeComponent();
        DataContext = this;

        // 初始化模拟数据源...
        LoadSampleBooks();
        LoadSampleBorrowRecords();
    }

    private void LoadSampleBooks(){
        Books = new ObservableCollection<Book>(new[]{
            new Book{Id=1,Title="C#",Author="Jon Skeet",Status="可借"},
            new Book{Id=2,Title=".NET Core",Author="Andrew Troelsen",Status="已借"}
        });
    }

    private void LoadSampleBorrowRecords(){
        BorrowRecords = new ObservableCollection<BorrowRecord>(new[]{
            new BorrowRecord{
                UserId=1,
                BookId=2,
                DateBorrowed=new DateTime(2023,9,1),
                DueDate=new DateTime(2023,9,30),
                ReturnDate=null
            }
        });
    }
}

public class Book {
    public int Id {get;set;}
    public string Title {get;set;}
    public string Author {get;set;}
    public string Status {get;set;} 
}
public class BorrowRecord {
    public int UserId {get;set;}
    public int BookId {get;set;}
    public DateTime? DateBorrowed {get;set;}
    public DateTime? DueDate {get;set;}
    public DateTime? ReturnDate {get;set;}
}

这段代码展示了如何初始化一些测试性的书籍条目和借阅日志项，并将其赋给对应的集合属性以便于前端呈现。同时设置了当前实例为 View 的 DataContext ，从而允许使用简单的路径表达式完成字段间的关联映射关系。