Organizing layout of controls in ScatterViewItem
I have a scatterview item which has following contents in order mentioned in vertical order.
TextBlock which will show 1-3 lines of text - TextBlock1
Image - size will vary based on image resolution, but i will set a minimum height, width in property.
TextBlock - this will show 1-10 lines of text - TextBlock2
A surface toggle button
Now a user can scale this item, hence i had put this in viewbox. The XAML code is below:
<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>
The problem in the resulting display is:
The TextBlock2 shows the text in very small size with respect to rest of the items.
Since the TextBlock2 is showing text in small size and inside the stackpanel it is not aligned on the left side with the TextBlock1.
I used Viewbox so that when user scales the item, it will increase the size of text and the image.
Is there a better way to do this? Could using DataTemplates help resolve this issue or its for something else?
wrap the image and textblock elements with separate viewboxes
精彩评论