XAML Tips and Tricks

[eatkinola]

9 hours ago, SNAK3ATER said:

Currently there isn't a way to control when do you want the Background View & ImageObjectVideo to activate

Tried the following ... had some initial success but nothing that really solves the problem:

    <Storyboard x:Key="09WheelOP2Plat_SBX">
        <!-- WORKS FOR TWO SELECTIONS, THEN STOPS WORKING -->
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BGVID">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:6"   Value="{x:Static Visibility.Visible}"/>
        </ObjectAnimationUsingKeyFrames>
        <!-- DOES NOT WORK THROWS AN EXCEPTION
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(transitions:TransitionPresenter.Content)" Storyboard.TargetName="BGVID">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Null}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:6"   Value="{Binding BackgroundView}"/>
        </ObjectAnimationUsingKeyFrames>
        -->
    </Storyboard>

Perhaps if we were able to interact with the Transitions object, e.g., set a delay on the transition?  The transitions class is in the LB library, and I'm not sure Properties etc. are accessible.

 

[SNAK3ATER]

1 hour ago, eatkinola said:

Tried the following ... had some initial success but nothing that really solves the problem:

    <Storyboard x:Key="09WheelOP2Plat_SBX">
        <!-- WORKS FOR TWO SELECTIONS, THEN STOPS WORKING -->
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BGVID">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:6"   Value="{x:Static Visibility.Visible}"/>
        </ObjectAnimationUsingKeyFrames>
        <!-- DOES NOT WORK THROWS AN EXCEPTION
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(transitions:TransitionPresenter.Content)" Storyboard.TargetName="BGVID">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Null}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:6"   Value="{Binding BackgroundView}"/>
        </ObjectAnimationUsingKeyFrames>
        -->
    </Storyboard>

Perhaps if we were able to interact with the Transitions object, e.g., set a delay on the transition?  The transitions class is in the LB library, and I'm not sure Properties etc. are accessible.

 

Thanks for trying it out @eatkinola and you're right I believe that the limitations come from Big Box so perhaps @Jason Carr can help us out on this one.

I'm planning on creating a new theme once i'm done with updating RetrAO Cafe but since the theme relies heavily on media playback controls (i.e. Delaying the playback of Background View video) i'll have to wait for a possible fix first before I lay the grounds for the new theme

[shinra358]

I've asked and have been waiting for this for a loooooong time

For bg vids and for the little preview vids.

 

Instant clearing of everything that is involved with the game that you were on as soon as you switch to another game as well.

Edited May 6, 2017 by shinra358

[eatkinola]

