Jump to content
LaunchBox Community Forums
igotdvds

Stretching Video to Fill Screen?

Recommended Posts

I want to fill my 4:3 screen with the game video. If I enable background videos, a 4:3 video will fill the screen. If I dont and use an "IMAGEVIDEO" object, it wont, and leaves a small black bar at the top and bottom.

Code I'm using for imagevideo window.

 <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding ImageVideoView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" />

 

Edited by igotdvds

Share this post


Link to post
Share on other sites

Hello,

I have already implemented something similar in Platform View 1 of my theme RetrAO Cafe 1.6.1 so try the code below and let me know if this works: (Tested on both Platform and game videos of different aspect ratios)

d:DesignHeight="2160" d:DesignWidth="3840" Style="{DynamicResource UserControlStyle}">
<Canvas Name="Canvas">
        <Grid Width="{Binding ElementName=Canvas, Path=ActualWidth}" Height="{Binding ElementName=Canvas, Path=ActualHeight}">
            <Grid.Background>
                <SolidColorBrush Color="Black" Opacity="{Binding BackgroundFade}" />
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
<Grid Grid.ColumnSpan="3" Grid.RowSpan="3" Panel.ZIndex="10">
<transitions:TransitionPresenter Transition="{transitions:FadeTransition}" Content="{Binding BackgroundView}" IsContentVideo="true" />

If the code above didn't work for some reason try the alternative below:

d:DesignHeight="562" d:DesignWidth="1000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
<Canvas Name="Canvas">
		<transitions:TransitionPresenter TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" />
		<Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" />

 

Sorry i'm posting through my phone but hopefully it should work.

Share this post


Link to post
Share on other sites
22 hours ago, SNAK3ATER said:

Hello,

I have already implemented something similar in Platform View 1 of my theme RetrAO Cafe 1.6.1 so try the code below and let me know if this works: (Tested on both Platform and game videos of different aspect ratios)


d:DesignHeight="2160" d:DesignWidth="3840" Style="{DynamicResource UserControlStyle}">
<Canvas Name="Canvas">
        <Grid Width="{Binding ElementName=Canvas, Path=ActualWidth}" Height="{Binding ElementName=Canvas, Path=ActualHeight}">
            <Grid.Background>
                <SolidColorBrush Color="Black" Opacity="{Binding BackgroundFade}" />
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
<Grid Grid.ColumnSpan="3" Grid.RowSpan="3" Panel.ZIndex="10">
<transitions:TransitionPresenter Transition="{transitions:FadeTransition}" Content="{Binding BackgroundView}" IsContentVideo="true" />

If the code above didn't work for some reason try the alternative below:


d:DesignHeight="562" d:DesignWidth="1000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
<Canvas Name="Canvas">
		<transitions:TransitionPresenter TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" />
		<Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" />

 

Sorry i'm posting through my phone but hopefully it should work.

Thanks Snake but both of these end in the same result. I still have black bars at top and bottom.

Share this post


Link to post
Share on other sites
3 hours ago, igotdvds said:

Thanks Snake but both of these end in the same result. I still have black bars at top and bottom.

Strange as this was tested on both 1080P and 4K resolutions and they were working perfectly fine. what resolution and aspect ratio are you using your theme for?

One thing I can try is if you send me one of your problematic views (.xaml file) and i'll try and fix the odd black borders if possible and send it back to you.

Share this post


Link to post
Share on other sites
8 minutes ago, SNAK3ATER said:

Strange as this was tested on both 1080P and 4K resolutions and they were working perfectly fine. what resolution and aspect ratio are you using your theme for?

One thing I can try is if you send me one of your problematic views (.xaml file) and i'll try and fix the odd black borders if possible and send it back to you.

I'm running 4:3 in my cabinet. Even videos that are 4:3 leave a small black border.

Screenshot:

video.png

 

Code:

