XAML Tips and Tricks

[The Mask]

So there's no way to tell it to leave the wheel as it is but to just add the text? Seems like now I have to rebuild the wheel from scratch and for some reason this becomes very laggy.

[cenutrio351]

Hello!

Im only want to add custom fields and region (language available in the games) to default big box theme.Im trying, but dont now how to do it, please help.

Thanks!.

[Retro808]

1 hour ago, cenutrio351 said:

Hello!

Im only want to add custom fields and region (language available in the games) to default big box theme.Im trying, but dont now how to do it, please help.

Thanks!.

LB or BB? The Default theme’s in either should show those fields in the Game Details section if you have those fields checked in your settings. 

Just an FYI you can never edit the theme coding if the Default themes for LB or BB. You have to copy the theme folder snd rename it. Then you can code edit that theme. 

[cenutrio351]

Hello!

Big box I mean.Yes, thanks I now that, I change the name and the theme for me is beautiful, only want to add this little things.I have these fields cheked in my options, its appears in other themes, but not in the default.

I can not find the xml to change and I already read the documentation, maybe its not possible or maybe Im very, very bad in computers, lol.

Thanks to any thelp.

Edited August 13, 2023 by cenutrio351

[Drybonz]

I am asking about the new default theme for LB (since there is no similar thread in the LB themes section).

I would like to adjust the fade-in times for the images in the game details panel.  If anyone can point this section of the .xaml out for me, it is most appreciated.  Thanks.

Again, this is regarding the new default theme for LB.

*edit*  Was told it may be in a "storyboard" related section.  If anyone can point out the specifics, I appreciate it.  Thanks again.

Edited August 24, 2023 by Drybonz

[C-Beats]

@Drybonz Faeran does a really good job commenting his themes and took extra time to make sure he did so with the new default as well. Each section is labeled with a comment and you've been told the control name you want to type in the search bar and look. I believe it's actually the FIRST storyboard in that file that drives it. What you want to do is change is the duration inside of the animations to whatever value you want.

[Drybonz]

I noticed that it was well annotated... for a guy like me that doesn't know much about this type of thing it can still be pretty confusing.  I'm sure it's second nature for you though.

I found some of those durations, but changing them didn't seem to do much.  I mainly want to start the animations at the same time instead of staggered and maybe reduce the length.  I'll take another look at it and see if I can figure it out.

[The Mask]

I'm not sure how to include ItemSpacing inside of the flowcontrol, can someone help with an example codeblock from the example in the docs? this is very hard to figure out without visual studio.

 

 

Edited October 4, 2023 by The Mask

[faeran]

14 hours ago, The Mask said:

I'm not sure how to include ItemSpacing inside of the flowcontrol, can someone help with an example codeblock from the example in the docs? this is very hard to figure out without visual studio.

 

 

Design-wise, what are you trying to accomplish?

[The Mask]

On 10/5/2023 at 9:21 AM, faeran said:

Design-wise, what are you trying to accomplish?

I am trying to reduce the space between items on the wheel atm; working from the code you have me earlier.

[faeran]

On 10/6/2023 at 3:23 PM, The Mask said:

I am trying to reduce the space between items on the wheel atm; working from the code you have me earlier.

Have you use the itemspacing property on the coverflow itself?

Something like:

<coverFlow:FlowControl ItemSpacing="x,y" />

 

[The Mask]

I haven't. That's the answer I was looking for and I wasn't sure on how to format that from the docs. Thank you. Lastly, how would I separate the selected game's size from the unselected games (selected game bigger/unselected game normal size)?

 

Edit: tried what you provided but it didn't do anything. I used the camera controls for making items bigger for I couldnt get scale to work either.

                            <coverFlow:FlowControl
                                x:Name="FlowControl"
                                Height="{Binding ElementName=Canvas, Path=ActualHeight}"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Bottom"
                                CameraZPosition="3.12"
                                ClipToBounds="True"
                                CoverFactory="{Binding CoverFactory}"
                                CurveAmount="0.0"
                                CustomImageType="Steam Banner"
                                Endless="False"
                                MaxVerticalImageResolutionOverride="800"
                                Opacity="1.0"
                                PageSize="4"
                                RenderOptions.BitmapScalingMode="HighQuality"
                                Spacing="1.001"
                                VisibleCount="4">
								<coverFlow:FlowControl.Camera> 
									<OrthographicCamera 
										Position="0,0,5" 
										LookDirection="0,0,-1" 
										NearPlaneDistance="0.01" 
										FarPlaneDistance="1000" 
										Width="2.7" /> 
								</coverFlow:FlowControl.Camera>
								<coverFlow:FlowControl.FlowTemplate>
                                    <DataTemplate>
                                        <coverFlow:FlowContext>
                                          <Grid Background="Transparent" >
                                            <Grid.ColumnDefinitions>
                                              <ColumnDefinition Width="1*"/>
                                              <ColumnDefinition Width="1*"/>
                                            </Grid.ColumnDefinitions>	
											<coverFlow:FlowControl ItemSpacing="0,0"/> 
                                            <coverFlow:FlowImage Grid.Column="0" HorizontalAlignment="Stretch" ImageType="Steam Banner" Height="{Binding ElementName=Canvas, Path=ActualHeight}"/>
                                            <TextBlock Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type coverFlow:FlowContext}}, Path=DataContext.Title}" />
                                          </Grid>
                                        </coverFlow:FlowContext>
                                    </DataTemplate>
                                </coverFlow:FlowControl.FlowTemplate>	
                                
                            </coverFlow:FlowControl>

 

