Help on ScatterView Content ??

Question

Dear all,

I have a simple ScattervieItem which build as follow :

<s:ScatterViewItem>

 <local:PostCardControl></local:PostCardControl>

</s:ScatterViewItem>

The local:PostCardControl is a user control which is build as follow :

<s:SurfaceUserControl x:Class="PostalCard.PostCardControl"

 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 xmlns:s="http://schemas.microsoft.com/surface/2008"

 xmlns:local="clr-namespace:PostalCard">

 <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

  

  <local:FlipUserControl x:Name="FlipMe">

   <local:FlipUserControl.FrontSide>

    <StackPanel s:Contacts.ContactDown="StackPanel_ContactDown">

     <Image Source="Resources/Images/79719.jpg" />

    </StackPanel>

   </local:FlipUserControl.FrontSide>



   <local:FlipUserControl.BackSide >

    <StackPanel s:Contacts.ContactDown="StackPanel_ContactDown_1">

     <TextBlock>You want to send me an E-Mail?</TextBlock>

     <TextBox Height="80" AcceptsReturn="True"></TextBox>

     <Button>Just do it!</Button>

     <TextBlock>[e-mail]</TextBlock>

    </StackPanel>

   </local:FlipUserControl.BackSide>

  </local:FlipUserControl>

</Grid>

</s:SurfaceUserControl>

The Local:FlipUserControl is simply a user control used to Flip stackpanel from front to back and define as follow :

<s:SurfaceUserControl x:Class="PostalCard.FlipUserControl"

 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 xmlns:s="http://schemas.microsoft.com/surface/2008">



 <UserControl.Resources>

  <Storyboard x:Key="StoryFlip">

   <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"

           Storyboard.TargetName="rot">

    <SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="180"></SplineDoubleKeyFrame>

   </DoubleAnimationUsingKeyFrames>

   <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"

           Storyboard.TargetName="rot2">

    <SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="360"></SplineDoubleKeyFrame>

   </DoubleAnimationUsingKeyFrames>

  </Storyboard>



  <Storyboard x:Key="StoryFlipBack">

   <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"

           Storyboard.TargetName="rot">

    <SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="360"></SplineDoubleKeyFrame>

   </DoubleAnimationUsingKeyFrames>

   <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"

           Storyboard.TargetName="rot2">

    <SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="180"></SplineDoubleKeyFrame>

   </DoubleAnimationUsingKeyFrames>

  </Storyboard>

 </UserControl.Resources>

 <Grid>

  <Viewport3D>

   <Viewport3D.Camera>

    <PerspectiveCamera Position="0, 0, 4"/>

   </Viewport3D.Camera>



   <Viewport2DVisual3D x:Name="Side1">

    <!-- Rotation definieren -->

    <Viewport2DVisual3D.Transform>

     <RotateTransform3D>

      <RotateTransform3D.Rotation>

       <AxisAngleRotation3D x:Name="rot" Angle="0" Axis="1, 0, 0" />

      </RotateTransform3D.Rotation>

     </RotateTransform3D>

    </Viewport2DVisual3D.Transform>



    <!-- Geometry und Material für das Viewport2DVisual3D -->

    <Viewport2DVisual3D.Geometry>

     <MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"

       TextureCoordinates="0,0 0,1 1,1 1,0" 

       TriangleIndices="0 1 2 0 2 3" />

    </Viewport2DVisual3D.Geometry>

    <Viewport2DVisual3D.Material>

     <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>

    </Viewport2DVisual3D.Material>



   </Viewport2DVisual3D>



   <Viewport2DVisual3D x:Name="Side2">

    <!-- Rotation definieren -->

    <Viewport2DVisual3D.Transform>

     <RotateTransform3D>

      <RotateTransform3D.Rotation>

       <AxisAngleRotation3D x:Name="rot2" Angle="180" Axis="1,0,0" />

      </RotateTransform3D.Rotation>

     </RotateTransform3D>

    </Viewport2DVisual3D.Transform>



    <!-- Geometry und Material für das Viewport2DVisual3D -->

    <Viewport2DVisual3D.Geometry>

     <MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"

       TextureCoordinates="0,0 0,1 1,1 1,0" 

       TriangleIndices="0 1 2 0 2 3" />

    </Viewport2DVisual3D.Geometry>

    <Viewport2DVisual3D.Material>

     <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>

    </Viewport2DVisual3D.Material>



    <!-- Steuerelemente in 3D-Look -->



   </Viewport2DVisual3D>



   <!-- Licht -->

   <ModelVisual3D>

    <ModelVisual3D.Content>

     <AmbientLight Color="White" />

    </ModelVisual3D.Content>

   </ModelVisual3D>

  </Viewport3D>



 </Grid>

</s:SurfaceUserControl>

Basically the fliping logic works ok and scatterviwitem is displau with its content.

The only problem I have is that the ScatterViewItem is not sized based on its content, which means that I have a picture in the center of it and have then big margin around scatterviewitem.

If I specify a border control, as a content of Scatterview item, then it sized corrctely but not when I used my user control

What is missing to have it sized correctly ?

Does the problem comes from the UserControl use as its content ?

Thnaks for help
Regards
serge

---

Your knowledge is enhanced by that of others.

Answer 1

Hello,

In order for you you understand better what I mean, I have started from the sample that I place on SkyDrive which is base on a simple WPF application.
From that sample you will noticed that whatever you do with the main Window size, the user control remains in the center and with the same size.

So what I am trying to do is to make it working so that the suer control stretch to the content of the main window in the sample.

I have then try to place that user control in ScatterviewItem but same behaviour occurs.

Any ideas ?

regards

Serge

---

Your knowledge is enhanced by that of others.

Answer 2

I've posted an example of how to do this with proper 3D transforms here: http://blog.endquote.com/post/715775536/flipping-scatterviewitems

Answer 3

Has anyone a solution for this problem?

One method is to change the margin of the viewport3d to minus, but there should be a better way.