XAML Tips and Tricks

[Light Sock]

Ok great news playing with the code already in the theme and the alternative code offered on this forum I've found a solution that will work for a Full HD 1080p screen.

<transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Margin="480,0,0,0" Width="1440" Height="1080" IsContentVideo="true" />

So basically I've forced the Width and Height and after placed the video with a margin.

Margin="480,0,0,0" Width="1440" Height="1080"

I know this isn't good as if I have videos that aren't necessarily 1440x1080 it will have black borders. Also only works on 1080p screen. The video part of the code should be stretch to box size. And the box size to be 1440x1080. If anyone knows how to correctly create this code I'll be happy to apply it to my setup! Thanks.

[jinxist]

Right now im currently trying to put just the game notes in a space on my game details screen...I'm having trouble trying to get this to fit in the space designated as well just having the notes instead of the full game details. Could someone help me out with this?

[Gran_Moff_Tarkin]

In many of the available themes, the system view and options view have a different color selector for the menu items, such as on keltoigael's Cityhunter2 theme, where this selector is red. I have been able to change the selector color as well, but when going into any of the sub-menus, such as  the "Manage Themes" menu, the selector reverts to the default blue color.

I have scoured the view and style xaml files, as well as these forums, and can't seem to find a way to change the selector color in these sub-menus. I have downloaded most of the available themes, and I haven't found one that has modified these menus either.

Is it possible, and does anyone perhaps know in which style or view xaml file this would be done?

Many thanks to anyone that can help!

[Jason Carr]

@Gran_Moff_Tarkin The themes manager itself is hardcoded, and cannot be themed, mostly because it's the section of the app where you select themes, so I don't feel like it needs to be themed itself, as that might cause some issues. This way if a theme messes up your Big Box, at least you'll be able to still use the themes manager properly.

That said, there may be a place or two elsewhere that could be themed further. Can you point out specifically what you'd like to change?

[Gran_Moff_Tarkin]

@Jason Carr Thank you. It is really just the various theme manager pages that I was looking for. I suspected that they might be hard coded, and it is good to know that they are, so that I don't keep looking for their settings! I really appreciate the response, and am really enjoying your software. It is by far the best front-end out there.

[Krakerman]

So when using the CoverFlow view how could I go about changing the background images to a custom folder that each game?

I want a different background image to show when scrolling thru each game box however I want it to come from a custom folder

Edited November 8, 2019 by Krakerman

[wallmachine]

1 hour ago, Krakerman said:

So when using the CoverFlow view how could I go about changing the background images to a custom folder that each game?

I want a different background image to show when scrolling thru each game box however I want it to come from a custom folder

Not sure I fully understand but the below will change the image when selecting a game (background images need to have the same name as the game name). Props to @faeran who helped me with this a while back.

<TextBlock x:Name="GameBackgrounds">
	<TextBlock.Text>
		<MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/<Theme Name>/Images/GameBackgrounds/{0}.png">
			<Binding Path="ActiveGame.Title" />
		</MultiBinding>
	</TextBlock.Text>
</TextBlock>
<Image Source="{Binding Text, ElementName=GameBackgrounds}" RenderOptions.BitmapScalingMode="HighQuality" />

 

Edited November 8, 2019 by wallmachine

[Krakerman]

But what if you want them in each system folder not just one big folder full of images. So have a folder called Atari 2600 all the 2600 game backgrounds in there and Atari 5200 all the game backgrounds for that system ect ect.

Because looking at that code looks like it adds all images to one folder called GameBackgrounds. Also if I was to insert those lines of code where do you insert it.

Edited November 8, 2019 by Krakerman

[Retro808]

2 hours ago, Krakerman said:

But what if you want them in each system folder not just one big folder full of images. So have a folder called Atari 2600 all the 2600 game backgrounds in there and Atari 5200 all the game backgrounds for that system ect ect.

Because looking at that code looks like it adds all images to one folder called GameBackgrounds. Also if I was to insert those lines of code where do you insert it.

There may not be a way to do just what you want. I have tried in the past with videos without any luck. I think this is one of the things I asked Jason and he said was not currently possible. I was trying to do it with the existing folders plus adding a new folder in them. Maybe it can work if all your images are in the theme's folder. That was a while ago though. 