Edited October 10, 2023 by The Mask

[faeran]

1 hour ago, The Mask said:

I haven't. That's the answer I was looking for and I wasn't sure on how to format that from the docs. Thank you. Lastly, how would I separate the selected game's size from the unselected games (selected game bigger/unselected game normal size)?

 

Edit: tried what you provided but it didn't do anything. I used the camera controls for making items bigger for I couldnt get scale to work either.

                            <coverFlow:FlowControl
                                x:Name="FlowControl"
                                Height="{Binding ElementName=Canvas, Path=ActualHeight}"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Bottom"
                                CameraZPosition="3.12"
                                ClipToBounds="True"
                                CoverFactory="{Binding CoverFactory}"
                                CurveAmount="0.0"
                                CustomImageType="Steam Banner"
                                Endless="False"
                                MaxVerticalImageResolutionOverride="800"
                                Opacity="1.0"
                                PageSize="4"
                                RenderOptions.BitmapScalingMode="HighQuality"
                                Spacing="1.001"
                                VisibleCount="4">
								<coverFlow:FlowControl.Camera> 
									<OrthographicCamera 
										Position="0,0,5" 
										LookDirection="0,0,-1" 
										NearPlaneDistance="0.01" 
										FarPlaneDistance="1000" 
										Width="2.7" /> 
								</coverFlow:FlowControl.Camera>
								<coverFlow:FlowControl.FlowTemplate>
                                    <DataTemplate>
                                        <coverFlow:FlowContext>
                                          <Grid Background="Transparent" >
                                            <Grid.ColumnDefinitions>
                                              <ColumnDefinition Width="1*"/>
                                              <ColumnDefinition Width="1*"/>
                                            </Grid.ColumnDefinitions>	
											<coverFlow:FlowControl ItemSpacing="0,0"/> 
                                            <coverFlow:FlowImage Grid.Column="0" HorizontalAlignment="Stretch" ImageType="Steam Banner" Height="{Binding ElementName=Canvas, Path=ActualHeight}"/>
                                            <TextBlock Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type coverFlow:FlowContext}}, Path=DataContext.Title}" />
                                          </Grid>
                                        </coverFlow:FlowContext>
                                    </DataTemplate>
                                </coverFlow:FlowControl.FlowTemplate>	
                                
                            </coverFlow:FlowControl>

 

Check for SelectedScale and SelectedOffsetProperty in the doc, using them in the same spot as the ItemSpacing. SelectedScale is what you are looking for, while SelectedOffsetProperty would then allow you to position that item to where you want it to be (if you want to move it from center).

Something like <coverFlow:FlowControl SelectedScale="x,y" SelectedOffsetProperty="x,y" />

[The Mask]

I dont see any changes when using SelectedScale values and when I add SelectedOffsetProperty values, the wheel disappears. ItemSpacing doesn't seem to do anything either. I dunno what the problem is.

 

