XAML Tips and Tricks

[Grila]

I think you're over complicating it...let BigBox handle the data. Why would you care if everyone has the same details? But, to each his own.

[wallmachine]

9 minutes ago, Grila said:

I think you're over complicating it...let BigBox handle the data. Why would you care if everyone has the same details? But, to each his own.

Honestly i probably am, but i don't want people saying it doesn't look like the images provided, how can i get it like that... and i guess it looks nicer without having things like [] etc in it.

Edited April 15, 2018 by wallmachine

[viking]

On 13/04/2018 at 5:23 PM, shinra358 said:

(...) Let me know if that works. Sometimes trial and error have to be done

OK, always about my video alignment.
For the record, that's what I'm trying to achieve.
(screen always in 16x9 | video in any ratio)

I think I have found a good track.
Here is the code that I use and that works:

<Viewbox Grid.Column="1" Stretch="UniformToFill" ClipToBounds="True" HorizontalAlignment="Center" >
                <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" 
                StretchVideo="True"/>
            </Viewbox>

I include background video in a "ViewBox" to which I apply functions.

But there is a problem: The line of code that calls the video binds the size of the video to that of the "Canvas/Background" ! This distorts the video in 16x9.
This will be a problem for all non 16x9 videos...

How to modify this code so that the size of the video is recognized and used ? To have no distortion of the video, whatever its ratio?

I assume it is: "Content="{Binding BackgroundView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" (???)

Anyone ? @shinra358 @Grila @Jason Carr ?

Edited April 16, 2018 by viking

[Grila]

57 minutes ago, viking said:

OK, always about my video alignment.
For the record, that's what I'm trying to achieve.
(screen always in 16x9 | video in any ratio)

I think I have found a good track.
Here is the code that I use and that works:

<Viewbox Grid.Column="1" Stretch="UniformToFill" ClipToBounds="True" HorizontalAlignment="Center" >
                <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" 
                StretchVideo="True"/>
            </Viewbox>

I include background video in a "ViewBox" to which I apply functions.

But there is a problem: The line of code that calls the video binds the size of the video to that of the "Canvas/Background" ! This distorts the video in 16x9.
This will be a problem for all non 16x9 videos...

How to modify this code so that the size of the video is recognized and used ? To have no distortion of the video, whatever its ratio?

I assume it is: "Content="{Binding BackgroundView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" (???)

Anyone ? @shinra358 @Grila @Jason Carr ?

Give me a few, I have a working solution for you. I'm just taking some screenshots now to illustrate.

[Grila]

<transitions:TransitionPresenter x:Name="vidsource" Grid.ColumnSpan="2" TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="True" Visibility="hidden"/>

<Border Grid.Column="1">
  <Border.Background>
    <VisualBrush Visual="{Binding ElementName=vidsource, Path=Content}" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Center"/>
  </Border.Background>
</Border>

First, you don't want to use the BackgroundView because it stretches videos to fill, not uniformly. So in this working example, I've used the regular ImageVideoView, set it to hidden, and then projected it's contents to the background of a border. That border background visual is then set to stretch UniformToFill and I've set the alignment to Center-Center. You can change the alignment as you wish.

Here's screenshots showing a 16:9 video on the platform, and a 4:3 video in the game view. As you can see, both keep their aspect ratio, but are filled and centered to the border which is half the screen for illustration purposes.

Here's the files from the two views for you to examine...

PlatformWheel1FiltersView.xaml

WheelGamesView.xaml

[viking]

man, you are the best !
THX A LOT !!!! 

[Rincewind]

This has helped me out also, thanks so much 

[Grila]

@viking @Rincewind I just noticed my previous solution doesn't respect the transitions, so here is another way to do it that will utilize the transitions. Sorry about that.

<Grid ClipToBounds="True" Grid.Column="1">
  <transitions:TransitionPresenter x:Name="vidsource" TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="True" Visibility="Visible" Margin="-480,0,0,0" Width="{Binding ElementName=Canvas, Path=ActualWidth}" Height="{Binding ElementName=Canvas, Path=ActualHeight}"/>
</Grid>

It basically does the same thing, you just have to adjust the margin for aligning the video. So in this example, the video margin is set to center the video in the right column. To align it left, set the margin to "0,0,0,0" and to align it right set it to "-960,0,0,0"

Here are the two example files for you to examine...

PlatformWheel1FiltersView.xaml

WheelGamesView.xaml

[wallmachine]

Is it possible to have a transition effect on the following?

 <Image Source="{Binding Path=SelectedPlatform.BannerImagePath}" />

<Image Source="{Binding Path=SelectedPlatform.DeviceImagePath}" />

 

Also anyway to make text that is not uppercase, uppercase?

Typography.Capitals does not work

Edited April 18, 2018 by wallmachine

[shinra358]

Use doubleanimation for opacity to put 'fade' transition effect towards anything you want.

[Grila]

1 hour ago, wallmachine said:

Also anyway to make text that is not uppercase, uppercase?

Typography.Capitals does not work

Not without a plugin, you have to use a converter. Here's the code I use:

public class TextTransformUppercase : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null && value is string)
            {
                return ((string)value).ToUpper();
            }
            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }

 

