XAML Tips and Tricks

[Hexxxer]

I have used this method on a theme I've been working on for a while. I only got through three system themes before real life got to busy

[Porl Hendy]

Since @Grila worked out a way to fade out the wheel is there a way of having images behind the wheel? On the attached screenshot would it be possible for the wheel to be on a solid colour background then when it fades off it reveals the box art or cartridge art? 

 

Edited February 26, 2017 by Porl Hendy

[Grila]

Of course, utilize z-index and place the image under the wheel.

[Porl Hendy]

7 minutes ago, Grila said:

Of course, utilize z-index and place the image under the wheel.

I have no idea how to create a theme... I was just thinking it would be nice to be implemented into a theme and if it was possible. Thanks for quick reply

[Hexxxer]

On 2/22/2017 at 6:18 PM, Grila said:

Be sure to add TargetNullValue={x:Null} to the binding also to avoid any problems if people have a system that you don't have a pointer for.

Just out of curiosity, I have been messing around with this and wondering if it was possible to sub in a different image if one did not exist. I can't seem to find a clear way of doing this yet.

Does anyone have any suggestions? 

[eatkinola]

On ‎3‎/‎8‎/‎2017 at 5:12 PM, Hexxxer said:

Does anyone have any suggestions?

I'm not familiar with the TargetNullValue approach but I've another idea -- using Panel.ZIndex.

1. Display the default image using Panel.ZIndex = 5 (for example)

2. Display the image you're afraid might not exist using Panel.ZIndex = 6 (something greater than the default image)

If #2 does not exist, you should be able to see image #1 (default); otherwise image #2 will simply cover up #1 (you'd just see image #2)

Give it a try to see if it works for your case.

[Jegeroel]

I've been looking into using Border to draw boxes. When using BorderThickness it seems like the values are in points/pixels, and without a resolution to "anchor" these to a 4 pixel Border will be 4 pixels on 1080p, 1440p, 2160p displays, thus giving you a much thinner line on a 2160p display compared to a 1080p display. Are there any ways to get the same relative size. ie. the 4 pixel border would be 8 pixels on a 2160p display?

From what i understand, the d:DesignHeight/DesignWidth is only for the designer, VisualStudio, and not affecting the runtime.

I assume this behaviour is the same for many functions in XAML.

[Grila]

1 hour ago, Jegeroel said:

I've been looking into using Border to draw boxes. When using BorderThickness it seems like the values are in points/pixels, and without a resolution to "anchor" these to a 4 pixel Border will be 4 pixels on 1080p, 1440p, 2160p displays, thus giving you a much thinner line on a 2160p display compared to a 1080p display. Are there any ways to get the same relative size. ie. the 4 pixel border would be 8 pixels on a 2160p display?

From what i understand, the d:DesignHeight/DesignWidth is only for the designer, VisualStudio, and not affecting the runtime.

I assume this behaviour is the same for many functions in XAML.

There is no automatic way, that I am aware of, to achieve this but I did come up with a kind of hacky solution. It checks the Actual Width of the Canvas and adjusts the border size according to that value. Below is the code and some screen grabs to prove it indeed works.

<Border Grid.Column="2" Grid.Row="3" BorderBrush="Red" Background="White" UseLayoutRounding="True" SnapsToDevicePixels="True">
                <Border.Style>
                    <Style TargetType="Border">
                        <Setter Property="BorderThickness" Value="6" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=Canvas, Path=ActualWidth}" Value="1280">
                                <Setter Property="BorderThickness" Value="2" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding ElementName=Canvas, Path=ActualWidth}" Value="1366">
                                <Setter Property="BorderThickness" Value="4" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding ElementName=Canvas, Path=ActualWidth}" Value="1920">
                                <Setter Property="BorderThickness" Value="6" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
            </Border>

The 1280x720 screenshot in PhotoShop showing the thickness of 2:

The 1366x768 screenshot in PhotoShop showing the thickness of 4:

And the 1920x1080 showing 6:

The only downside is that you'll have to hardcode the different resolutions in, but it shouldn't be that bad if you stick to the most common ones.

[Jegeroel]

@Grila Thanks. I'll do some tests and see how it works.

I've looked into doing this 2 ways. Using code (like Border), and using bitmap graphics. Each have their own advantages and disadvantages i guess.