<coverFlow:FlowControl
                                x:Name="FlowControl"
                                Height="{Binding ElementName=Canvas, Path=ActualHeight}"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Bottom"
                                CameraZPosition="3.12"
                                ClipToBounds="True"
                                CoverFactory="{Binding CoverFactory}"
                                CurveAmount="0.0"
                                CustomImageType="Steam Banner"
                                Endless="False"
                                MaxVerticalImageResolutionOverride="800"
                                Opacity="1.0"
                                PageSize="4"
                                RenderOptions.BitmapScalingMode="HighQuality"
                                Spacing="1.001"
                                VisibleCount="4">
								<coverFlow:FlowControl.Camera> 
									<OrthographicCamera 
										Position="0,0,5" 
										LookDirection="0,0,-1" 
										NearPlaneDistance="0.01" 
										FarPlaneDistance="1000" 
										Width="2.7" /> 
								</coverFlow:FlowControl.Camera>
								<coverFlow:FlowControl.FlowTemplate>
                                    <DataTemplate>
                                        <coverFlow:FlowContext>
                                          <Grid Background="Transparent" >
                                            <Grid.ColumnDefinitions>
                                              <ColumnDefinition Width="1*"/>
                                              <ColumnDefinition Width="1*"/>
                                            </Grid.ColumnDefinitions>	
											<coverFlow:FlowControl ItemSpacing="0,-20" SelectedScale="3,3" SelectedOffsetProperty="1.5,1.5"/> 
                                            <coverFlow:FlowImage Grid.Column="0" HorizontalAlignment="Stretch" ImageType="Steam Banner" Height="{Binding ElementName=Canvas, Path=ActualHeight}"/>
                                            <TextBlock Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type coverFlow:FlowContext}}, Path=DataContext.Title}" />
                                          </Grid>
                                        </coverFlow:FlowContext>
                                    </DataTemplate>
                                </coverFlow:FlowControl.FlowTemplate>
  
  </coverFlow:FlowControl>

Spoiler

l

 

[The Mask]

I've tried it on the default theme wheel and same results. I'm going to try to set the wheel up like the default wheel with the setters and such and see what happens.

[faeran]

39 minutes ago, The Mask said:

I've tried it on the default theme wheel and same results. I'm going to try to set the wheel up like the default wheel with the setters and such and see what happens.

The way SelectedScale works is that "1.0,1.0" means X value is 100%, and Y value is 100%. I forgot that SelectedOffset is actually "x,y,z", and I would adjust things by decimal points until you understand what each one can do.

With the code you keep posting, you are probably seeing odd results because you are trying to combine the legacy wheel properties with the new wheel properties.

Instead, a good starting point is the default theme. Here's the example from one of the platform vertical wheels from the default theme, but I do recommend just diving into the default theme files, and use that as a resource, along with the documentation.pdf:

    <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SelectedOffset="0,0,1"
CurveAmount="0" CameraZPosition="3.0" PageSize="8" Columns="1" Endless="True" SelectedScale="1.4,1.4" ItemSpacing="0,-0.8" SelectedItemSpacing="0,-0.6">

 

[The Mask]

On 10/11/2023 at 9:20 AM, faeran said:

The way SelectedScale works is that "1.0,1.0" means X value is 100%, and Y value is 100%. I forgot that SelectedOffset is actually "x,y,z", and I would adjust things by decimal points until you understand what each one can do.

With the code you keep posting, you are probably seeing odd results because you are trying to combine the legacy wheel properties with the new wheel properties.

Instead, a good starting point is the default theme. Here's the example from one of the platform vertical wheels from the default theme, but I do recommend just diving into the default theme files, and use that as a resource, along with the documentation.pdf:

    <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SelectedOffset="0,0,1"
CurveAmount="0" CameraZPosition="3.0" PageSize="8" Columns="1" Endless="True" SelectedScale="1.4,1.4" ItemSpacing="0,-0.8" SelectedItemSpacing="0,-0.6">

 

So I got most to work with the Setter method. How do you target the text in the wheel with the Setter method only (example format)?

[walter10h]

Anyone has any idea as to how I can put an image next to each game on TextGameView wheel? I want to have a banner next to the name of the game but I have no idea how to do it. I tried adding 

<Image Source="{Binding Path=ActiveGame.CartFrontImagePath}" />

