CODEWITHSUNDEEP
.netwpfdatatemplatepixelsensescatterview
K Singh
K Singh

Reputation: 1720

Organizing layout of controls in ScatterViewItem

I have a scatterview item which has following contents in order mentioned in vertical order.

  1. TextBlock which will show 1-3 lines of text - TextBlock1

  2. Image - size will vary based on image resolution, but i will set a minimum height, width in property.

  3. TextBlock - this will show 1-10 lines of text - TextBlock2

  4. 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:

  1. The TextBlock2 shows the text in very small size with respect to rest of the items.

  2. 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?

Upvotes: 1

Views: 353

Answers (1)

Robert Levy
Robert Levy

Reputation: 29083

wrap the image and textblock elements with separate viewboxes

Upvotes: 0

Related Questions