XAML Tips and Tricks

[Jason Carr]

Hi @skainlurmis, it is indeed possible to skew images and video but might not be easy. You can work with images on a 3D plane which basically allows you to do most anything. There are probably options to transform them as well, though I'm less familiar with that.

[Maddoc1007]

Yes it is possible to skew any item in in the themes in xaml here is a screenshot of a new theme im currently working on

 

[Jason Carr]

Wow @Maddoc1007, very cool! What technique are you using to do that?

[Maddoc1007]

@Jason Carr Hi Jason am using skewtransform for the Wheel Data and Notes as well as the Video, glad you like not all platforms will have skew in them just one more platform see other screenshot as well as screenshot for another platform non skew and one in games or maybe 2 not sure yet.  For the platform with the large video iam trying to get just the scrolling platform notes to work n the centre between the recent and favourite games but am not having much luck yet maybe you can help there?

[Maddoc1007]

@Jason Carr Here is screenshots of Coverflow with Details and Coverflow

[spektor56]

Yes, XAML has a bunch of 2D and 3D manipulation stuff built in.  You can even render to a face of a 3D object in WPF.

[Maddoc1007]

@spektor56 yes but not for video as it allows only for manupilation in the X and Y plane but not the Z plane which i was originally looking for and needed for proper 3d effect but have been all over the net and cannot find a way to do this for video as yet.

[spektor56]

You can put the camera wherever you want in a 3D viewport.

[Maddoc1007]

@spektor56 could you elaborate a bit more on that for video with maybe some sample code as have tried but couldnt get it working for video

[spektor56]

sure, ill whip something up and post it here

[Maddoc1007]

@spektor56 KUDOS have been trying but had given up as kept getting nothing but errors when i tried it would really be appreciated.

[spektor56]

 

here's some sample code:

 

<Viewport3D>

            <Viewport3D.Camera>

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

            </Viewport3D.Camera>

            <Viewport2DVisual3D >

                <Viewport2DVisual3D.Transform>

                    <RotateTransform3D>

                        <RotateTransform3D.Rotation>

                            <AxisAngleRotation3D Angle="40" Axis="0, 1, 0" />

                        </RotateTransform3D.Rotation>

                    </RotateTransform3D>

                </Viewport2DVisual3D.Transform>

                <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" />

                </Viewport2DVisual3D.Material>

                <Viewport2DVisual3D.Visual>

                    <MediaElement x:Name="MediaPlayer" UnloadedBehavior="Manual"/>

                </Viewport2DVisual3D.Visual>

            </Viewport2DVisual3D>

            <ModelVisual3D>

                <ModelVisual3D.Content>

                    <DirectionalLight Color="#FFF" Direction="0,0,-1"/>

                </ModelVisual3D.Content>

            </ModelVisual3D>

        </Viewport3D>

 

[Maddoc1007]

@spektor56 Am still not getting my head around this fully as cant seem to apply the logic to the platform videos.   What i am trying and maybe you will be able to sort out the code for me is something like at the 0:35 mark in the video the way it shows a 3d depth perspective, but use the platform videos in a theme see mockup screenshot (this shot is a mockup from my old theme and not the theme im currently working on).  Is that even possible to do with our platform videos?

[spektor56]

 

                <Viewport2DVisual3D.Transform>

                    <RotateTransform3D>

                        <RotateTransform3D.Rotation>

                            <AxisAngleRotation3D Angle="-20" Axis="0, 1, 0" />

                        </RotateTransform3D.Rotation>

                    </RotateTransform3D>

                </Viewport2DVisual3D.Transform>

                <Viewport2DVisual3D.Geometry>

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

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

                </Viewport2DVisual3D.Geometry>

 

[Maddoc1007]

@spektor56 Yes this is what i am looking for however when i place the code under 

<transitions:TransitionPresenter Transition="{transitions:FadeTransition}" Content="{Binding ImageVideoView}"  IsContentVideo="true" Margin="0,0,0,0" Grid.Column="3" Grid.Row="2" />
<Viewport2DVisual3D.Transform>

                    <RotateTransform3D>

                        <RotateTransform3D.Rotation>

                            <AxisAngleRotation3D Angle="-20" Axis="0, 1, 0" />

                        </RotateTransform3D.Rotation>

                    </RotateTransform3D>

                </Viewport2DVisual3D.Transform>

                <Viewport2DVisual3D.Geometry>

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

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

                </Viewport2DVisual3D.Geometry>

when i do i get  The attached property 'Transform'was not found in type 'Viewport2DVisual3D' for <Viewport2DVisual3D.Transform>
and The attached property 'Geometry'was not found in type 'Viewport2DVisual3D' for </Viewport2DVisual3D.Geometry> and even the same if i add it as a media element named ImageVideoView.  As you can see am totaly noob at xaml, but would like to thank you for all your help thus far Thank You.

[Maddoc1007]

@Jason Carr New theme should be finished in about a week, I call it SciDoc, have all the platform views and 2 game views done 4 of the platform views have scrolling data and notes, is it okay to send to you when finished for you to check it over her are the last two platforms platform view 1 and text list with details. Could you also tell me where i change the font size for the platform names in the in the platform text list with details i cant seem to find where to change it.

[skainlurmis]

Thanks for getting back to me, I appreciate it. Now heres my next question..So in most view (as long as you haven't turned on the "skip games details page") it takes you to a 3rd page. The one that has Play, Flip Box, etc. Is that a separate view? If I wanted to make a 3rd background or theme for that page would that be possible, or is it cycling out something in that space? Does that make sense? Thanks again!

[skainlurmis]

Oh wait! Is it the TextGamesView? 

[Maddoc1007]

That is the transition screen with just a bit more you can do before you launch the game, it only view of the game and it is themeable the textgamesview.  Most people always turn it off as its just an extra button press before you get to play the game. 

Edited November 21, 2016 by Maddoc1007

[pytsharp]

Hi,

I'm creating a new theme inspired by the Nevato theme for the AttractMode frontend (see video below).

So far, I've got to this stage, with the help of the very kind @viking who's helped me by providing the source file for the arcade cabinet he used for his awesome cinematic videos:

My main problem at the moment is that I would like to show the game video both as a background and in the arcade screen. The video works well in the BackgroundView, but I'm trying to use a 

<transitions:TransitionPresenter TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true" />

to show the same video in the arcade screen, but it always shows a screenshot of the game, and not the video. Am I doing something wrong or is there no way to show the same video twice at the moment? @Jason Carr, can you help ?

Also, I have a couple more questions:

• Is it possible to make the wheel elements rotated as well as offset? The CurveAmount parameter affects the offset but not the angle of the elements, so I can't achieve an effect similar to the one in the AttractMode wheel
• Is it possible to remove any sort of fading when switching between videos? Even selecting No Transition in the BigBox options, BackgroundTransitionSelector seems to always apply a fade to videos. I would like to recreate the snappiness that can be seen in the AttractMode video when scrolling the wheel

Thank you very much!