Jump to content
LaunchBox Community Forums

XAML Tips and Tricks


Recommended Posts

Hi guys !

Is there a way to force a {Stretch = "UniformToFill"} like fonction on video ?

I want to use PlatformVideo, with transition, in a vertical grid aera.
Based on this code line, I think (?)
 

<transitions:TransitionPresenter  TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true"/>

 

An illustration to be clearer:

video_centred.thumb.jpg.d78655a781ca4dd86ebfce8a3168d9e4.jpg

Possible? Any ideas ??
I cant find anything with Google. Help please! :$

Link to comment
Share on other sites

@viking you can thank @shinra358 for the following line.

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

Edited by wallmachine
Link to comment
Share on other sites

Thx @wallmachine , but it's dont work ...:(
I have the second result of my illustration :  the video is deformed, strech.
With VLC or WMP.

To clarify the context, I do some tests. A 16x9 format cut in half. I want to place the video only on one side.
I used a grid / column system for cutting.

Here is my Platform page test :

<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:cal="http://www.caliburnproject.org"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             mc:Ignorable="d"
             d:DesignHeight="562" d:DesignWidth="1000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
	<Canvas Name="Canvas">
        <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" 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}">
            <Grid.Background>
                <SolidColorBrush Color="White" Opacity="{Binding BackgroundFade}" />
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="50*" />
            </Grid.ColumnDefinitions>

            <coverFlow:FlowControl x:Name="FlowControl" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CoverFactory="{Binding CoverFactory}" ImageType="Clear Logo"
                CurveAmount="0" CameraZPosition="3.0" VisibleCount="8" PageSize="6" Spacing="1.0" ItemZPosition="1.0" SelectedItemZPosition="2.0" />

            <transitions:TransitionPresenter Grid.Column="1" TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Grid, Path=ActualHeight}" Width="{Binding ElementName=Grid, Path=ActualWidth}" IsContentVideo="true" />
        </Grid>
    </Canvas>
</UserControl>

 

Link to comment
Share on other sites

48 minutes ago, viking said:

Hi guys !

Is there a way to force a {Stretch = "UniformToFill"} like fonction on video ?

I want to use PlatformVideo, with transition, in a vertical grid aera.
Based on this code line, I think (?)
 


<transitions:TransitionPresenter  TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true"/>

 

An illustration to be clearer:

video_centred.thumb.jpg.d78655a781ca4dd86ebfce8a3168d9e4.jpg

Possible? Any ideas ??
I cant find anything with Google. Help please! :$

If your vid is a 16:9 vid as in the first pic, you cant make it a standing rectangle like the third pic with uniform to fill unless the vid is turned sideways or unless you make the grid exactly like the third pic and do non uniform stretching. Can you make a diagram like that but with an actual image so i can get a better idea of what you are trying to achieve?

 

If you want to do the non uniform stretching, you need to specify in the code what grids and columns the vid should occupy: grid.row, grid.rowspan, grid.column, grid.columnspan

But you cannot do this with binding the imagevideoview because it isnt exposed like the binding background view and is hardcoded to be uniform to fill. Trust me, ive asked to be able to control the stretching options for imagevideoview for years with no dice :P

But there is a backgroundview xaml that you can edit to suit whatever needs you need to adjust after switching to it to get your stretching video.

 

Edited by shinra358
  • Like 1
Link to comment
Share on other sites

Yep, sure !
In this example, The mario pict IS a platform or game video, with transition.
And this code must work with all video ratio. The screen stay fullHD, but game video ratio change frequently ...

video_test.thumb.jpg.3a72fcfd0683559b6e37fda100c3cc87.jpgThx !!!!!!!

Edited by viking
Link to comment
Share on other sites

OK, but how do I do? Sorry, I'm not very good at XAML ^^

EDIT : 
In "BackgroundView.xaml" , it's already : 

<Image Source="{Binding ImagePath}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="UniformToFill" RenderOptions.BitmapScalingMode="HighQuality" />

 

I dont know what else to do here!
It's already stretch and UniformToFill ...

Edited by viking
Link to comment
Share on other sites

About placement in the grid:
It's already like that. See my full test code. Very simple :

Spoiler

