WPF實戰(1)-高精度定位系統測試工具頁面設計
阿新 • • 發佈:2018-12-26
簡單介紹下高精度定位系統,一句話,有一個基站,有一個標籤,通過標籤發給基站的資料來算出標籤的位置。
主窗體分為三行三列的佈局,第一行放置socket基本資訊控制元件和監控狀態控制元件,第二行放基站線上列表和資料解析元素,第三行放版權資訊,基礎佈局就是這樣。
現在來微調,因為很簡單的系統,就不做樣式分離這些了,就直接改屬性了,改完之後是這樣,簡單改了個居中,加了個漸變的背景,字型改成楷體,大小稍微調整一下。
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="奔騮科技高精度定位系統測試工具" Height="468.389" Width="846.812" FontFamily="楷體" FontSize="18" WindowStartupLocation="CenterScreen" WindowState="Maximized"> <Grid> <Grid.Background> <LinearGradientBrush> <GradientStop Color="Pink" Offset="0"></GradientStop> <GradientStop Color="Red" Offset="0.5"></GradientStop> <GradientStop Color="Purple" Offset="1"></GradientStop> </LinearGradientBrush> </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width="5*"/> <ColumnDefinition Width="23*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="44*"/> <RowDefinition Height="277*"/> <RowDefinition Height="20*"/> </Grid.RowDefinitions> <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Height="25" Margin="19,16,19,15.667" Width="112"> <Button Background="Transparent" >指定監控標籤</Button> </StackPanel> <DockPanel Grid.Column="1" Margin="1,0,0,0.667"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <Label VerticalAlignment="Center" Margin="5,0,0,0">伺服器IP地址</Label> <ComboBox VerticalAlignment="Center" Margin="5,0,0,0" Width="150"></ComboBox> <Label VerticalAlignment="Center" Margin="5,0,0,0">本地埠</Label> <TextBox VerticalAlignment="Center" Margin="5,0,0,0" Width="100"></TextBox> <RadioButton VerticalAlignment="Center" Margin="5,0,0,0">開始監聽</RadioButton> <RadioButton VerticalAlignment="Center" Margin="5,0,0,0">結束監聽</RadioButton> </StackPanel> </DockPanel> <TreeView Grid.Row="1" Grid.ColumnSpan="2" Margin="0,0.333,657,0.333"> <TreeViewItem Header="線上裝置" IsExpanded="True"></TreeViewItem> </TreeView> <DataGrid Grid.Row="1" Grid.Column="1" Margin="1,0.333,0,0.333"> <DataGrid.Columns> <DataGridTextColumn Header="卡號" Width="10*"></DataGridTextColumn> <DataGridTextColumn Header="基站編號" Width="10*"></DataGridTextColumn> <DataGridTextColumn Header="訊號強度" Width="10*"></DataGridTextColumn> <DataGridTextColumn Header="基站距離" Width="10*"></DataGridTextColumn> <DataGridTextColumn Header="電壓" Width="10*"></DataGridTextColumn> <DataGridTextColumn Header="接收時間" Width="10*"></DataGridTextColumn> </DataGrid.Columns> </DataGrid> <TextBlock VerticalAlignment="Center" Grid.Row="2" Grid.ColumnSpan="2" TextAlignment="Center" Text="奔騮科技版權所有@BenliuTech 2013-2018" Height="21" Margin="0,2.667,0,2.333" /> </Grid> </Window>
接下來是配置定位基站的配置頁,背景和字型都是和主頁面設定的一樣,這樣風格統一,好看一點。
<Window x:Class="WpfApplication1.ReadParameter" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="配置基站引數" Height="293.691" Width="565.369" FontFamily="楷體" FontSize="18"> <Grid> <Grid.Background> <LinearGradientBrush> <GradientStop Color="Pink" Offset="0"></GradientStop> <GradientStop Color="Red" Offset="0.5"></GradientStop> <GradientStop Color="Purple" Offset="1"></GradientStop> </LinearGradientBrush> </Grid.Background> <Grid.RowDefinitions> <RowDefinition Height="200"></RowDefinition> <RowDefinition Height="40"></RowDefinition> </Grid.RowDefinitions> <StackPanel> <DockPanel HorizontalAlignment="Center" Height="50" DockPanel.Dock="Top"> <Label Content="裝置編號:" Width="80" VerticalAlignment="Center" /> <TextBox Name="DeviceID" Width="140" VerticalAlignment="Center" Margin="15,0,0,0" TextAlignment="Center"/> <Label Width="100" VerticalAlignment="Center" Content="MAC地址:" Margin="15,0,0,0"/> <TextBox Name="Mac" VerticalContentAlignment="Center" Width="140" TextAlignment="Center" VerticalAlignment="Center" Margin="15,0,0,0"/> </DockPanel> <DockPanel HorizontalAlignment="Center" Height="50" DockPanel.Dock="Top" > <Label Content="本地IP:" Width="80" VerticalAlignment="Center" /> <TextBox Name="LocalIP" Width="140" VerticalAlignment="Center" Margin="15,0,0,0" TextAlignment="Center"/> <Label Width="100" VerticalAlignment="Center" Content="裝置埠:" Margin="15,0,0,0"/> <TextBox Name="LocalPort" Width="140" VerticalContentAlignment="Center" TextAlignment="Center" VerticalAlignment="Center" Margin="15,0,0,0" /> </DockPanel> <DockPanel HorizontalAlignment="Center" Height="50" DockPanel.Dock="Top"> <Label Width="80" Content="伺服器IP:" VerticalAlignment="Center"/> <TextBox Name="ServerIP" Width="140" VerticalAlignment="Center" Margin="15,0,0,0" TextAlignment="Center"/> <Label Width="100" VerticalAlignment="Center" Content="伺服器埠:" Margin="15,0,0,0"/> <TextBox Name="ServerPort" VerticalContentAlignment="Center" Width="140" TextAlignment="Center" VerticalAlignment="Center" Margin="15,0,0,0"/> </DockPanel> <DockPanel HorizontalAlignment="Center" Height="50" DockPanel.Dock="Top" > <Label Width="80" Content="閘道器:" VerticalAlignment="Center"/> <TextBox Name="GateWay" Width="140" VerticalAlignment="Center" Margin="15,0,0,0" TextAlignment="Center"/> <Label Width="100" VerticalAlignment="Center" Content="子網掩碼:" Margin="15,0,0,0"/> <TextBox Name="SubNet" VerticalContentAlignment="Center" Width="140" TextAlignment="Center" VerticalAlignment="Center" Margin="15,0,0,0" /> </DockPanel> </StackPanel> <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> <Button Background="Transparent">修改引數</Button> <Button Background="Transparent" Margin="40,0,0,0">重啟裝置</Button> <Button Background="Transparent" Margin="40,0,0,0">修改編號</Button> </StackPanel> </Grid> </Window>
最後一個頁面就是對於指定標籤的監控,上面兩個按鈕,一個全選,一個反選,下面是一個listview,裡面放標籤號碼,然後加checkbox,做一個模板。
<Window x:Class="WpfApplication1.TagMonitor" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="監控標籤設定" Height="310.47" Width="369.262" FontFamily="楷體" FontSize="18" WindowStartupLocation="CenterScreen"> <Grid> <Grid.Background> <LinearGradientBrush> <GradientStop Color="Pink" Offset="0"></GradientStop> <GradientStop Color="Red" Offset="0.5"></GradientStop> <GradientStop Color="Purple" Offset="1"></GradientStop> </LinearGradientBrush> </Grid.Background> <Grid.RowDefinitions> <RowDefinition Height="61*"></RowDefinition> <RowDefinition Height="220*"></RowDefinition> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> <Button Background="Transparent">全選</Button> <Button Background="Transparent" Margin="40,0,0,0">反選</Button> </StackPanel> <ListView Grid.Row="1"></ListView> </Grid> </Window>