PiperCalls Posted August 28 Share Posted August 28 I'm still very new to theme dev & have done a couple with CTC but trying to accomplish something with one I'm working on now. Basically it's a horizontal "coverflow" type theme for a specific cabinet. I see how to curve the wheel up or down (y-axis i think) but what i'm trying to do is slightly curve the wheel in what I would call the "z-axis" so back into the screen. So imagine if you're looking at an earth globe, the wheel would wrap around the equator. I actually think the theme engine uses the term z-axis for rotational axis of the wheel items though so that might not be the correct term. Here's a screenshot of what I'm basically trying to accomplish. You can see the "selected" item is flat but the items to the left & right seem to rotate around a curve back into the screen... If any theme gurus can help with code on this, I would need specific code as I don't think CTC offers anything like this as far as I can see and I don't understand all this just yet...still learning. C-Beats mentioned on discord that it might be easier to "use the current curve settings, then just rotate the image and camera to look at it from the appropriate angle" but I haven't been able to find how to do that. Here is my current wheel code for ref...TIA for ANY help!!! <!-- Wheel --> <Grid x:Name="Wheel" HorizontalAlignment="Left" VerticalAlignment="Top" Visibility="Visible" Width="{Binding ElementName=Canvas,Path=ActualWidth,Converter={StaticResource ScalePropertyValueD},ConverterParameter=W;1703;1920}" Height="{Binding ElementName=Canvas,Path=ActualHeight,Converter={StaticResource ScalePropertyValueD},ConverterParameter=H;627;1080}" RenderTransformOrigin="0.5,0.5" Panel.ZIndex="15" > <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CurveAmount="0" VisibleCount="5" Rows="1" Endless="True" ItemSpacing="-0.8,0" SelectedItemSpacing="-0.5,0" SelectedOffset="0,0,1" SelectedScale="1.25,1.25" PageSize="5" DelaySelectedItemAnimation="False" MinimumAnimationSpeed="400"> <coverFlow:FlowControl.Camera> <OrthographicCamera Position="0,0,6" LookDirection="0,0,-1" NearPlaneDistance=".01" FarPlaneDistance="1000" Width="6.8"/> </coverFlow:FlowControl.Camera> <coverFlow:FlowControl.FlowTemplate> <DataTemplate> <coverFlow:FlowContext> <coverFlow:FlowImage ImageType="Clear Logo" RenderOptions.BitmapScalingMode="HighQuality" UseImageCache="False"/> <coverFlow:FlowContext.Style> <Style TargetType="coverFlow:FlowContext"> <Style.Triggers> <Trigger Property="IsItemSelected" Value="True"> <Setter Property="RotationAxis" Value="0,0,0"/> <Setter Property="RotationAngle" Value="0"/> </Trigger> <Trigger Property="IsLeftOfSelected" Value="True"> <Setter Property="RotationAxis" Value="0,0,0"/> <Setter Property="RotationAngle" Value="0"/> </Trigger> <Trigger Property="IsRightOfSelected" Value="True"> <Setter Property="RotationAxis" Value="0,0,0"/> <Setter Property="RotationAngle" Value="0"/> </Trigger> </Style.Triggers> </Style> </coverFlow:FlowContext.Style> </coverFlow:FlowContext> </DataTemplate> </coverFlow:FlowControl.FlowTemplate> <coverFlow:FlowControl.RenderTransform> <TransformGroup> <RotateTransform Angle="0" /> <ScaleTransform ScaleX="1" ScaleY="1" /> <SkewTransform AngleX="0" AngleY="0" /> </TransformGroup> </coverFlow:FlowControl.RenderTransform> </coverFlow:FlowControl> <Grid.RenderTransform> <TransformGroup> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="{Binding ElementName=Canvas,Path=ActualWidth,Converter={StaticResource ScalePropertyValueD},ConverterParameter=X;110;1920}" Y="{Binding ElementName=Canvas,Path=ActualHeight,Converter={StaticResource ScalePropertyValueD},ConverterParameter=Y;207;1080}" /> </TransformGroup> </Grid.RenderTransform> </Grid> Quote Link to comment Share on other sites More sharing options...
C-Beats Posted August 28 Share Posted August 28 FlowContext has a RotationAngle and RotationAxis property that determines how the individual items are rotated. LookDirection on the camera is how you change what direction the camera is looking while Position changes where it's at. Quote Link to comment Share on other sites More sharing options...
PiperCalls Posted August 28 Author Share Posted August 28 Hmm ok so assuming it's in this bit of code... <Trigger Property="IsLeftOfSelected" Value="True"> <Setter Property="RotationAxis" Value="0,0,0"/> <Setter Property="RotationAngle" Value="0"/> </Trigger> ...so you think I'd need to add 2 additional like [Setter Property="LookDirection"] & [Setter Property="LookPosition"] & play around with those values until it looks right maybe? Quote Link to comment Share on other sites More sharing options...
C-Beats Posted August 28 Share Posted August 28 Shouldn't need a trigger. Should be able to rotate everything by the same amount. Use RotAxis of 1,0,0 and an RotAngle of 90. Then it's a matter of putting the cam in the right position and pointing it correctly. Something like Pos of 0,6,0 and LookDir of 0,-1,0. Those numbers aren't verified but sound correct enough for you to see the effect. Quote Link to comment Share on other sites More sharing options...
PiperCalls Posted August 28 Author Share Posted August 28 I just lose my wheel with those... <coverFlow:FlowControl.Camera> <OrthographicCamera Position="0,6,0" LookDirection="0,-1,0" NearPlaneDistance=".01" FarPlaneDistance="1000" Width="6.8"/> </coverFlow:FlowControl.Camera> <Trigger Property="IsLeftOfSelected" Value="True"> <Setter Property="RotationAxis" Value="1,0,0"/> <Setter Property="RotationAngle" Value="90"/> </Trigger> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.