<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:cal="http://www.caliburnproject.org"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             mc:Ignorable="d"
             d:DesignHeight="562" d:DesignWidth="1000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
	<Canvas Name="Canvas">
        <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" 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}">
            <Grid.Background>
                <SolidColorBrush Color="White" Opacity="{Binding BackgroundFade}" />
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="50*" />
            </Grid.ColumnDefinitions>
// The ClearLogo Wheels in column 0 -----------------------
            <coverFlow:FlowControl x:Name="FlowControl" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CoverFactory="{Binding CoverFactory}" ImageType="Clear Logo"
                CurveAmount="0" CameraZPosition="3.0" VisibleCount="8" PageSize="6" Spacing="1.0" ItemZPosition="1.0" SelectedItemZPosition="2.0" />
// The Video in column 1 ----------------------------------
            <transitions:TransitionPresenter Grid.Column="1" TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Grid, Path=ActualHeight}" Width="{Binding ElementName=Grid, Path=ActualWidth}" IsContentVideo="true" />
// End ----------------------------------------------------
              </Grid>
    </Canvas>
</UserControl>

 

 

About the UniformToFill on video.
The problem is that the command  {Stretch="UniformToFill"}  is not compatible with this line of code for video = error in Visual Studio and BigBox.
The only available command is  {StretchVideo="True" or "False"}. The result is one or the other example that I do not want on my visual above.

Link to comment
Share on other sites

I see that I misinterpreted your pic. The 'what you want' pic is 16:9 after all, it's just that it's cut off. So what you want to do is probably go back to using imagevideoview (since what you want is not really stretching) and actually add: ClipToBounds="True" (allows the image to exceed the its bounding grid but be cut off so you wont actually be able to see it in the other grid sections). HorizontalAlignment="Left"  (so that the center of the video is on it's left side so that the image can start from that middle grid line). And VerticalAlignment="Center" (so that the image can stay centered on the top/bottom plane).

Let me know if that works. Sometimes trial and error have to be done :P

Edited by shinra358
Link to comment
Share on other sites

27 minutes ago, CriticalCid said:

I'm not sure if this is a real request for my themes or just a question how you can do that yourself?

 

You should better ask @faeran, he does great stuff like this with the TextList all the time in his CoverBox themes.

I had a friend show me how to change the colour of selected text, but are unable to make the selection stay in the middle, so i thought if you included in your theme it would get implemented into bigbox :) 

this is what im trying to achieve.

all.thumb.jpg.c8a11dd8c08f8ac765a5fc0f14e359db.jpg

This is the platform view:

image.thumb.png.dd42478d8cb17d5e73356e431742095b.png

Edited by wallmachine
  • Like 1
Link to comment
Share on other sites

Lol, I guess you misunderstand something here. It’s not like @Jason Carr comes flying to me and grants me every wish I have when I create a theme. I have to wait and constantly ask him about my requests like you guys do. For example the new StretchVideo property for the TransitionPresenter was a thing I’ve requested since at least over a year until it just got added very recently.

 

Your best bet is to do it like you just did. Show what you have in an almost finished state and point out the last missing piece you need. Sometimes that gets him motivated to add it faster ;)

 

Edit: Oh and btw., your new theme looks gorgeous!

  • Thanks 1
Link to comment
Share on other sites

It definitely requires code behind. I actually started writing a plug-in for this but was having some problems with BigBox passing the data to it. I could get it to work in a test app outside of BB, but couldn't get it to work in BB. I guess I need take another look into it.

  • Like 1
Link to comment
Share on other sites

16 minutes ago, CriticalCid said:

Edit: Oh and btw., your new theme looks gorgeous!

Chicuelo's Theme from the RetroPie community...it's very nice indeed. I was going to port this one over myself, now it looks like I can go back to being lazy :)

  • Like 1
Link to comment
Share on other sites

8 minutes ago, Grila said:

Chicuelo's Theme from the RetroPie community...it's very nice indeed. I was going to port this one over myself, now it looks like I can go back to being lazy :)

yeah he done a fantastic job... i've been in contact with him a bit very nice guy.
i'll be doing it all from scratch the biggests pain the butt is getting the info for all systems... i've got my spreadsheet with about 230 systems i'm upto S

What I'm also doing is adding the text to the image to so its static and everyone has the same details. unless some other way? share my data files.

Edited by wallmachine
Link to comment
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
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
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...