先上效果图:
页面代码附上:
<Grid x:Name="LayoutRoot" Background="White">
<Grid Width="400" Height="300">
<Grid.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FF59F513" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="0.35*"></RowDefinition>
<RowDefinition Height="0.35*"></RowDefinition>
<RowDefinition Height="0.35*"></RowDefinition>
<RowDefinition Height="0.65*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.50*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.ColumnSpan="2" Grid.Row="0" FontSize="28" FontWeight="Black"
HorizontalAlignment="Center" Foreground="#FFF59D19" Text="登陆界面" />
<TextBlock Grid.Row="1" Grid.Column="0" FontSize="18" Foreground="#FFF59D19"
Margin="0,20,0,0" HorizontalAlignment="Right" Text="用户账户:" />
<TextBox Grid.Row="1" Grid.Column="1" Width="200" Height="39"></TextBox>
<TextBlock Grid.Row="2" Grid.Column="0" FontSize="18" Foreground="#FFF59D19"
Margin="0,20,0,0" HorizontalAlignment="Right" Text="登陆密码:" />
<TextBox Grid.Row="2" Grid.Column="1" Width="200" Height="39"></TextBox>
<StackPanel Grid.ColumnSpan="2" Grid.Row="3" Orientation="Horizontal" HorizontalAlignment="Center" >
<Button Content="确认" Width="80" Height="30" Margin="0,0,20,0"></Button>
<Button Grid.ColumnSpan="2" Grid.Row="3" Content="取消" Width="80" Height="30" ></Button>
</StackPanel>
</Grid>
</Grid>
小结--本教程只介绍页面布局 ,后台代码未做处理,各位可根据实际需要进行填充