Do you know if it is possible to set the Opacity for the Border fill/area separate from the outline? I was thinking about having a solid color outline with a semitransparent fill/area. One way is to draw the box twice. Once with a semitransparent color (Background=#7b7b7b", Opacity="0.5"), and then again with a solid outline and transparent area (Background="Transparent", BorderBrush="#ffffff"), but it will be 2 boxes. Not sure if it will have much impact on the performance as it's only does this once when opening the view, but it would be less messy code doing it in one line.

 

Edited March 28, 2017 by Jegeroel

[Grila]

3 minutes ago, Jegeroel said:

@Grila Thanks. I'll do some tests and see how it works.

I've looked into doing this 2 ways. Using code (like Border), and using bitmap graphics. Each have their own advantages and disadvantages i guess.

Do you know if it is possible to set the Opacity for the Border fill/area separate from the outline? I was thinking about having a solid color outline with a semitransparent fill/area. One way is to draw the box twice. Once with a semitransparent color (Background=#7b7b7b", Opacity="0.5"), and then again with a solid outline and transparent area (Background="Transparent", BorderBrush="#ffffff"), but it will be 2 boxes. Not sure if it will have much impact on the performance as it's only drawn once, but it would be less messy code doing it in one line.

 

It is indeed possible, but you have to use the hex codes for your colors with the opacity as part of the hex. Here is a list i keep of the different values...

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

So for a white background at 50% opacity it would be Background="#80FFFFFF"

[Grila]

Here's the example of my previous border...

<Border Grid.Column="2" Grid.Row="3" BorderBrush="Red" Background="#1AFFFFFF" UseLayoutRounding="True" SnapsToDevicePixels="True"/>

The border will be Red and opaque and the background will be white at 10%. You can do this with any color on any element.

[Jegeroel]

Oh, i used HTML-style color code, didn't know you could add alpha transparency by adding 2 digits. Learn something every day i guess

Thanks again!

[spektor56]

Thought I'd post this here...

I just whipped up a weather control really quickly to show what you can do with custom user controls in bigbox (of course you can add animations and make it look nicer than it is).  It's in the top right corner and alternates between the current conditions and current temperature:

Here's a sample of the comix theme using the control in the WheelGamesView:

https://drive.google.com/open?id=0B6VxVfJp98SlZTRqa2w5eE5sZVE

Here's the source code for the weather control in c# (not a completely finished control, just sample):

https://github.com/spektor56/BigBoxControlLibrary

[Jason Carr]

@spektor56 Thank you so much for demonstrating that. That's been available for ages but of course I haven't ever demoed it or provided any proper support for it. I'm hoping to add an easy way to get at the data from a plugin like that in the future.

[spektor56]

3 hours ago, Jason Carr said:

@spektor56 Thank you so much for demonstrating that. That's been available for ages but of course I haven't ever demoed it or provided any proper support for it. I'm hoping to add an easy way to get at the data from a plugin like that in the future.

Yea I made a comment on here long time ago about it working but I haven't seen anyone doing anything custom in their themes.  You should separate all your controls to a separate solution so people can fiddle with them and add their own (The keyboard, search bar, coverflow, etc).  Would be nice to get a community sourced library of controls to use in bigbox.  I asked about the databinding a few months back too so that people can make a grid control like steam / kodi has.  I'm very lazy, I just ask for features i would use if i wasn't lazy in hopes there is someone who isn't lazy that will do it instead haha.

[Maddoc1007]

Yes would be great to have also binding to custom named folders as well for the likes of gifs etc as there is for banners logos fanart etc

[Kriven]

Is there no way to reference the currently selected Playlist the way there is for Platforms and Games? (ActivePlatform) (ActivePlaylist)?

[SNAK3ATER]

I'm currently working on implementing some features into a theme and i'm wondering if it is possible to insert sound effects into the wheel views? I'm already aware that we can insert pictures (png, jpeg), Gifs and even videos as overlays/background but what about sounds (.mp3 and .wav files)?

 

I'd appreciate it if someone can shed some light on this 

[eatkinola]

@SNAK3ATER: Interesting thought. Never done it, just thinking ... When do you want the sound effects triggered? For example, if on wheel movement then could set a trigger for SelectedGame or SelectedPlatform, then play a sound. Should work in theory, but not sure if that's what you want to do.

Wouldn't this conflict with the sounds that already play when manipulating the wheel?

Another and cleaner approach is you could make a custom sound effects pack. Didn't @Grila do this for his Switch theme?

[SNAK3ATER]

6 hours ago, eatkinola said:

@SNAK3ATER: Interesting thought. Never done it, just thinking ... When do you want the sound effects triggered? For example, if on wheel movement then could set a trigger for SelectedGame or SelectedPlatform, then play a sound. Should work in theory, but not sure if that's what you want to do.

Wouldn't this conflict with the sounds that already play when manipulating the wheel?

Another and cleaner approach is you could make a custom sound effects pack. Didn't @Grila do this for his Switch theme?

Hello @eatkinola brotherman, 

What I meant was playing a sound effect in a wheel view tied to a specific event (i.e. In one of the new views that I will introduce in RetrAO Cafe 1.7 I wanted to play a "inserting a VHS into the VCR"  sound effect before the start of every background video to stimulate the retro feeling of the VHS/CRT old days. 

With the help of @Grila in directing me to the right MediaElement & MediaTimeline wps codes I managed to create the sound effect in my view but unfortunately the background view playback could not be delayed to a specific timeframe due to BigBox limitations (maybe @Jason Carr can assist us in implementing this feature)

Basically to simplify the idea of my view let's assume that on the first 10 seconds I wanted to implement the sound effect to be played before the start of the platform/game background view (video):

1- From 0:00 to 3:00 seconds the user chooses the game via the wheel code

2- From the 3:02 to 7:00 seconds the sound effect activates

3- From 7:02 seconds and onward the platform/game video plays

Now I managed to introduce a code that can help us control the media playback and duration for any media files but unfortunately the Background View will always start at the 0:00 mark. Here is the code for the community to use:

Spoiler

 

<MediaElement x:Name="GameVideo" Panel.ZIndex="0" /> 

<!-- SFX TRIGGER START -->
            <TextBlock x:Name="VCRSFX" Text="{Binding SelectedGame.Title, NotifyOnTargetUpdated=True}" Visibility="Collapsed">
                    <TextBlock.Triggers>
                        <EventTrigger RoutedEvent="Binding.TargetUpdated">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <!-- The MediaTimeline has a BeginTime and Duration codes which makes the media play over a certain timeframe specified by the user.-->
                                        <MediaTimeline Source="pack://siteoforigin:,,,/Themes/RetrAO Cafe/Images/Etc/vcrsfx.mp3" Storyboard.TargetName="GameVideo" BeginTime="0:0:10.2" Duration="0:0:6" />
										
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>							
                        </EventTrigger>
                    </TextBlock.Triggers>
            </TextBlock>

 

Currently there isn't a way to control when do you want the Background View & ImageObjectVideo to activate but if someone managed to find a solution kindly share it with the rest of the community to benefit 

Edited May 6, 2017 by SNAK3ATER
Fixed the MediaElement Code