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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wuma0q1an/article/details/50884926

成功创建一个我的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>之类的。