XAML上に2つのViewboxを中央と下部に配置したい

Question

UWPアプリケーションの開発でViewboxを2つ配置したいのですが、2つとも中央に表示されてしまいます。
Viewbox内のTextBlockのVerticalAlignmentをBottomに指定することで可能かと思っていたのですが出来ませんでした。

Borderを利用してメッセージの背景色を指定したいので、Viewbox要素内におさめたいのですのですが
他の方法があれば教えてください。

<Page
    x:Class="FaceDetectedCameraApp.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FaceDetectedCameraApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <!--中央部のメッセージ-->
        <Viewbox Stretch="None">
            <Border x:Name="GyroAlertBorder" Background="White" CornerRadius="20,20,20,20">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,10,10,10"
                x:Name="GyroAlertText" FontSize="36" Foreground="Black" Text="中央に表示したいメッセージ" />
            </Border>
        </Viewbox>

        <!--下部のメッセージ-->
        <Viewbox Stretch="None">
            <Border x:Name="AnotationBorder" Background="White" CornerRadius="20,20,20,20">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom" 
                x:Name="AnotationText" FontSize="24" Foreground="Black" Text="下に表示したいメッセージ" ></TextBlock>
            </Border>
        </Viewbox>


    </Grid>
</Page>

Comments

[ebiryo]

上下ではなく、中央と下部なんですよね？　中央というのは下部も含めたPage全体の中央、という認識であっていますか？

[johanneskrauser]

はい。中央と下部です。認識あってます。説明が至らなくてすいません。。

Answer 1

Grid.Rowを設定してみては?

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100*"/>
            <RowDefinition Height="80"/>
        </Grid.RowDefinitions>

        <!--中央部のメッセージ-->
        <Viewbox Stretch="None" Grid.Row="0">
            <Border x:Name="GyroAlertBorder" Background="White" CornerRadius="20,20,20,20">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,10,10,10"
            x:Name="GyroAlertText" FontSize="36" Foreground="Black" Text="中央に表示したいメッセージ" />
            </Border>
        </Viewbox>

        <!--下部のメッセージ-->
        <Viewbox Stretch="None" Grid.Row="1">
            <Border x:Name="AnotationBorder" Background="White" CornerRadius="20,20,20,20">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom" 
            x:Name="AnotationText" FontSize="24" Foreground="Black" Text="下に表示したいメッセージ" ></TextBlock>
            </Border>
        </Viewbox>
    </Grid>

Comments

[johanneskrauser]

上記の設定で、中央に表示したいメッセージと下部に表示したいメッセージが期待通りに配置することができました。

しかし、グリッド上部にButton等を複数配置するとGrid内にChildは一つしか指定できないとIDEから突っ込まれてしまいます。。

Grid内に複数Childエレメントを設定することは、やっぱり不可能なんでしょうか？
プロパティで複数設定することも可能なのでしょうか？

[Tak1wa]

dn315さんの回答でなぜ実現できているか理解されていますか？
IDEから突っ込まれてしまうとのことですが、行列のレイアウトはどのように設定されているのでしょうか。

[ebiryo]

質問者さんに確認ですが、dn315さんの方法では「中央のメッセージ」はPage全体の中央ではなく、「下のメッセージ」を除いた領域の中央になりませんか？

[dn315]

StackPanelやGridなどをChildにすれば配置できます。

<!--中央部のメッセージ-->
<Viewbox Stretch="None" Grid.Row="0">
<StackPanel Orientation="Vertical">
<Button Content="A"/>
<Button Content="B"/>
<Button Content="C"/>

<Border x:Name="GyroAlertBorder" Background="White" CornerRadius="20,20,20,20">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,10,10,10"
x:Name="GyroAlertText" FontSize="36" Foreground="Black" Text="中央に表示したいメッセージ" />
</Border>
</StackPanel>
</Viewbox>

[johanneskrauser]

回答ありがとうございました。
GridのRowや、ColをHTMLのTableと同様にColspanすることもできるようなので、レイアウトをTableでイメージしながらデザインして、コンポーネントを配置してみようと思います。