XAML Tips and Tricks

[Sithel]

Is there a way to show the games Rating Image like you can for the favorites image?

<Image Source="pack://application:,,,/Resources/BigBoxFavorite.png" RenderOptions.BitmapScalingMode="HighQuality" />

I've seen the .pdf and can add every other image but not the ratings image.

 

Thanks

[viking]

EDIT : Rewording

I try to guarantee a good viewing for  platform fullHD videos (16:9) on 4:3 screen. But I have some problems and I need your help.

This code line works well for images. This is what I want : Centered horizontally + Stretch vertically + Save proportion

HorizontalAlignment="Center" VerticalAlignment="Stretch" Stretch="UniformToFill"

BUT = This part don't work for videos. (Make a error in Visual Studio and BigBox)

Stretch="UniformToFill"

How can I make this ?? Any ideas ? Suggestion?

 

To illustrate the idea into images, I want this on 16:9 screen :And this on 4:3 screen :But today, it gives me that. And that is not good!Thanks !!!!  

Edited October 12, 2016 by viking

[Maddoc1007]

@viking try "Fill" instead of Uniformtofill

Edited October 14, 2016 by Maddoc1007

[viking]

Thx @Maddoc1007 , but it's don't work :

<transitions:TransitionPresenter TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true" HorizontalAlignment="Center" VerticalAlignment="Stretch" Stretch="Fill" />

I have a error, on all te "Stretch" fonction. Whatever I put after.

[Maddoc1007]

Have you tried it with the horizontal alignment and vertical alignment Center with no stretch

[viking]

Yes. But it's gives the third image of post above. =/ 

I want video stretch verticaly. It is essential for it to be independent of the resolution AND ratio. No zoom effect.

[Maddoc1007]

You want to keep it proportions, i think you'd probably be better off to send the xaml view you are working on to @Jason Carr and see if he can sort the aspect ratio out usually in the themes the way the video background works is that 16.9 videos stretch to the canvas on 4.3 monitors from my recollection, i would also like to know how in xaml how to have the videos do as you want and keep their aspect ratio.

[viking]

You're right, I call @Jason Carr  assistance ! 

In fact, I see two levels where to place the video. And I dont know which one would work for my request. And how make this !

#01 - background in video

<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}">

#02 - classique image/video call

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

 

[Jason Carr]

Hi guys, I don't think this one is going to be easy to solve at all, unfortunately. I think maybe we'll just need to stick to separate themes for 4:3 vs 16:9. Am I understanding properly that you want to cut off the edges of the videos @viking on 4:3?

[Maddoc1007]

Your right at the moment ive been reading up a lot on aspect ratio in xaml but all the examples are for images but not for video.  There are ways of resizing video by changing both Binding ElementName=Video but this will make the videos the size of what the person videos are, so if a persons video was 640x480 they would have a small video in the left top corner.  You could also change the size of the video to your screen resolution example Height="720" Width="1080" for someone with that screen resolution however that would only work for for people with that precise resolution, so The way @Jason Carr has it setup at the moment is the best solution possible at the moment (been trying different things with background video today).

[Maddoc1007]

@viking the 1st one is for background videos set to the canvas size ie each persons screen size when you have show background videos ticked in options, video in BigBox.  The second one is for when Background videos is not checked and shows a small screen placed on the grid in a certain column or row.

[Hexxxer]

You cant set stretch on anything but an image.

Try this:

 

HorizontalAlignment="Stretch" Width="Auto"

 

[viking]

@Jason Carr OK I understand. Yes, that's exactly it :  no deformation + fills the screen vertically + horizontally screen overflows if necessary. I would like to make a series of platform video. For my 4:3 bartop. Given the time it will take me, it's a shame to dismiss directly the 16:9 screens! 

@Maddoc1007 Yes, I made the same observation. I continued searching.

@Hexxxer Thx! I try this asap !! 

Here is a preview of what I have in mind.

Edited October 15, 2016 by viking

[viking]

Because it seems impossible to do with a video, I think I found a way. Not very elegent, but it should work.

The idea is to create the background video in 4:3 (Is the most square ratio)

HorizontalAlignment="Right" VerticalAlignment="Stretch"

 And fill the empty left space with a PNG overlay.

HorizontalAlignment="Right" VerticalAlignment="Stretch" Stretch="UniformToFill"

OK, the video will be right-aligned. This's not the most elegent way. But with this principle, there will be no deformation, either on a 4:3 16:0, 16:9 or 21:9 screen ! I have all these ratio available to test.

What do you think ?

Here's a quick test on my WIP theme. No overlay, we see the background on left, behind the video.

[Jason Carr]

Nice, great idea @viking.

[spektor56]

@Jason Carr I was just experimenting with putting custom user controls into BixBox and noticed it loads the custom control DLL from the launchbox exe folder and not from the themes folder, can this be changed?  It works, but the dll has to be in the root folder.

Have you thought about moving the user controls to a separate solution and open sourcing that portion?  Custom themers could make and share their custom controls this way.

Edited November 17, 2016 by spektor56

[Jason Carr]

Very cool @spektor56. I had plans to create documentation and code samples for how to do all that but haven't gotten around to it yet. DLL locations might be kind of difficult unfortunately due to how .NET works. The Metadata folder should work as well for the DLLs, but not the themes folders. The .config files in the root define which folders are parsed, iirc.

Unfortunately the way Big Box is built, the built-in controls could not be separated into a separate project and be usable without some major refactoring. I use Caliburn Micro for data binding and such. That said, I expect to get around those types of issues eventually with documentation and examples.

[spektor56]

Yea, we will need databinding support and also support for calling navigation methods and such in bigbox.  I'm able to reference BB / LB from the user control so you will just need some documentation on the methods we can use for data retrieval / navigation.  I just imported a simple 3D viewport control to see if BB could load it in and it worked, no interaction with BB though.

Edited November 18, 2016 by spektor56

[Jason Carr]

Makes sense. In theory with XAML's data binding you can plug in properties on a custom control using all the same data bindings that are defined in the documentation PDF for the custom themes. So I think it should be workable as-is, sans for a lack of documentation. Of course this would only let you read the data, not change it, but that's probably the main goal. Let me know what you're trying to build @spektor56 and I can provide anything specific that you need.

[skainlurmis]

Hey everybody, getting into xaml because Launchbox is so great. As I am dipping my toes into xaml, I am curious about video stuff (or really images too). Is it possible to skew images or video? ALA an angled screen and the video be proportioned as such, or is that flying too close to the sun? Thanks everyone.