【UWP】画像とテキストを横に並べてキレイに表示させたい

お世話になっております。
現在、UWP（Prism version6.3）で、アプリの開発を行っております。

やりたいこと

画像とテキストを横に並べてキレイに表示させたいです。
もう少しお伝えさせていただくと、画像のサイズが異なるものがあるので、横幅に応じて、テキストの位置を横にずらしたいと考えております。
（この方針が正しいのか、怪しいところではありますが。。。）

試したこと

下記、コードを試しましたが、画像の大きさに応じて、画像とテキストの間の空白が、変わってしまい、意図したものになりませんでした。

c#
1<StackPanel BorderBrush="Black" BorderThickness="1" Margin="10" >
2                    <TextBlock Text="{x:Bind ViewModel._ImageList[0].TakenTime}" FontSize="17" Margin="15"/>
3                    <TextBlock Text="{x:Bind ViewModel._ImageList[0].ReflectionTitle}" FontSize="17" Margin="15,0"/>
4                    <StackPanel Margin="0,12" Orientation="Horizontal">
5                        <TextBlock Text="{x:Bind ViewModel._ImageList[0].Description}" FontSize="17" TextWrapping="Wrap" Margin="320,0,-600,0" Width="220"/>
6                        <Image Source="{x:Bind ViewModel._ImageList[0].FilePath}" Height="204" VerticalAlignment="Center" Margin="15,0,-246,0" MaxWidth="400" />
7                    </StackPanel>
8                </StackPanel>

ご回答いただけますと、幸いです。
よろしくお願い申し上げます。

【追記】

実際のアプリ画面ではありませんが、このような形で表示をすることを想定しています。
一行テキストが一つのブロックに２つ、その左下に、画像、右下に少し大きめのテキストブロックを配置したいと考えております。
それを合計4つ並べて画面上に表示させる想定です。
ご確認のほど、よろしくお願いいたします。

tor4kichi

2019/08/06 00:14

1. アプリ画面のスクリーンショットを質問に追記して貰うことはできますか？ 2. 横にずらしたいとしているTextBlockって３つのうちどれでしょう？全部？

heroherohero

2019/08/06 01:42 編集

コメント、ありがとうございます。 1. ⇒申し訳ございません。今手元に開発PCがないため、後ほど、添付いたします。 2. ⇒テキストボックスは、「<StackPanel Margin="0,12" Orientation="Horizontal">」の中にある、<Image＞タグと並列に並んでいる、ものを横にずらしたいと考えております。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

アイテム間の余白のみを調節するにはStackPanelのSpacingプロパティを利用すると綺麗にレイアウトできるかと思います。

StackPanel.Spacing
https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.stackpanel.spacing

ただし、利用可能条件がWindows 10 Fall Creators Update (introduced v10.0.16299.0) であるため16299未満のバージョンを最小バージョンに含める場合は条件付きXamlで書き分ける必要があります。

Margin/Padding/Spacingの関係は次のリンクが詳しいです
https://www.reflectionit.nl/blog/2017/new-spacing-property-in-stackpanel


<StackPanel BorderBrush="Black" BorderThickness="1" Margin="10" >
  <TextBlock Text="{x:Bind ViewModel._ImageList[0].TakenTime}" FontSize="17" Margin="15"/>
  <TextBlock Text="{x:Bind ViewModel._ImageList[0].ReflectionTitle}" FontSize="17" Margin="15,0"/>
  <StackPanel Margin="0,12" Orientation="Horizontal"
    Spacing="16"
    >
    <TextBlock Text="{x:Bind ViewModel._ImageList[0].Description}" FontSize="17" TextWrapping="Wrap" Width="220"/>
    <Image Source="{x:Bind ViewModel._ImageList[0].FilePath}" Height="204" VerticalAlignment="Center" MaxWidth="400" />
  </StackPanel>
</StackPanel>

Xamlを修正してみました。横並びStackPanelに対してSpacing="16"を指定してアイテム間の余白を作っています。

（あとMargin="320,0,-600,0"としている部分は相対レイアウトのパネルに絶対レイアウトのやり方を持ち込んでいて、レイアウト管理を難しくしていると思うので避けたほうがいいかと思います。）

投稿2019/08/06 10:54

tor4kichi

総合スコア763