<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.Wpf.Transitions;assembly=Unbroken.LaunchBox.Wpf"
             xmlns:coverFlow="clr-namespace:Unbroken.LaunchBox.Wpf.Controls.CoverFlow;assembly=Unbroken.LaunchBox.Wpf"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:cal="http://www.caliburnproject.org"
             mc:Ignorable="d"
             d:DesignHeight="2160" d:DesignWidth="3840" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
    <UserControl.Resources>
        <!-- WHEEL FADE STORYBOARD BEGIN -->
        <Storyboard x:Key="WheelFade">
            <!-- WHEEL X-AXIS MOVEMENT BEGIN -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="FlowControl">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/><!-- sets the amount of time the wheel takes to appear AND where the wheel moves to (0.2 seconds, moves to X=0) -->
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/><!-- sets the duration the wheel remains on the screen after the binding changes on the trigger textblock (remains on screen for 2 seconds) -->
                <EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="-100"/><!-- sets the amount of time the wheel takes to disappear AND where the wheel moves to (0.2 seconds, moves to X=-100) -->
            </DoubleAnimationUsingKeyFrames>
            <!-- WHEEL X-AXIS MOVEMENT END -->

            <!-- WHEEL OPACITY FADE BEGIN -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FlowControl">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/><!-- sets the amount of time the wheel takes to reach 100% opacity (0.2 seconds) -->
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/><!-- sets the duration that the wheel remains at 100% opacity after the binding changes on the trigger textblock (remains 100% opacity for 2 seconds) -->
                <EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="0"/><!-- sets the amount of time the wheel takes to reach 0% opacity (0.2 seconds) -->
            </DoubleAnimationUsingKeyFrames>
			
            <!-- WHEEL OPACITY FADE END -->
			
			           <!-- BG OPACITY FADE BEGIN -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BGMask">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/><!-- sets the amount of time the wheel takes to reach 100% opacity (0.2 seconds) -->
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/><!-- sets the duration that the wheel remains at 100% opacity after the binding changes on the trigger textblock (remains 100% opacity for 2 seconds) -->
                <EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="0"/><!-- sets the amount of time the wheel takes to reach 0% opacity (0.2 seconds) -->
            </DoubleAnimationUsingKeyFrames>
            <!-- BG OPACITY FADE END -->
			
        </Storyboard>
		
        <!-- WHEEL FADE STORYBOARD END -->
    </UserControl.Resources>
    <Canvas Name="Canvas">
	            <!-- VIDEO START -->
                <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding ImageVideoView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" />
			<!-- VIDEO END -->
						

	   <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">
	        <Grid.ColumnDefinitions>
                <ColumnDefinition Width="480*" />
                <ColumnDefinition Width="30*" />
                <ColumnDefinition Width="675*" />
                <ColumnDefinition Width="30*" />
                <ColumnDefinition Width="675*" />
                <ColumnDefinition Width="30*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30*" />
                <RowDefinition Height="90*" />
                <RowDefinition Height="465*" />
                <RowDefinition Height="465*" />
                <RowDefinition Height="30*" />
            </Grid.RowDefinitions>

            <!-- WHEEL START -->
            <coverFlow:FlowControl x:Name="FlowControl" Grid.Column="0" Grid.Row="0" Grid.RowSpan="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CoverFactory="{Binding CoverFactory}" ImageType="Clear Logo"
                CurveAmount="4.5" CameraZPosition="3.0" VisibleCount="14" PageSize="6" Spacing="1.0" ItemZPosition="1.0" SelectedItemZPosition="2.0" Panel.ZIndex="100" RenderTransformOrigin="0.5,0.5" >
                <coverFlow:FlowControl.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform X="-100"/><!-- sets the initial offset of the wheel (where you want it to appear FROM, has to match the value in the storyboard up top) -->
                    </TransformGroup>
                </coverFlow:FlowControl.RenderTransform>
                <coverFlow:FlowControl.Opacity>0</coverFlow:FlowControl.Opacity><!-- sets the initial opacity of the wheel, most likely always 0 -->
            </coverFlow:FlowControl>
            <!-- WHEEL END -->
			
			<!-- BACKGROUND MASK START -->
            <Image x:Name="BGMask" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="6" Grid.RowSpan="5" Source="pack://siteoforigin:,,,/Themes/Simplicity/Images/Test.png" Opacity="0.0" Panel.ZIndex="1"/>
			<!-- BACKGROUND MASK END -->

            <!-- WHEEL FADE TRIGGER -->
            <TextBlock x:Name="Trigger" Text="{Binding Path=SelectedGame.Title, NotifyOnTargetUpdated=True}" Visibility="Hidden" ><!-- binds to the SELECTED game name and notifies the trigger everytime it updates -->
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="Binding.TargetUpdated">
                        <!-- trigger that plays the storyboard and when it plays it, in this case everytime the SelectedGame.Title of the TextBlock changes -->
                        <BeginStoryboard Storyboard="{StaticResource WheelFade}"/>
						
                        <!-- specifies which storyboard the trigger will play -->
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>
            <!-- WHEEL FADE TRIGGER -->
			
        </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>

 

Edited by igotdvds

Share this post


Link to post
Share on other sites

Alright I just tried the code and it appears there is a limitation in Big Box when it comes to ImageVideo object. I did not experience any issue in my theme as i'm using BackgroundView object exclusively for all the views which does stretch any video to fill the screen. 

I might be wrong though but i've tried every code I know of stretching ImageVideo object videos to fill the screen but sadly was not successful with my attempts. Try PMing @Jason Carr or @CriticalCid as they are more knowledgeable than me when it comes to xaml coding

Goodluck with your attempts man and let me know if you managed to solve the ImageVideo Object issue

Share this post


Link to post
Share on other sites

Yeah, sadly there are still some video positioning issues, especially with stretching videos. It is on my shortlist but it's admittedly been a royal pain to get fixed. Still, I plan to fix the video positioning issues soon. :)

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for the replies. Ill halt my attempts until jason sorts it out.

 

It is strange how backgroundvideos do work though with the same code...

Edited by igotdvds

Share this post


Link to post
Share on other sites
On 2/21/2017 at 2:32 PM, Jason Carr said:

Yeah, sadly there are still some video positioning issues, especially with stretching videos. It is on my shortlist but it's admittedly been a royal pain to get fixed. Still, I plan to fix the video positioning issues soon. :)

@Jason Carr @igotdvds Has there been any resolution to video stretching regarding the ImageVideo object?

Specifically, I have a 5x5 Grid defined and I want to anchor a video at Column="3" and Row="3" spanning the remainder of the grid.

I want to Stretch="UniformFillAll" the video across ColumnSpan="3" and RowSpan="3" from the anchor Grid position.

Edited by throwingmuse

Share this post


Link to post
Share on other sites
On 2/17/2019 at 12:58 PM, CriticalCid said:

Yes, there was a new property added for this:


StretchVideo="true"

Sorry for the newbie question, but where is this option found. I've been looking in a bunch of xaml files and not seeing it. Sorry again and thank you. :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...