WPF开发实战项目（一）——老化监测平台01

WPF开发实战项目（一）——老化监测平台01

本文介绍了初始数据界面的功能需求、原型图和WPF界面实现。

初始数据界面

功能

可以导入/导出数据文件，数据文件显示在表格中，有简单的使用说明，点击【完成】关闭当前窗口。

原型图

步骤

Step1 划分界面区域

按照原型图划分界面区域。

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition Height="80"/>
            <RowDefinition Height="210"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
    </Grid>

Step2 Part1部分实现

<TextBlock Text="快速开始" Foreground="Black" FontSize="28"
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>

Step3 Part2部分实现

由于此处为水平分布，故采用StackPanel容器。

<StackPanel Grid.Row="1" Orientation="Horizontal">
            <StackPanel Orientation="Horizontal" Margin="57,0">
                <Button Content="选择文件"  FontSize="16" Height="25"/>
                <TextBlock Text="未选择文件" Margin="3,0,160,0" Foreground="Gray" FontSize="16" Height="20"/>
            </StackPanel>
            <Button Content="导入" Margin="30,0" Height="31" Width="61" FontSize="16"/>
            <Button Content="导出" Height="32" Width="60" FontSize="16"/>
        </StackPanel>

Step3 Part3部分实现

分为两部分，一部分采用一个开源的表格控件库ReoGrid，帮助说明则使用TextBlock显示。

<StackPanel Grid.Row="2" Orientation="Horizontal">
            <reoGrid:ReoGridControl x:Name="reoGridControl" Margin="36,0,0,0" Width="335" Height="Auto" Readonly="True" 
             SheetTabNewButtonVisible="False" ShowScrollEndSpacing="False" SheetTabVisible="False"/>
            <Border Width="163" Margin="90,0,0,0">
                <TextBlock Text="使用说明：                                                        1.请联系开发者获取机型文件模板，按照模板填写完成后再【选择文件】进行【导入】                                                        2.导入完成后请人为查看数据是否无误，若确定无误请点击【完成】按钮进入监控页面" 
                           MaxWidth="160" TextWrapping="Wrap" FontSize="16"/>
            </Border>
        </StackPanel>

Step4 Part4部分实现

Part4只有一个Button元素。

<StackPanel Grid.Row="3">
            <Button Content="完成" Height="32" Width="60" FontSize="16" Margin="36,22"
                    HorizontalAlignment="Right" VerticalAlignment="Center"/>
        </StackPanel>

完整XAML源码

<Window x:Class="AgingMonitorPlatform.MainWindow"
        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"
        xmlns:reoGrid="clr-namespace:unvell.ReoGrid;assembly=unvell.ReoGrid"
        mc:Ignorable="d"
        Title="StartWindow" Height="450" Width="680">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"/>
            <RowDefinition Height="80"/>
            <RowDefinition Height="210"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <TextBlock Text="快速开始" Foreground="Black" FontSize="28"
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>

        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <StackPanel Orientation="Horizontal" Margin="57,0">
                <Button Content="选择文件"  FontSize="16" Height="25"/>
                <TextBlock Text="未选择文件" Margin="3,0,160,0" Foreground="Gray" FontSize="16" Height="20"/>
            </StackPanel>
            <Button Content="导入" Margin="30,0" Height="31" Width="61" FontSize="16"/>
            <Button Content="导出" Height="32" Width="60" FontSize="16"/>
        </StackPanel>

        <StackPanel Grid.Row="2" Orientation="Horizontal">
            <reoGrid:ReoGridControl x:Name="reoGridControl" Margin="36,0,0,0" Width="335" Height="Auto" Readonly="True" 
             SheetTabNewButtonVisible="False" ShowScrollEndSpacing="False" SheetTabVisible="False"/>
            <Border Width="163" Margin="90,0,0,0">
                <TextBlock Text="使用说明：                                                        1.请联系开发者获取机型文件模板，按照模板填写完成后再【选择文件】进行【导入】                                                        2.导入完成后请人为查看数据是否无误，若确定无误请点击【完成】按钮进入监控页面" 
                           MaxWidth="160" TextWrapping="Wrap" FontSize="16"/>
            </Border>
        </StackPanel>

        <StackPanel Grid.Row="3">
            <Button Content="完成" Height="32" Width="60" FontSize="16" Margin="36,22"
                    HorizontalAlignment="Right" VerticalAlignment="Center"/>
        </StackPanel>
    </Grid>
</Window>

运行效果

添加ReoGrid库

使用 NuGet 安装 ReoGrid。点击【工具】-【NuGet包管理器】-【管理解决方案的NuGet程序包】，直接搜索 “ReoGrid”，选择 unvell.ReoGridWPF，当前最新版是 3.0.0。选中安装即可。

安装完成后需要在xaml语言中添加命名空间的引用，即可与其他控件一样对其进行设置。

 xmlns:reoGrid="clr-namespace:unvell.ReoGrid;assembly=unvell.ReoGrid"