在 ScatterViewItem 中组织控件的布局答案

【问题标题】：Organizing layout of controls in ScatterViewItem在 ScatterViewItem 中组织控件的布局
【发布时间】：2011-05-08 15:40:29
【问题描述】：

我有一个 scatterview 项目，其中包含以下内容，按垂直顺序提及。

TextBlock 将显示 1-3 行文本 - TextBlock1
图像 - 大小会根据图像分辨率而有所不同，但我会在属性中设置最小高度和宽度。
TextBlock - 这将显示 1-10 行文本 - TextBlock2
表面切换按钮

现在用户可以缩放这个项目，因此我把它放在了 viewbox 中。 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>

结果显示中的问题是：

TextBlock2 以相对于其余项目非常小的尺寸显示文本。
由于 TextBlock2 以小尺寸显示文本，并且在堆栈面板内，它的左侧未与 TextBlock1 对齐。

我使用了 Viewbox，这样当用户缩放项目时，它会增加文本和图像的大小。

有没有更好的方法来做到这一点？使用 DataTemplates 可以帮助解决此问题或解决其他问题吗？

【问题讨论】：

标签： .net wpf datatemplate pixelsense scatterview

【解决方案1】：

用单独的视图框包装图像和文本块元素

【讨论】：