Visual Studio / WPF > 12 Grid布局 > Gridを使って、username, password, buttonの配置をする例 | F9: デザイナ上でGrid分割線の表示・非表示

動作環境

Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2

12 Grid布局
https://www.youtube.com/watch?v=C00_2T8FrVk&index=32&list=WL

Gridを使ってのレイアウトにより、username, password, buttonの配置を行っている。

試してみた。

MainWindow.xaml

<Window x:Class="_170512_t0655_grid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_170512_t0655_grid"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid Margin="20,20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Text="用戸名(user name):"></TextBlock>
        <TextBox Name="T_username" Text="7of9" Grid.Column="1"></TextBox>
        <TextBlock Text="password:" Grid.Row="1"></TextBlock>
        <PasswordBox Password="12345" Grid.Column="1" Grid.Row="1"></PasswordBox>
        <Button Content="login" Grid.Row="2" Grid.ColumnSpan="2"></Button>
    </Grid>
</Window>

デザイナ上で

実行

デザイナ > F9

デザイナ上にてF9を押すとGridの分割を表す青い線が消えた。
またF9を押すと、その線が見えるようになった。

中国語 > 用戸名

用戸名 (yong hu ming)
ユーザ名