before the grid, but it just crashed the Community theme creator. Here's my full code.

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
	<Setter Property="FocusVisualStyle" Value="{x:Null}" />
	<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" />
	<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" />
	<Setter Property="Background" Value="Transparent" />
	<Setter Property="BorderBrush" Value="Transparent" />
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type ListBoxItem}">
				<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" SnapsToDevicePixels="True" CornerRadius="10" Margin="0,0,0,0">
					<Grid>
						<Rectangle Stroke="Black"   Fill="Transparent"  StrokeThickness="0" RadiusX="0" RadiusY="0" />
						<Rectangle Stroke="@@SELECTEDITEMFOREGROUNDCOLOR@@"  Fill="Transparent" StrokeThickness="4" StrokeDashCap="Square" StrokeDashArray="0" StrokeDashOffset="6" RadiusX="15" RadiusY="15">
							<Rectangle.Triggers>
								<EventTrigger RoutedEvent="FrameworkElement.Loaded">
									<BeginStoryboard>
										<Storyboard>
											<DoubleAnimation From="0" To="0" Duration="0:0:.5" RepeatBehavior="Forever" Storyboard.TargetProperty="StrokeDashOffset"/>
										</Storyboard>
									</BeginStoryboard>
								</EventTrigger>
							</Rectangle.Triggers>
						</Rectangle>
						<Grid x:Name="Reticle" Visibility="Hidden">
							<Rectangle Stroke="Black"   Fill="Transparent"  StrokeThickness="0" RadiusX="0" RadiusY="0" />
							<Rectangle Stroke="@@SELECTEDITEMFOREGROUNDCOLOR@@"  Fill="Transparent" StrokeThickness="4" StrokeDashCap="Square" StrokeDashArray="0" StrokeDashOffset="6" RadiusX="10" RadiusY="10">
								<Rectangle.Triggers>
									<EventTrigger RoutedEvent="FrameworkElement.Loaded">
										<BeginStoryboard>
											<Storyboard>
												<DoubleAnimation From="0" To="0" Duration="0:0:.5" RepeatBehavior="Forever" Storyboard.TargetProperty="StrokeDashOffset"/>
											</Storyboard>
										</BeginStoryboard>
									</EventTrigger>
								</Rectangle.Triggers>
							</Rectangle>
						</Grid>
						<ContentPresenter
							HorizontalAlignment="Stretch"
							VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
							Content="{TemplateBinding Content}"
							ContentStringFormat="{TemplateBinding ContentStringFormat}"
							ContentTemplate="{TemplateBinding ContentTemplate}"
							SnapsToDevicePixels="True" />
					</Grid>
				</Border>
				<ControlTemplate.Triggers>
					<MultiTrigger>
						<MultiTrigger.Conditions>
							<Condition Property="Selector.IsSelectionActive" Value="False" />
							<Condition Property="IsSelected" Value="True" />
						</MultiTrigger.Conditions>
						<Setter TargetName="Reticle" Property="Visibility" Value="Visible" />
						<Setter TargetName="Bd" Property="TextElement.Foreground" Value="@@SELECTEDITEMFOREGROUNDCOLOR@@" />
						<Setter TargetName="Bd" Property="Background" Value="#0a34a5" />
					</MultiTrigger>
					<!-- This Sets the Color of the Search Index (Selected) -->
					<MultiDataTrigger>
						<MultiDataTrigger.Conditions>
							<Condition Binding="{Binding Name, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" Value="Index"/>
							<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="True" />
						</MultiDataTrigger.Conditions>
						<Setter TargetName="Bd" Property="TextElement.Foreground" Value="@@SISELECTEDITEMFORECOLOR@@" />
						<Setter TargetName="Bd" Property="Background" Value="@@SISELECTEDITEMBACKCOLOR@@" />
						<Setter TargetName="Reticle" Property="Visibility" Value="Hidden" />
					</MultiDataTrigger>
					<!-- This Sets the Color of the Search Index (Not Selected) -->
					<MultiDataTrigger>
						<MultiDataTrigger.Conditions>
							<Condition Binding="{Binding Name, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" Value="Index"/>
							<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="False" />
						</MultiDataTrigger.Conditions>
						<Setter TargetName="Bd" Property="TextElement.Foreground" Value="@@SIFORECOLOR@@" />
						<Setter TargetName="Bd" Property="Background" Value="@@SIBACKCOLOR@@" />
						<Setter TargetName="Reticle" Property="Visibility" Value="Hidden" />
					</MultiDataTrigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>
<Style x:Key="ListBoxStyle" TargetType="ListBox">
	<Setter Property="ItemContainerStyle" Value="{DynamicResource ListBoxItemStyle}"></Setter>
	<Setter Property="BorderBrush" Value="Transparent" />
	<Setter Property="Background" Value="Transparent" />
	<Setter Property="Foreground" Value="@@FORECOLOR@@" />
	<Setter Property="Opacity" Value="@@OPACITY@@" />
	<Setter Property="FontFamily" Value="@@FONT@@" />
	<Setter Property="FontWeight" Value="@@FONTWEIGHT@@" />
	<Setter Property="FontStyle" Value="@@FONTSTYLE@@" />
	<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
	<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
	<Setter Property="BorderThickness" Value="0" />
	<Setter Property="Padding" Value="0" />
	<Setter Property="Margin" Value="0" />
	<Setter Property="FocusVisualStyle" Value="{x:Null}" />
</Style>

Also, this is unrelated but I also tried to play an audio when a selection is made, but that also crashes the theme creator.

[karole3b]

I'm trying to play around with the sort category label divider thingies (I think it's called foreground text?) but I'm having trouble locating it in the xaml files. Anyone know roughly where it is? 

 

 

[C-Beats]

On 8/10/2024 at 9:05 PM, karole3b said:

I'm trying to play around with the sort category label divider thingies (I think it's called foreground text?) but I'm having trouble locating it in the xaml files. Anyone know roughly where it is? 

 

 

BoxesContentView. Search for "SeparatorVisibility".