基于modern ui for wpf的在线公开课平台 之三 使用grid布局

成功创建一个我的modern ui程序之后，就可以开始创建页面，在页面里面布局写入控件，并且显示它。

首先创在项目--添加--新建项--选择modern UI for wpf的basic page.xmal页面。





点击设计//XAML里面的XAML，就可以使用代码来进行页面设计了。其中，下方红色框里面的可以删去。



然后就可以使用Grid来进行布局了，以下是一段示范代码，实现下面的效果。由于使用grid布局比较蛋疼，但是我还是仅仅使用了grid布局（是因为没有接粗到其他布局），其中<Grid.RowDefinitions>是定义行，<Grid.ColumnDefinitions>是定义列，可以使用Height="*"或者Widht="*"来进行比例的调节。

<UserControl x:Class="zxgkkpt.Pages.Login.LoginUser"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
mc:Ignorable="d"
d:DesignHeight="400" d:DesignWidth="400">
<Grid Style="{StaticResource ContentRoot}">
<StackPanel MinWidth="200" Margin="-17,-29,-20,-18">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Top" Text="个人信息" Style="{StaticResource Heading2}"/>
<TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Top" Text="姓名：" />
<TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Top" Text="邮箱：" />
<TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Top" Text="本次登录：" />

<TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Top" Text="" x:Name="logName" />
<TextBlock Grid.Row="2" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Top" Text="" x:Name="logEmail"/>
<TextBlock Grid.Row="3" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Top" Text="" x:Name="logTime"/>

<Button Grid.Row="4" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Top" Content="注销" x:Name="LogOff" Click="LogOff_Click" />
</Grid>
</StackPanel>
</Grid>
</UserControl>



所以，Grid布局就介绍这么多啦。Grid可以在里面继续添加Grid或者其他布局控件如<ScrollViewer>之类的。