Page layout in WPF
开发工具与关键技术：Visual Studio 2015、WPF
作者：黄元进
撰写时间： 2019年5月14日
Grid layout to build a page, set about Width: 1100 Height: 645 pages Due to the need for a custom adjustment of key areas, so here adjust the height of the first table page 554, the second page without having to set up, and then use the GroupBox (group box) to set the title of the content, with DataGridTextColumn (data management text field) to write the table of contents to be added, then that page layout Image to form a picture when the button, TextBox current set of pages default to 1, ComboBox the number of rows that can be displayed, and the layout of the first second page of the same. Implemented in XAML code
<Window x:Class="Wpf1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Wpf1"
Title="分页布局" Height="645" Width="1100">
<!--此分页不是插件-->
<Grid Height="554">
<GroupBox Padding="0,8,0,8" Margin="0,10,503,38" Header="目前所处站点">
<DataGrid x:Name="dgStationManage" IsReadOnly="True" AutoGenerateColumns="False" Background="white"
CanUserResizeColumns="False" CanUserResizeRows="False" SelectionMode="Single"
CanUserReorderColumns="False" AlternationCount="2" RowHeaderWidth="0" CanUserAddRows="False">
<DataGrid.Columns>
<DataGridTextColumn Header="" Binding="{Binding number}" Width="50" />
<DataGridTextColumn Header="" Binding="{Binding site_name}" Width="120"/>
<DataGridTextColumn Header="" Binding="{Binding short_code}" Width="80"/>
<DataGridTextColumn Header="" Binding="{Binding full_code}" Width="140"/>
<DataGridTextColumn Header="" Binding="{Binding pro_name}" Width="100" />
</DataGrid.Columns>
</DataGrid>
</GroupBox>
<!--分页布局-->
<!--Image 用图片的形式来呈现-->
<Grid Background="#FFBECFEE" Margin="0,521,489,0">
<Image x:Name="imgMostUp" Opacity="0.3" Height="20" Width="20" Source="/Images/mostup.png" Stretch="Fill" Cursor="Hand" Margin="160,5,425,8"/>
<Image x:Name="imgUp" Opacity="0.3" Height="20" Width="20" Source="/Images/up.png" Stretch="Fill" RenderTransformOrigin="0.35,-0.15" Cursor="Hand" Margin="185,5,400,8"/>
<Image x:Name="imgDown" Height="20" Width="20" Source="/Images/down.png" Stretch="Fill" RenderTransformOrigin="0.35,-0.15" Cursor="Hand" Margin="283,5,302,8"/>
<Image x:Name="imgMostDown" Height="20" Width="20" Margin="308,5,277,8" Source="/Images/mostdown.png" Stretch="Fill" Cursor="Hand"/>
<!--当前的页数默认为1-->
<TextBox x:Name="txtCurrentPage" HorizontalAlignment="Left" Height="18" Margin="210,5,0,0" TextWrapping="Wrap" Text="1" VerticalAlignment="Top" Width="53" />
<Label x:Name="label" Content="/" HorizontalAlignment="Left" Margin="261,0,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.733,0.92"/>
<Label x:Name="lblMaxPage" Content="2" HorizontalAlignment="Left" Margin="266,2,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.353,0.6"/>
<Label x:Name="lblPageLineCount" Content="每页行数：" HorizontalAlignment="Left" Margin="333,3,0,0" VerticalAlignment="Top"/>
<!--可以显示的行数-->
<ComboBox x:Name="cboPageLineCount" HorizontalAlignment="Left" Margin="408,5,0,0" VerticalAlignment="Top" Width="122" ></ComboBox>
</Grid>
<GroupBox Header="可到达站点" Padding="0,8,0,8" Margin="605,10,0,0">
<DataGrid x:Name="dgSite" IsReadOnly="True" AutoGenerateColumns="False" Background="white" Margin="0,0,0,-13" >
<DataGrid.Columns >
<DataGridTextColumn Header="" Binding="{Binding number }" Width="70" IsReadOnly="True" />
<DataGridTextColumn Header="" Binding="{Binding site_name}" Width="150" />
<DataGridTextColumn Header="" Binding="{Binding neighbor_site }" Width="155" />
<DataGridTextColumn Header="" Binding="{Binding distance }" Width="100" />
</DataGrid.Columns>
</DataGrid>
</GroupBox>
</Grid>
</Window>
The effect is as follows:
