Stretching Video to Fill Screen?

igotdvds · February 12, 2017

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 February 12, 2017 by igotdvds

igotdvds · February 20, 2017

Bumping as this cant be that difficult for a smart person!

SNAK3ATER · February 20, 2017

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.

igotdvds · February 21, 2017

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.

SNAK3ATER · February 21, 2017

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.

igotdvds · February 21, 2017

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:

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 February 21, 2017 by igotdvds

SNAK3ATER · February 21, 2017

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

Jason Carr · February 21, 2017

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.

igotdvds · February 21, 2017

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 February 21, 2017 by igotdvds

throwingmuse · February 17, 2019

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 February 17, 2019 by throwingmuse

CriticalCid · February 17, 2019

Yes, there was a new property added for this:

StretchVideo="true"

Capa · March 28, 2019

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.

Stretching Video to Fill Screen?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation