アドレスを入力するために Windows 8 の XAML でフォームを作成する必要があります。「Contact Person」ヘッダーは必要ありませんが、次のようになります。
この例は、IE の HTML5 Forms デモからのものです。
2 列のグリッドを試しましたが、TextBlocks と TextBoxes が簡単に整列しません。
これを行う最も簡単な方法は何ですか?
アドレスを入力するために Windows 8 の XAML でフォームを作成する必要があります。「Contact Person」ヘッダーは必要ありませんが、次のようになります。
この例は、IE の HTML5 Forms デモからのものです。
2 列のグリッドを試しましたが、TextBlocks と TextBoxes が簡単に整列しません。
これを行う最も簡単な方法は何ですか?
これはGrid
、私にとって良い解決策と思われる aを使用してそれを行う方法です。
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="2" Grid.Row="0" Text="Name:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="0" Grid.Column="1" Text="John Doe"/>
<TextBlock Margin="2" Grid.Row="1" Text="Address:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="1" Grid.Column="1" Text="1 Microsoft Way"/>
<TextBlock Margin="2" Grid.Row="2" Text="City:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="2" Grid.Column="1" Text="Redmond"/>
<TextBlock Margin="2" Grid.Row="3" Text="State:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="3" Grid.Column="1" Text=""/>
<TextBlock Margin="2" Grid.Row="4" Text="Zip Code:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="4" Grid.Column="1" Text="98052"/>
<TextBlock Margin="2" Grid.Row="5" Text="Email Address:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="5" Grid.Column="1" Text="john.doe@microsoft.com"/>
<TextBlock Margin="2" Grid.Row="6" Text="Telephone Number:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="6" Grid.Column="1" Text="(425) 333-4444"/>
</Grid>
結果は次のとおりです。
TextBlock
sとTextBox
esが並んでませんか?
ちなみに、Damir Arh の回答をGroupBoxで囲むと、「Contact Person」ボックスを取得できます。