1. 程式人生 > >WPF實戰(1)-高精度定位系統測試工具頁面設計

WPF實戰(1)-高精度定位系統測試工具頁面設計

      簡單介紹下高精度定位系統,一句話,有一個基站,有一個標籤,通過標籤發給基站的資料來算出標籤的位置。

      主窗體分為三行三列的佈局,第一行放置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>