Question about wall views

[davidkan1996]

Hi, I was creating a theme with the Community Theme Creator and then noticed there's no way to create an horizontal wall view.

What i was aiming was this kind of wheel with 2 or 3 rows that scrolls horizontally like NesicaXLive themes.

Am i doing something wrong or is there no actual way to do it?

Edited May 11, 2022 by davidkan1996

[C-Beats]

I don't believe in the currently public version of CTC you can do this but it can be done with the theming engine by setting the Rows property of the FlowControl to 3 and not setting the Columns property.

[davidkan1996]

I read about that in the documentation but can't seem to make it work...

here's my wheel if you can help me notice what i'm doing wrong.

		<!-- Wheel -->
		<Grid x:Name="Wheel" HorizontalAlignment="Left" VerticalAlignment="Top" Visibility="Visible" Width="{Binding ElementName=Canvas,Path=ActualWidth,Converter={StaticResource ScalePropertyValueD},ConverterParameter=W;1720;1920}" Height="{Binding ElementName=Canvas,Path=ActualHeight,Converter={StaticResource ScalePropertyValueD},ConverterParameter=H;250;1080}" RenderTransformOrigin="0.5,0.5" Panel.ZIndex="270">

			<coverFlow:FlowControl x:Name="FlowControl" 
			Opacity="1.0" ImageType="Clear Logo" 
			HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
			CurveAmount="0" CameraZPosition="5.5" VisibleCount="20" Spacing="2" 
			ItemZPosition="1.0" SelectedItemZPosition="1.3" PageSize="22" 
			CameraYAngle="0" RenderTransformOrigin=".5,.5"
			Rows="2"
			Endless="true"
			CoverFactory="{Binding CoverFactory}" >
				<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;100;1920}" Y="{Binding ElementName=Canvas,Path=ActualHeight,Converter={StaticResource ScalePropertyValueD},ConverterParameter=Y;710;1080}" />
				</TransformGroup>
			</Grid.RenderTransform>

		</Grid>

 

[C-Beats]

You're using a cover factory instead of a FlowTemplate. Try something like this:
 

<coverFlow:FlowControl x:Name="FlowControl" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Rows="3" ItemSpacing="0.05,0"
                       SelectedScale="1.5,1.5">
  <coverFlow:FlowControl.Camera>
    <OrthographicCamera Position="0,0,5" LookDirection="0,0,-1" NearPlaneDistance=".01" FarPlaneDistance="1000" Width="15"/>
  </coverFlow:FlowControl.Camera>
  <coverFlow:FlowControl.FlowTemplate>
    <DataTemplate>
      <coverFlow:FlowContext>
        <Border BorderThickness="30">
          <Border.Style>
            <Style TargetType="Border">
              <Setter Property="BorderBrush" Value="Transparent"/>
              <Setter Property="Opacity" Value=".2"/>
              <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type coverFlow:FlowContext}}, Path=IsItemSelected}" Value="True">
                  <Setter Property="BorderBrush" Value="White"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type coverFlow:FlowContext}}, Path=IsRowSelected}" Value="True">
                  <Setter Property="Opacity" Value="1"/>
                </DataTrigger>
              </Style.Triggers>
            </Style>
          </Border.Style>
          <coverFlow:FlowImage ImageType="Clear Logo"/>
        </Border>
      </coverFlow:FlowContext>
    </DataTemplate>
  </coverFlow:FlowControl.FlowTemplate>
</coverFlow:FlowControl>

 

[davidkan1996]

Wow i can't believe it was that easy. Now works perfectly, just need to adjust it.

Thank you very much!

[rockohoward]

@davidkan1996 Did you ever get this figured out?

[C-Beats]

On 7/13/2024 at 6:03 PM, rockohoward said:

@davidkan1996 Did you ever get this figured out?

Post right above yours states they did. Or do you mean complete the theme?

[rockohoward]

Both. I've been having issues trying to pull that format off

[Retro808]

7 minutes ago, rockohoward said:

Both. I've been having issues trying to pull that format off

Did you try to section of code C-beats posted for the original post. 

See below:

On 5/12/2022 at 9:24 AM, C-Beats said:

 

<coverFlow:FlowControl x:Name="FlowControl" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Rows="3" ItemSpacing="0.05,0"
                       SelectedScale="1.5,1.5">
  <coverFlow:FlowControl.Camera>
    <OrthographicCamera Position="0,0,5" LookDirection="0,0,-1" NearPlaneDistance=".01" FarPlaneDistance="1000" Width="15"/>
  </coverFlow:FlowControl.Camera>
  <coverFlow:FlowControl.FlowTemplate>
    <DataTemplate>
      <coverFlow:FlowContext>
        <Border BorderThickness="30">
          <Border.Style>
            <Style TargetType="Border">
              <Setter Property="BorderBrush" Value="Transparent"/>
              <Setter Property="Opacity" Value=".2"/>
              <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type coverFlow:FlowContext}}, Path=IsItemSelected}" Value="True">
                  <Setter Property="BorderBrush" Value="White"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type coverFlow:FlowContext}}, Path=IsRowSelected}" Value="True">
                  <Setter Property="Opacity" Value="1"/>
                </DataTrigger>
              </Style.Triggers>
            </Style>
          </Border.Style>
          <coverFlow:FlowImage ImageType="Clear Logo"/>
        </Border>
      </coverFlow:FlowContext>
    </DataTemplate>
  </coverFlow:FlowControl.FlowTemplate>
</coverFlow:FlowControl>

 

 

[rockohoward]

I did. However the spacing between rows is off. 

[C-Beats]

27 minutes ago, rockohoward said:

I did. However the spacing between rows is off. 

That ItemSpacing property can be manipulated to make the spacing match what you need. First number is horizontal gap, second is vertical.

[rockohoward]

I may be doing something wrong. 

Wall2GamesView.xaml

[C-Beats]

2 minutes ago, rockohoward said:

I may be doing something wrong. 

Wall2GamesView.xaml 108.68 kB · 0 downloads

Screenshot of what you're seeing would help as well.

[rockohoward]

Provided the wrong file earlier. But here's the screenshot

Wall2GamesView.xaml

[C-Beats]

Start by doing the steps provided above. Remove Columns from the FlowControl for example and see if that helps.