Background Help

[Jwach26]

I'm working on a triple-monitor theme. I'm running into a roadblock with the background presenter. I have a main canvas that is subdivided into 3 canvases (one for each screen). Only one background will display. I assume it has to do with attempting to bind the Background selector and view multiple times. Any advice would be appreciated.

            <Grid Grid.Column="0">
                <Canvas Name="Screen0">
                    <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Screen0, Path=ActualHeight}" Width="{Binding ElementName=Screen0, Path=ActualWidth}" IsContentVideo="true" />
                    <Grid Height="{Binding ElementName=Screen0, Path=ActualHeight}" Width="{Binding ElementName=Screen0, Path=ActualWidth}">
                        <Grid.Background>
                            <SolidColorBrush Color="Black" Opacity="{Binding BackgroundFade}" />
                        </Grid.Background>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30*" />
                            <ColumnDefinition Width="10*" />
                            <ColumnDefinition Width="50*" />
                            <ColumnDefinition Width="10*" />
                        </Grid.ColumnDefinitions>
                        <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" 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.Column="2">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="10*" />
                                <RowDefinition Height="50*" />
                                <RowDefinition Height="10*" />
                            </Grid.RowDefinitions>
                            <transitions:TransitionPresenter Grid.Row="1" TransitionSelector="{Binding ImageTransitionSelector}" Content="{Binding ImageView}" />
                        </Grid>
                    </Grid>
                </Canvas>
            </Grid>
            <Grid Grid.Column="1">
                <Canvas Name="Screen1">
                    <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Screen1, Path=ActualHeight}" Width="{Binding ElementName=Screen1, Path=ActualWidth}" IsContentVideo="true" />
                    <Grid Height="{Binding ElementName=Screen1, Path=ActualHeight}" Width="{Binding ElementName=Screen1, Path=ActualWidth}">
                        <Grid.Background>
                            <SolidColorBrush Color="Black" Opacity="{Binding BackgroundFade}" />
                        </Grid.Background>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20*" />
                            <ColumnDefinition Width="80*" />
                            <ColumnDefinition Width="20*" />
                        </Grid.ColumnDefinitions>
                        <Grid Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="10*" />
                                <RowDefinition Height="50*" />
                                <RowDefinition Height="10*" />
                            </Grid.RowDefinitions>
                            <transitions:TransitionPresenter Grid.Row="1"  TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true" />
                        </Grid>
                    </Grid>
                </Canvas>
            </Grid>
            <Grid Grid.Column="2">
                <Canvas Name="Screen2">
                    <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Screen2, Path=ActualHeight}" Width="{Binding ElementName=Screen2, Path=ActualWidth}" IsContentVideo="true" />
                    <Grid Height="{Binding ElementName=Screen2, Path=ActualHeight}" Width="{Binding ElementName=Screen2, Path=ActualWidth}">
                        <Grid.Background>
                            <SolidColorBrush Color="Black" Opacity="{Binding BackgroundFade}" />
                        </Grid.Background>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20*" />
                            <ColumnDefinition Width="80*" />
                            <ColumnDefinition Width="20*" />
                        </Grid.ColumnDefinitions>
                        <Grid Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="10*" />
                                <RowDefinition Height="50*" />
                                <RowDefinition Height="10*" />
                            </Grid.RowDefinitions>
                            <transitions:TransitionPresenter Grid.Row="1" TransitionSelector="{Binding GameDetailsTransitionSelector}" Content="{Binding GameDetailsView}" />
                        </Grid>
                    </Grid>
                </Canvas>
            </Grid>

 

[C-Beats]

Big Box only supports two monitors. The Main Window sits on one monitor, and the marquee view sits on another. There is no way to render the Main View across 3 monitors the way you're asking short of duplicating your display on the other monitors.

[Jwach26]

This isn't a problem with multiple monitors. In a surround setup the application only "sees" a single 48:9 display. Like I said everything works great except for the background presenter. I assume this won't actually be solvable directly in the XAML. I'll probably have to write a plugin to handle this directly but I was hoping to avoid that. 

[C-Beats]

The things you're using are all properties so I'm not sure why you'd be having the issue. First step would be to vet the Grid column definitions and make sure they are correct (They aren't shown in your code so unsure what you have them set up as right now). If those are correct you could try to use a ContentPresenter and bind Content to the BackgroundView instead of using a TransitionPresenter and see if that does or does not show what you are wanting. Can help narrow down the cause because I don't see anything immediately wrong in your XAML file.

[Jwach26]

I'll give that a shot and update when I get a chance. Thanks for the feedback. FWIW it looks really good. I bought Launchbox for my arcade but loved it so much I'm trying to get it running on my main rig.

[Jwach26]

Same issue. I just get the single background.

WheelGamesView.xaml

[C-Beats]

Seems the issue is related to how WPF uses ContentPresenters. Can you replace the your file with the one attached and let me know if you see backgrounds on all 3 screens now?

WheelGamesView.xaml

[Jwach26]

Nope. That straight up broke it lol. The wheel displays and that's it. VS giving me "XDG0036    The "Key" attribute can only be used on an element that is contained in "IDictionary"

[C-Beats]

8 minutes ago, Jwach26 said:

Nope. That straight up broke it lol. The wheel displays and that's it. VS giving me "XDG0036    The "Key" attribute can only be used on an element that is contained in "IDictionary"

Oops, copy/paste error on my part. Can you remove the "x:Key" property from the FlowImages in your view. Should resolve that error for you

[Jwach26]

Nope. It still doesn't like that. The second I add that it hangs. Almost like it's stuck trying to fetch an image. I can't even ESC out and have to kill it with Task Manager.

[faeran]

Just trying to catch up with this thread, and not sure if it's been mentioned, but could you just use the BackgroundImagePath binding?

<Image Source="{Binding Path=ActivePlatform.BackgroundImagePath}" />

You can find a ton of Image bindings in the Documentation.pdf file inside of the LaunchBox\Themes folder.

[C-Beats]

13 minutes ago, Jwach26 said:

Nope. It still doesn't like that. The second I add that it hangs. Almost like it's stuck trying to fetch an image. I can't even ESC out and have to kill it with Task Manager.

Hmm weird. I set mine up with two monitor and it worked as expected. When I get time I'll try again and make sure I didn't flub anything more up converting it back to 3 monitor (I only have two)

[Jwach26]

Now I feel dumb. Simplest answer is the best.

                    <Canvas.Background>
                        <ImageBrush ImageSource="{Binding Path=ActiveGame.BackgroundImagePath}" Stretch="Fill"/>
                    </Canvas.Background>

Thanks for the help guys.

Edited January 26, 2022 by Jwach26