@keltoigael and @SNAK3ATER: So I've worked out that custom control to loop through a collection of videos. It works well in the theme view I'm developing (tested using VLC), but consider this a beta. Please let me know how it works for you, and I can update with your suggestions. Crossfading is not implemented (not sure it's needed), but I could work on that as it'd be a nice feature.  To test it:

1. Place the attached dll in the Metadata subfolder of Launchbox.

2. Add the following code to your XAML page:

<!-- this goes in the UserControl tag at top of the view's XAML -->
xmlns:aoc="clr-namespace:Ao.Bigbox.Controls;assembly=Ao.Bigbox"

<!-- this goes wherever you want to place the video -->
<!-- Folder = directory containing the videos you want to loop, will be shuffled -->
<!-- IsMuted = use to mute videos -->
<aoc:AoMediaElement Folder="pack://siteoforigin:,,,/Videos/Platforms/" IsMuted="true" />

P.s. Wondering if we should have a separate upload section for plugin libraries @Jason Carr

Ao.Bigbox.dll

[LogicalEgo]

11 hours ago, eatkinola said:

@keltoigael and @SNAK3ATER: So I've worked out that custom control to loop through a collection of videos. It works well in the theme view I'm developing (tested using VLC), but consider this a beta. Please let me know how it works for you, and I can update with your suggestions. Crossfading is not implemented (not sure it's needed), but I could work on that as it'd be a nice feature.  To test it:

1. Place the attached dll in the Metadata subfolder of Launchbox.

2. Add the following code to your XAML page:

<!-- this goes in the UserControl tag at top of the view's XAML -->
xmlns:aoc="clr-namespace:Ao.Bigbox.Controls;assembly=Ao.Bigbox"

<!-- this goes wherever you want to place the video -->
<!-- Folder = directory containing the videos you want to loop, will be shuffled -->
<!-- IsMuted = use to mute videos -->
<aoc:AoMediaElement Folder="pack://siteoforigin:,,,/Videos/Platforms/" IsMuted="true" />

P.s. Wondering if we should have a separate upload section for plugin libraries @Jason Carr

Ao.Bigbox.dll

This works beautifully! Fantastic work @eatkinola. I will be adding it into the CityHunter code and releasing a new version and revamping all of my videos today. @Jason Carr the feature you wanted now works. @CriticalCid check this out for CriticalZone. 

[shinra358]

can this play all your vids from the theme folder instead of the main exe folder?

[LogicalEgo]

Just now, shinra358 said:

can this play all your vids from the theme folder instead of the main exe folder?

Yes, from the theme folder or really any path you set. By default I will setting it to the CityHunter background video directory. 

[shinra358]

@eatkinola: What happens if you want some platforms to have images but only want a few to have vids?

Also can you make it so that you can view vids from the theme folder with vids being separated by respective folders so that a folder of a particular system can randomize what's in its folder only when its platform is highlighted?

 

I input the dll in the meta folder from the xaml posting. Put the one line of code at the top. And replaced the current vid line with this vid line but it just gives me a black screen for the background. What am I doing wrong and what view should a be in? Currently trying to do it from PlatformWheel1FiltersView xaml. Or should I just wait for the finalized version when it is uploaded to the plugin thread? I do have 2 non-video files in that folder though. Could that be a problem?

Edited May 10, 2017 by shinra358

[Jason Carr]

Thank you so much for that @eatkinola.

There is actually a plugins section over there already, so go ahead and upload plugins there. We might separate it out a bit yet for subfolders and such, but I can move things around as needed when we do.

[eatkinola]

41 minutes ago, Jason Carr said:

There is actually a plugins section over there already

Thanks, Jason -- I would've probably noticed that if caffeinated enough at the time. I really appreciate you pointing it out. Thanks again for providing more development options with the plugin system, and also easier deployment of custom dlls. I continue to be amazed at your rapid development cycle; strong work.

[Jason Carr]

39 minutes ago, eatkinola said:

Thanks, Jason -- I would've probably noticed that if caffeinated enough at the time. I really appreciate you pointing it out. Thanks again for providing more development options with the plugin system, and also easier deployment of custom dlls. I continue to be amazed at your rapid development cycle; strong work.

Thank you so much @eatkinola. I'm really excited to have all you guys help here now. Lol.

[CriticalCid]

Hey @eatkinola that’s a great plug-in that you have made. Great job!

I would really like to add it to CriticalZone but for what I have planned for CriticalZone 2.0 I would need support for relative paths and a property to stretch the video for filling the whole screen.

My plan is that the user can set up individual background videos for each filter (platforms, playlists, etc.) and I actually intend to use your workaround for initializing the correct folder paths based on the currently active filter. Also when the folder path doesn’t exist it should be possible to set a default folder path as fallback value which is used instead.

For example the XAML code for this could look like this:

<Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">
	<TextBlock x:Name="BackgroundVideo" Visibility="Collapsed"
		Text="{Binding Path=FilterTitle, StringFormat='pack://siteoforigin:,,,/Themes/CriticalZone/Videos/Background/{0}/'}" />
	<aoc:AoMediaElement Folder="{Binding Text, ElementName=BackgroundVideo, FallbackValue='pack://siteoforigin:,,,/Themes/CriticalZone/Videos/Background/Default/'}" StretchVideo="true" IsMuted="true" />
</Grid>

I would really appreciate it if you could look into that

[eatkinola]

4 hours ago, shinra358 said:

I input the dll in the meta folder from the xaml posting. Put the one line of code at the top. And replaced the current vid line with this vid line but it just gives me a black screen for the background. What am I doing wrong and what view should a be in? Currently trying to do it from PlatformWheel1FiltersView xaml. Or should I just wait for the finalized version when it is uploaded to the plugin thread? I do have 2 non-video files in that folder though. Could that be a problem?

What theme are you modifying? The two non-video files shouldn't matter as the control just grabs MP4, AVI, and WMV files from the directory. The control is definitely beta and has some bugs: I'll work on fixing those and try to incorporate the suggestions I've received so far.

[shinra358]

Modifying a version of the default theme (version before spacing options were added to the wheel. And this is because after that update, it was impossible to get my theme wheel how I wanted it because the new wheel options didn't work like I was thinking they would for my particular vision).

 

Thanks you, I'll await your additions

[eatkinola]

1 hour ago, CriticalCid said:

I would need support for relative paths

Would you please provide an example of this?

1 hour ago, CriticalCid said:

property to stretch the video for filling the whole screen

I'll look into this. Currently, how do you stretch the video to fill the screen?

1 hour ago, CriticalCid said:

My plan is that the user can set up individual background videos for each filter (platforms, playlists, etc.) and I actually intend to use your workaround for initializing the correct folder paths based on the currently active filter. Also when the folder path doesn’t exist it should be possible to set a default folder path as fallback value which is used instead.

That's a great idea. I'm trying to use a similar approach to play game videos for the selected platform, on one of my platform views. I have some initial success, but I need to somehow add an event handler to change the Folder property when ActivePlatform.Name changes. Haven't yet figured out that one.

Edited May 11, 2017 by eatkinola

[CriticalCid]

1 hour ago, eatkinola said:

Would you please provide an example of this?

Basically the binding with the filter variable in it. At least the BigBox error message tells me that this is a relative URI when I try to use the binding of my code example above as folder path.

Also huge thanks for looking into that. It’s really appreciated

[eatkinola]

Gotcha, that's helpful. It's the same error I've been struggling with. I'm pretty sure it has something to do with the bindings not being resolved in time, happens to me when I try to use the binding for ActivePlatform.Name to specify the Folder of video files. Hopefully I can get it fixed over the weekend.

[eatkinola]

Quick HOWTO on creating font resource libraries. This prevents user from having to install fonts separately. I'm sure there are other ways to do this, but this works for me. Before you bundle a font this way, please make sure you're not violating the font license. I only use fonts that are free to share and use in other projects. Note: you can also bundle image and resources this way if you wanted.

1. In Visual Studio 2017, create a Class Library (.NET Framework).

2. Give it a name like Ao.Bigbox.Epoch09 (whatever you want).

3. Create a subfolder in the project called Fonts (not necessary but keeps it organized). See attached screenshot.

4. Copy your font files into this Fonts folder -- just drag and drop the font files from windows file explorer directly into the Fonts folder in VS.

5. In VS, highlight these font files and make sure they are all tagged as Build Action = Resource. You can multi-select and change multiples at a time.

6. Build your library (DLL) using Release mode (debug works fine too, but just make it Release).

7. Find your DLL in the VS projects folder, e.g., D:\Users\Evan\Documents\Visual Studio 2017\Projects\Ao.Bigbox\Ao.Bigbox.Epoch09\bin\Release

8. Copy this DLL into the Plugins folder of your theme (available in LaunchBox 7.10-beta-5).

9. Reference the font resources like I did in Epoch09. Good to go! No need to have users install fonts separately, just copy your theme to LaunchBox\Themes.

NOTE: Be sure to use the proper font names in your XAML. The font files themselves can be called anything. Click on the font file in windows explorer to see what it's name really is -- this is how you must reference it within XAML. Please do checkout how I do this in Epoch09 views. Also, please note these refs don't seem to work within the Styles file, so you have to place these refs at the top of each view that uses a particular font. If you find a better way, please let me know.

Edited May 12, 2017 by eatkinola
added partial screenshot from visual studio

[eatkinola]

23 hours ago, CriticalCid said:

Basically the binding with the filter variable in it. At least the BigBox error message tells me that this is a relative URI when I try to use the binding of my code example above as folder path.

This worked for me. I'm working on a more robust and easier to use solution in the component itself (using Jason's plugin framework), but you can try this in the meantime:

<TextBlock Visibility="Collapsed" Name="FolderUri" Text="{Binding Path=ActivePlatform.Name, StringFormat='{}pack://siteoforigin:,,,/Videos/{0}/'}" />
<aoc:AoMediaElement IsMuted="true">
    <aoc:AoMediaElement.Style>
        <Style TargetType="aoc:AoMediaElement">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=ActivePlatform, Converter={StaticResource IsNullConverter}}" Value="false">
                    <Setter Property="Folder" Value="{Binding Text, ElementName=FolderUri}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </aoc:AoMediaElement.Style>
</aoc:AoMediaElement>

Not exactly sure why this works, but it has something to do with timing of when the components are loaded vs when ActivePlatform is updated. Please note I use one of my custom converters in the XAML above. To use this converter, include the following near the top of your view:

<!-- reference the converters namespace -->
xmlns:aoc="clr-namespace:Ao.Bigbox.Converters;assembly=Ao.Bigbox"

<!-- within Resources section, give the converter a name for later -->
<aoc:IsNullConverter x:Key="IsNullConverter" />

 

[Styphelus]

Finally installed Visual Studio 2015 but every time I click on a view, I get "Invalid Markup". Tried Visual Studio 2017 and same problem. What am I doing wrong?