[wallmachine]

7 hours ago, shinra358 said:

Use doubleanimation for opacity to put 'fade' transition effect towards anything you want.

I'll try this.

7 hours ago, Grila said:

Not without a plugin, you have to use a converter. Here's the code I use:

public class TextTransformUppercase : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null && value is string)
            {
                return ((string)value).ToUpper();
            }
            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }

 

No idea what to do with this...

 

This is what I've attempted.

Had a look at this https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.data.ivalueconverter and this https://msdn.microsoft.com/en-us/library/system.windows.data.ivalueconverter(v=vs.110).aspx bur really no idea what I'm doing.

[Grila]

You almost got it, you made a .NET Standard Class Library though...it needs to be a .NET Framework Class Library (I usually target 4.7 since that's what BigBox uses currently).

Include these 3 directives at the top:

using System;
using System.Globalization;
using System.Windows.Data;

Good effort...you're almost there!

 

EDIT:

I forgot to mention to add a reference to PresentationFramework.dll. That's why you're getting the error about the IValueConverter. 

Edited April 19, 2018 by Grila

[wallmachine]

13 minutes ago, Grila said:

You almost got it, you made a .NET Standard Class Library though...it needs to be a .NET Framework Class Library (I usually target 4.7 since that's what BigBox uses currently).

Include these 3 directives at the top:

using System;
using System.Globalization;
using System.Windows.Data;

 

I forgot to mention to add a reference to PresentationFramework.dll. That's why you're getting the error about the IValueConverter. 

Thanks all working now, well it was a stab in the dark on the project selection lol

[wallmachine]

@Grila I'm guessing i'll need a total new plugin for the following? i tried replacing your code with https://msdn.microsoft.com/en-us/library/system.windows.data.imultivalueconverter.aspx but it just keeps crashing bigbox any ideas? Said object[] value can't be a string.

Edited April 19, 2018 by wallmachine

[Grila]

5 hours ago, wallmachine said:

@Grila I'm guessing i'll need a total new plugin for the following? i tried replacing your code with https://msdn.microsoft.com/en-us/library/system.windows.data.imultivalueconverter.aspx but it just keeps crashing bigbox any ideas? Said object[] value can't be a string.

 

 

 

Put the converter on the elements themselves. Also, no need to put it on the date since you're showing year only. Example:

<TextBlock>
  <TextBlock.Text>
    <MultiBinding StringFormat="{}{0:yyyy}  *  {1} {2}">
      <Binding Path="ActivePlatform.ReleaseDate"/>
      <Binding Path="ActivePlatform.Cpu" Converter="{StaticResource TextTransformUppercase}"/>
      <Binding Path="ActivePlatform.Category" Converter="{StaticResource TextTransformUppercase}"/>
    </MultiBinding>
  </TextBlock.Text>
</TextBlock>

[wallmachine]

7 minutes ago, Grila said:

 

Put the converter on the elements themselves. Also, no need to put it on the date since you're showing year only. Example:

<TextBlock>
  <TextBlock.Text>
    <MultiBinding StringFormat="{}{0:yyyy}  *  {1} {2}">
      <Binding Path="ActivePlatform.ReleaseDate"/>
      <Binding Path="ActivePlatform.Cpu" Converter="{StaticResource TextTransformUppercase}"/>
      <Binding Path="ActivePlatform.Category" Converter="{StaticResource TextTransformUppercase}"/>
    </MultiBinding>
  </TextBlock.Text>
</TextBlock>

 

thanks for that its working now.

i did try this but for some reason it did not work, rebuilt the dll just then maybe because i made some changes and stuff something up. note to self don't change shit i don't know.

Edited April 19, 2018 by wallmachine

[Grila]

6 minutes ago, wallmachine said:

note to self don't change shit i don't know.

[y2guru]

I think this is great information!  i need to do something similar like pulling out individual Game Genre's if it contains multiple separated by " ; ", so I'm assuming a convertor could do this

Edited April 19, 2018 by y2guru

[y2guru]

For custom Game Clear Logos, can they be placed somewhere other than \Launchbox\Images\Platform Name\Clear Logo\   ?   For custom platform clear logos they can be placed into \LaunchBox\Themes\Your Theme\Images\Platforms\Clear Logo\,  so is there a similar trick ?

 

I'm currently overwriting the ones placed in \Launchbox\Images\Platform Name\Clear Logo\

Edited April 19, 2018 by y2guru