I take it you want to use a custom background folder as to not overwrite images that may be/get downloaded into the normal Fanart-Background folder?

[Krakerman]

Yeah... Oh wow this is a feature think we need for sure. We needs more custom control over image folders.

Edited November 8, 2019 by Krakerman

[faeran]

21 minutes ago, Krakerman said:

But what if you want them in each system folder not just one big folder full of images. So have a folder called Atari 2600 all the 2600 game backgrounds in there and Atari 5200 all the game backgrounds for that system ect ect.

Because looking at that code looks like it adds all images to one folder called GameBackgrounds. Also if I was to insert those lines of code where do you insert it.

Should be something like this:

 

<TextBlock x:Name="GameBackgrounds">
	<TextBlock.Text>
		<MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/<Theme Name>/Images/GameBackgrounds/{0}/{1}.png">
          		<Binding Path="ActiveGame.Platform" />
			<Binding Path="ActiveGame.Title" />
		</MultiBinding>
	</TextBlock.Text>
</TextBlock>
<Image Source="{Binding Text, ElementName=GameBackgrounds}" RenderOptions.BitmapScalingMode="HighQuality" />

I didn't test this, but I'm pretty sure it should work.

Basically, the first bind calls the platform name, and puts it into {0}, the second bind calls the game title, and puts it into {1}.

[Krakerman]

Will try that .... be nice if this works!?

[Krakerman]

Nope I just get black screen

[Krakerman]

So Line 4 is where is grabbing images from the fanart - background but I want a custom folder to grab them from like we been talking.

[faeran]

Since you inserted your image before your Grid, you need to give the <Image> a width and height. You can just copy the properties of your other background image into the new one. It just tells the image to match the height and width of the canvas:

Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}"

You could also just put the Image inside of your Grid (making sure you Grid.ColumnSpan and Grid.RowSpan across all your rows and columns).

 

If it still doesn't work, then you would really need to see what the TextBlock is trying to display. Put some font properties to the text and display it in front of everything to see if the URL that it builds is correctly pointing to the right location.

[Krakerman]

I kinda get what your saying but where again is the above code for the height and width going? I see that code in the:

<Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">

I see within LB ui the backgrounds are showing up but when I launch the game it is black. So I think I am little confused to where you say to put:

Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}"

This at.

Edited November 8, 2019 by Krakerman

[faeran]

inside the image, like this:

<Image Source="{Binding Text, ElementName=GameBackgrounds}" RenderOptions.BitmapScalingMode="HighQuality" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" />   

 

There's really only 2 parts to this code. You have the TextBlock, which just puts together a block of code based on your conditions. In this case, we are telling it to create a file path straight to a png image (make sure all your images are png). Then we take that file path and put it into the Source of the Image. It's the Image that gets displayed on the screen, you want to make sure you put the image in the place that you want on the screen, in your case, you want it to fill the entire background.

[faeran]

I had to make it to my computer and test it before commenting, just to make sure I wasn't missing anything.

I took the code and inputted it into one of my themes. I made the text visible (and displayed it in the top left of the screen) to see if it was putting the right bindings, and creating the right file path to the images. You can see in the video below that it was generating the correct platform, and switching to the correct game, as I switched games. I pulled a random picture of a lady bug and Called it Lady Bug.png. You can see that it appears when I switch to the game called Lady Bug.

At least now you should know that it's possible.

[faeran]

30 minutes ago, Krakerman said:

Well need to see exactly in my code where you insert it. I didn't think it was not possible just think I am not putting it in correctly in my code that I posted.

If you don't mind just post a copy of my code with the correct placement and I will try it and see if it works.

