Rotate property missing in new wheels?

[JaysArcade]

So I was editing an old theme in the CTC to bring it up to date. It seems the rotate property is missing. I asked @y2guru about it. Apparently the rotate/angle property is missing from the new wheels in BigBox. This was used quite a bit in the legacy wheels. Can this be added in a future update? 

 

Edited March 6, 2023 by JaysArcade
Grammar

[C-Beats]

1 hour ago, JaysArcade said:

So I was editing an old theme in the CTC to bring it up to date. It seems the rotate property is missing. I asked @y2guru about it. Apparently the rotate/angle property is missing from the new wheels in BigBox. This was used quite a bit in the legacy wheels. Can this be added in a future update? 

 

I'd have to vet out what the XAML looks like but am fairly positive all 3 are currently possible. I admit it requires a bit more work to do than the old CoverFactories did, but should be possible. It's also entirely possible to use the CoverFactories still if you find that easier and they provide the image type you want displayed.

1) Done by using ItemSpacing on FlowControl
2) Stock look
3) Done by using the RotationAxis and RotationAngle properties in the FlowContext (will need to use some of the helper properties to drive a style that changes this based on if the item is above/below selected item). Will probably need to pair with the ItemSpacing property of the Flow Control as well if you want the items to look like they are being rotated around a circle like Unified does and is displayed in your picture.

[JaysArcade]

22 hours ago, C-Beats said:

I'd have to vet out what the XAML looks like but am fairly positive all 3 are currently possible. I admit it requires a bit more work to do than the old CoverFactories did, but should be possible. It's also entirely possible to use the CoverFactories still if you find that easier and they provide the image type you want displayed.

1) Done by using ItemSpacing on FlowControl
2) Stock look
3) Done by using the RotationAxis and RotationAngle properties in the FlowContext (will need to use some of the helper properties to drive a style that changes this based on if the item is above/below selected item). Will probably need to pair with the ItemSpacing property of the Flow Control as well if you want the items to look like they are being rotated around a circle like Unified does and is displayed in your picture.

Do have example code that demonstrates how this works?

[C-Beats]

I'll see if I can get you a POC as I get time this week.

[JaysArcade]

On 3/7/2023 at 8:22 AM, C-Beats said:

I'll see if I can get you a POC as I get time this week.

Did you ever get a chance to look into this?

[C-Beats]

23 hours ago, JaysArcade said:

Did you ever get a chance to look into this?

I did with Faeran after I posted but don't really remember what came out from it. Some of the situations aren't as straightforward as they could be if wanting to use FlowContext. If just wanting to use a logo using the old CoverFactory is of course an option. Feel free to PM me and remind me in the future. Been working hard on the next version and I admit it slipped my mind after that initial talk and I forgot to post any update on the forum. My apologies. You have a concept image of what you're ultimately trying to that I could see that would help me make sure I'm getting you the best information?

[darkseekerliu]

I also wish to be able to build themes with the wheel spacing and alignment like in this theme below:

I have even talked to CTC creator here and opened a feature request to bigbox team.

Currently only by coding, according to Brian, we can get this result - for rotation and alignment. 

I will be looking closely once this feature is released to update my themes. 

 

[wallmachine]

I think this is possible now but there might be an issue with coverFlow:FlowModel, because the isleftofselect and isrightofselected isn't rotating the items
 

<coverFlow:FlowControl x:Name="FlowControl" Grid.ColumnSpan="3" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Endless="True" Rows="1" SelectedScale="1.6, 1.6" ItemSpacing="0.8, 0.8" CurveAmount="6">
    <coverFlow:FlowControl.Camera>
        <OrthographicCamera Position="0, 0, 5" LookDirection="0, 0, -1" NearPlaneDistance="0.01" FarPlaneDistance="1000" Width="8" />
    </coverFlow:FlowControl.Camera>

    <coverFlow:FlowControl.DataContext>
        <coverFlow:FlowModel>
            <coverFlow:FlowModel.Style>
                <Style TargetType="{x:Type coverFlow:FlowModel}">
                    <Setter Property="RotationAngle" Value="0" />
                    <Setter Property="RotationAxis" Value="0,1,0" />
                    <Style.Triggers>
                        <Trigger Property="IsLeftOfSelected" Value="True">
                            <Setter Property="RotationAngle" Value="-20" />
                            <Setter Property="RotationAxis" Value="0,1,0" />
                        </Trigger>
                        <Trigger Property="IsRightOfSelected" Value="True">
                            <Setter Property="RotationAngle" Value="20" />
                            <Setter Property="RotationAxis" Value="0,1,0" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </coverFlow:FlowModel.Style>
        </coverFlow:FlowModel>
    </coverFlow:FlowControl.DataContext>

    <coverFlow:FlowControl.FlowTemplate>
        <DataTemplate>
            <coverFlow:FlowContext>
                <coverFlow:FlowImage ImageType="Clear Logo">
                    <coverFlow:FlowImage.Style>
                        <Style TargetType="coverFlow:FlowImage">
                            <Setter Property="Opacity" Value="0.6" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type coverFlow:FlowContext}}, Path=IsItemSelected}" Value="True">
                                    <Setter Property="Opacity" Value="1" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </coverFlow:FlowImage.Style>
                </coverFlow:FlowImage>
            </coverFlow:FlowContext>
        </DataTemplate>
    </coverFlow:FlowControl.FlowTemplate>
</coverFlow:FlowControl>

 

Edited June 4, 2023 by wallmachine

[C-Beats]

Your XAML wouldn't work for several reasons. The FlowModel doesn't belong in the FlowControl's DataContext, it goes in the FlowTemplate. If you're looking for syntax on how to use those bindings Faeran's 3-Dimensions theme uses it pretty heavily.

[wallmachine]

23 hours ago, C-Beats said:

Your XAML wouldn't work for several reasons. The FlowModel doesn't belong in the FlowControl's DataContext, it goes in the FlowTemplate. If you're looking for syntax on how to use those bindings Faeran's 3-Dimensions theme uses it pretty heavily.

Ah I misunderstood what that feature was doing.

What I was after was below, but when setting the angle it squishes/skews the clear logo any idea on how to fix it? I used RotationAmount before but doesn't work in coverflows.

Had to use <Setter Property="LayoutTransform">

Edited June 6, 2023 by wallmachine

[C-Beats]

There is a "RotationAngle" (double) and "RotationAxis" (Vector3D) that can be styled on the FlowContext that rotates the entire item in the FlowControl. Typically you want "0,1,0" (Up) or "0,0,1" (Forward) to be the Axis

[wallmachine]

1 minute ago, C-Beats said:

There is a "RotationAngle" (double) and "RotationAxis" (Vector3D) that can be styled on the FlowContext that rotates the entire item in the FlowControl. Typically you want "0,1,0" (Up) or "0,0,1" (Forward) to be the Axis

yeah, couldn't get it to work looking at @faeran theme, the clear logos always end up blank, maybe when he has times he can provide an example.

thought i was in luck seems LayoutTransform is causing weird movement when isleftofselected and isrightofselcted go to isitemselcted.

[wallmachine]

Anyone got tips on how to get this going?