XAML Tips and Tricks

[Kondorito]

+1 to center the selection in horizontal and vertical lists/wheel

[viking]

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:

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

[wallmachine]

@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 April 13, 2018 by wallmachine

[viking]

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>

 

[shinra358]

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:

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

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 April 13, 2018 by shinra358

[viking]

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 ...

Thx !!!!!!!

Edited April 13, 2018 by viking

[shinra358]

Ok so the pic will actually be the standing rectangle so uniformtofill stretching wont distort your image. So as i stated above, you have to specify the space to use with those 4 grid options.

 

[viking]

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 April 13, 2018 by viking

[shinra358]

Add those 4 things to the video code and put an = beside all 4 and put a numerical value for it in "" after them. Once you put a number in it, the respective area will be highlighted for you in xaml.

[viking]

Sorry @shinra358 , but I dont understand ... Could you please write a exemple ?

[shinra358]

Grid.Row="1" Grid.RowSpan="1" Grid.Column="1" Grid.ColumnSpan="1"

 

Add those to your video code and change the values of row and column from 1 to another number (not the spans).

[viking]

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.

[shinra358]

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

Edited April 13, 2018 by shinra358

[wallmachine]

Hey @CriticalCid could you do something like this in your next theme?

 

 

[CriticalCid]

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.

[wallmachine]

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.

This is the platform view:

Edited April 15, 2018 by wallmachine

[CriticalCid]

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!

[Grila]

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.

[Grila]

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

[wallmachine]

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 April 15, 2018 by wallmachine