Can a ScatterViewItem dynamically resize to fit its content?

Question

We're hosting a control inside of a ScatterViewItem that dynamically changes its size at runtime as a result of having various sub-elements added, removed, and/or collapsed. We would like to have the hosting ScatterViewItem resize as well to properly fit its child controls, but we're having a hard time making this happen. We've tried a number of different things and the closest we've come is hooking into the child control's SizeChanged event and explicitly setting the ScatterViewItem's Width and Height, but this approach still has issues.

When you define a ScatterViewItem and its content in XAML, the ScatterViewItem is sized appropriately. We would like to force the same behavior at runtime when its content changes size. Any help would be greatly appreciated. Thanks!

score 1 · Answer 1 · answered Jul 12 '11 at 19:23

Have you tried setting the style described here:

http://msdn.microsoft.com/en-us/library/ee957369.aspx

under "Binding to Content Size"?

Binding to Content Size

As described in ScatterView Overview, by default a ScatterViewItem does not necessarily expand or contract to the size of its content. You can explicitly set the Height and Width properties of a ScatterViewItem, but sometimes your content may be a control of an unknown size, or your content might have variable size.

In cases like this, we recommend that you bind the dimensions of the ScatterViewItem to the dimensions of the content. To do so, you need to define a Style object (usually within the Resources section of your main application window). The following code example shows a Style object declaration that you can apply to a ScatterViewItem control to cause it to bind to the dimensions of its content.

<Style x:Key="ScatterViewItemStyle" TargetType="{x:Type s:ScatterViewItem}">
    <Setter Property="MinWidth" Value="{Binding Path=Content.MinWidth, RelativeSource={RelativeSource Self}, Mode=OneWay}"/>
    <Setter Property="MinHeight" Value="{Binding Path=Content.MinHeight, RelativeSource={RelativeSource Self}, Mode=OneWay}"/>
    <Setter Property="MaxWidth" Value="{Binding Path=Content.MaxWidth, RelativeSource={RelativeSource Self}, Mode=OneWay}"/>
    <Setter Property="MaxHeight" Value="{Binding Path=Content.MaxHeight, RelativeSource={RelativeSource Self}, Mode=OneWay}"/>
    <Setter Property="Width" Value="{Binding Path=Content.Width, RelativeSource={RelativeSource Self}, Mode=TwoWay}"/>
    <Setter Property="Height" Value="{Binding Path=Content.Height, RelativeSource={RelativeSource Self}, Mode=TwoWay}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type s:ScatterViewItem}">
                <ContentPresenter />
            </ControlTemplate>
        </Setter.Value>
    </Setter> </Style>

When you want to create a ScatterViewItem that uses the dimensions of its content, apply the style to the ScatterViewItem as shown in the following code example.

<s:ScatterViewItem Style="{StaticResource ScatterViewItemStyle}">
     <Rectangle  Height="250" Width="250" Fill="Red" /> </s:ScatterViewItem>

Can a ScatterViewItem dynamically resize to fit its content?

1 Answers1