.net - ScatterViewItem でのコントロールのレイアウトの整理

Question

次の内容が垂直順に記載されたスキャッタビュー アイテムがあります。

1. 1 ～ 3 行のテキストを表示する TextBlock - TextBlock1

2. 画像 - サイズは画像の解像度によって異なりますが、プロパティで最小の高さ、幅を設定します。

3. TextBlock - 1 ～ 10 行のテキストが表示されます - TextBlock2

4. 表面切り替えボタン

ユーザーはこのアイテムをスケーリングできるようになったので、これをビューボックスに入れました。XAML コードは次のとおりです。

<DockPanel LastChildFill="False">
    <TextBlock Name="ItemTitle" DockPanel.Dock="Top" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120"  Margin="10"  TextWrapping="Wrap"  Visibility="Visible" Padding="2" />
    <s:SurfaceToggleButton  DockPanel.Dock="Bottom" Checked="ItemInfo_Checked" Unchecked="ItemInfo_Unchecked" Margin="5,5,5,5" HorizontalAlignment="Center" VerticalAlignment="Center">Display more info</s:SurfaceToggleButton>
    <Viewbox DockPanel.Dock="Bottom" Stretch="Uniform" MinHeight="100">
        <StackPanel>
            <Image Name="ItemImage" Margin="5,5,5,5"    Visibility="Visible" />
            <TextBlock DockPanel.Dock="Bottom" Name="ItemDesc" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10"  TextWrapping="Wrap"  Visibility="Visible" Padding="2" />
        </StackPanel>
    </Viewbox>
</DockPanel>

結果の表示の問題は次のとおりです。

1. TextBlock2 は、残りの項目に対して非常に小さいサイズでテキストを表示します。

2. TextBlock2 はテキストを小さなサイズで表示しているため、stackpanel 内で TextBlock1 の左側に配置されていません。

ユーザーがアイテムを拡大縮小すると、テキストと画像のサイズが大きくなるように、Viewbox を使用しました。

これを行うより良い方法はありますか？DataTemplates を使用すると、この問題または別の問題を解決できますか?

Answer 1

画像要素とテキストブロック要素を別々のビューボックスでラップします