Non-square content

Mar 12, 2009 at 8:16 PM
Edited Mar 12, 2009 at 10:26 PM
Hi,

First of all congratulations, it's a very nice project you've got there.
My problem is with the ContentControl3D, I'm trying to using non-squared content in it but it always end up being stretch, is this a limitation? Is there a way to go around this issue?

Thanks,

Pyt
Mar 12, 2009 at 10:30 PM
Edited Mar 12, 2009 at 10:31 PM
Allow me to answer my own question.

Here is an example where I host a 500x250 pixels grid. I had to change the ScaleX from the ScaleTransform of the Camera to 0.5 (Height/Width) for it to not stretch the content:

    <thriple:ContentControl3D x:Name="_pnl" EasingMode="Slap" CameraZoomDestination="0,0,5">
        <thriple:ContentControl3D.CameraPrototype>
            <PerspectiveCamera FieldOfView="45" Position="0,0,4.66" UpDirection="0,1,0">
                <PerspectiveCamera.Transform>
                    <Transform3DGroup>
                        <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0"/>
                        <ScaleTransform3D ScaleX="0.5" ScaleY="1" ScaleZ="1"/>
                        <RotateTransform3D d:EulerAngles="0,0,0"/>
                        <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0"/>
                        <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0"/>
                    </Transform3DGroup>
                </PerspectiveCamera.Transform>
            </PerspectiveCamera>
        </thriple:ContentControl3D.CameraPrototype>
        <thriple:ContentControl3D.Content>
            <Grid Width="500" Height="250">
                <Rectangle Fill="Black" RadiusX="8" RadiusY="8" OpacityMask="{x:Null}" Stroke="#24FFFFFF">
                    <Rectangle.BitmapEffect>
                        <DropShadowBitmapEffect Softness="0.3" ShadowDepth="4"/>
                    </Rectangle.BitmapEffect>
                </Rectangle>
            </Grid>
        </thriple:ContentControl3D.Content>
    </thriple:ContentControl3D>

 


Pyt

 

 

 

Coordinator
Mar 13, 2009 at 1:05 PM
Thanks for sharing your solution.

Josh
May 6, 2009 at 3:26 PM
If you want a quick "hack" on this, you can always go low-tech
Stick your content in a square element first..., then size the child.

In the example below, I wanted to change the DirectContentSample to have a thinner grid, so I nested it in a transparent square parent grid.
regards
Moose

 

 

<thriple:ContentControl3D MaxWidth="700" MaxHeight="700">

 

 

 

<!-- FRONT SIDE -->

 

 

 

<thriple:ContentControl3D.Content>

 

 

 

<Grid Background="Transparent" Width="500" Height="500">

 

 

 

<Grid Background="SlateGray" Width="250" Height="500">

 

 

 

<Grid.RowDefinitions>

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="*" />

 

 

 

</Grid.RowDefinitions>

 

 

 

<!--

 

This Button's Command property is set to

the command that rotates the 3D surface.

-->

 

 

<Button

 

 

Grid.Row="0"

 

 

Content="Flip"

 

 

Command="thriple:ContentControl3D.RotateCommand"

 

 

HorizontalAlignment="Right"

 

 

Margin="10"

 

 

/>

 

 

 

<TextBlock

 

 

Grid.Row="1"

 

 

Background="LightBlue"

 

 

Margin="2,0"

 

 

Text="Front Side"

 

 

TextAlignment="Center"

 

 

VerticalAlignment="Center"

 

 

/>

 

 

 

</Grid>

 

 

 

</Grid>

 

 

 

</thriple:ContentControl3D.Content>

 

 

 

<!-- BACK SIDE -->

 

 

 

<thriple:ContentControl3D.BackContent>

 

 

 

<Grid Background="Transparent" Width="500" Height="500">

 

 

 

<Grid Background="SlateGray" Width="250" Height="500">

 

 

 

<Grid.RowDefinitions>

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="*" />

 

 

 

</Grid.RowDefinitions>

 

 

 

<!--

 

This Button's Command property is set to

the command that rotates the 3D surface.

-->

 

 

<Button

 

 

Grid.Row="0"

 

 

Content="Flip"

 

 

Command="thriple:ContentControl3D.RotateCommand"

 

 

HorizontalAlignment="Right"

 

 

Margin="10"

 

 

/>

 

 

 

<TextBlock

 

 

Grid.Row="1"

 

 

Background="LightGreen"

 

 

Margin="2,0"

 

 

Text="Back Side"

 

 

TextAlignment="Center"

 

 

VerticalAlignment="Center"

 

 

/>

 

 

 

</Grid>

 

 

 

</Grid>

 

 

 

</thriple:ContentControl3D.BackContent>

 

 

 

</thriple:ContentControl3D>

 

Aug 4, 2009 at 4:41 PM

Has anyone got fixed content size working without being stretched?

I've used the first answer above, however I still cannot get the UIElements to show as I would expect. I just want the size and the location of the items to be where I put them.

The control itself is great and exactly what I want, I just want to be able to fix the size of items. Often it appears that the "view" is zoomed in greatly, and only reszing the window to small size allows me to see any items in my grid.

Cheers

 

Ed