So I looked at the code you posted. If that was the code for you entire view, then the reason you are seeing a black screen is because there's no coverflow menu wheel, or menu index in your code, so you have no way of changing games. Try this code instead. It's the default theme's game wheel code. I've added the dynamic background code, and your grid that you made.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:transitions="clr-namespace:Unbroken.LaunchBox.Windows.Transitions;assembly=Unbroken.LaunchBox.Windows"
             xmlns:coverFlow="clr-namespace:Unbroken.LaunchBox.Windows.Controls.CoverFlow;assembly=Unbroken.LaunchBox.Windows"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:cal="http://www.caliburnproject.org"
             mc:Ignorable="d"
             d:DesignHeight="562"
             d:DesignWidth="1000"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             FocusVisualStyle="{x:Null}"
             BorderThickness="0"
             Margin="0"
             Padding="0"
             Background="#000">
    <UserControl.Resources>
        <Style x:Key="HorizontalListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="Padding" Value="0" />
            <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="BorderThickness" Value="1" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1"
						Padding="0" SnapsToDevicePixels="True">
                            <ContentPresenter HorizontalAlignment="Center"
                            VerticalAlignment="Stretch"
                            Content="{TemplateBinding Content}"
                            ContentStringFormat="{TemplateBinding ContentStringFormat}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            SnapsToDevicePixels="True" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Bd" Property="Background" Value="#5F3399FF" />
                                <Setter TargetName="Bd" Property="BorderBrush" Value="#5F3399FF" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="False" />
                                    <Condition Property="IsSelected" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Bd" Property="Background" Value="#FF3399FF" />
                                <Setter TargetName="Bd" Property="BorderBrush" Value="#FF3399FF" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="True" />
                                    <Condition Property="IsSelected" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Bd" Property="Background" Value="#FF3399FF" />
                                <Setter TargetName="Bd" Property="BorderBrush" Value="#FF3399FF" />
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Bd" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="HorizontalListBoxStyle" TargetType="ListBox">
            <Setter Property="ItemContainerStyle" Value="{DynamicResource HorizontalListBoxItemStyle}"></Setter>
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="FontFamily" Value="Calibri" />
            <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}" />
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True" HorizontalAlignment="Center">
                            <VirtualizingStackPanel.Background>
                                <SolidColorBrush Color="Black" Opacity="0.5" />
                            </VirtualizingStackPanel.Background>
                        </VirtualizingStackPanel>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Canvas Name="Canvas">

        <TextBlock x:Name="GameBackgrounds" Foreground="White" FontFamily="Arial" FontSize="25">
            <TextBlock.Text>
                <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/Unified Redux/Images/GameBackgrounds/{0}/{1}.png">
                    <Binding Path="ActiveGame.Platform" />
                    <Binding Path="ActiveGame.Title" />
                </MultiBinding>
            </TextBlock.Text>
        </TextBlock>
        <Image Source="{Binding Text, ElementName=GameBackgrounds}" RenderOptions.BitmapScalingMode="HighQuality" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" />


        <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">
            <Grid.RowDefinitions>
                <RowDefinition Height="10*" />
                <RowDefinition Height="2*" />
                <RowDefinition Height="18*" />
                <RowDefinition Height="10*" />
                <RowDefinition Height="18*" />
                <RowDefinition Height="2*" />
                <RowDefinition Height="25*" />
                <RowDefinition Height="15*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="15*" />
                <ColumnDefinition Width="20*" />
                <ColumnDefinition Width="30*" />
                <ColumnDefinition Width="20*" />
                <ColumnDefinition Width="15*" />
            </Grid.ColumnDefinitions>

            <coverFlow:FlowControl Grid.Column="3" Grid.ColumnSpan="2" Grid.RowSpan="8" x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CoverFactory="{Binding CoverFactory}" ImageType="Clear Logos"
                CurveAmount="4.5" CameraZPosition="3.0" VisibleCount="14" PageSize="6" Spacing="1.0" ItemZPosition="1.0" SelectedItemZPosition="2.0" />

            <Grid Grid.Row="8" Grid.Column="0" Grid.ColumnSpan="5" Panel.ZIndex="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="94*" />
                        <RowDefinition Height="3*" />
                        <RowDefinition Height="3*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{Binding LoadingWidth}" />
                        <ColumnDefinition Width="{Binding LoadingEmptyWidth}" />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Row="0" Grid.RowSpan="2" Background="#880094FF" />
                </Grid>
            </Grid>



        <ListBox Name="Index" Style="{DynamicResource HorizontalListBoxStyle}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" Visibility="{Binding IndexVisibility}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseDoubleClick">
                    <cal:ActionMessage MethodName="OnEnter" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </ListBox>
	</Canvas>
</UserControl>

 

[Krakerman]

No the code I posted is for my default startup theme, but I do need it for just the background view within coverflow as well.

Edited November 9, 2019 by Krakerman