Jump to content
LaunchBox Community Forums
Jason Carr

XAML Tips and Tricks

Recommended Posts

So here's a question...at the moment my platform images are replacements for the banner images. That works well enough as long as you don't change views. Is there any reason you cant have images that aren't banners...that change while scrolling through the platforms. 

Is that sort of what Shinra was asking about?

Also @eatkinola I saw you mentioning on the "Bedroom theme about converting the images into video ..I thought about this after making a few images. In your opinion ..is that a better decision than layer in images like Im talking about above? 

Edited by skainlurmis

Share this post


Link to post
Share on other sites
19 minutes ago, skainlurmis said:

Also @eatkinola I saw you mentioning on the "Bedroom theme about converting the images into video ..I thought about this after making a few images. In your opinion ..is that a better decision than layer in images like Im talking about above? 

It depends on the goals of your work. If you made videos akin to viking's set, your videos could be used in any number of themes. Your video set would itself be a theme. Not sure if that's what you really want to do, but I think it'd be cool and would reach a wide audience. Whatever you decide, I say keep it up with the retro idea -- very nice.

Share this post


Link to post
Share on other sites

hoping someone can help me out...not sure where to ask. 

I'm using a current theme to try to build my own theme. I need to move and resize the video box that displays the platform video. What file am I supposed to edit to accomplish this? I've looked through the Views and Styles folders but I have no clue. I just need to move it over a bit and make the video window a little bigger. 

Driving me crazy that I can't figure it out myself or find anything about it googling it.

Share this post


Link to post
Share on other sites
2 minutes ago, vice350z said:

I'm using a current theme to try to build my own theme. I need to move and resize the video box that displays the platform video. What file am I supposed to edit to accomplish this? I've looked through the Views and Styles folders but I have no clue. I just need to move it over a bit and make the video window a little bigger.

Should be in the corresponding view file. I recommend asking advice from the theme's author.

Share this post


Link to post
Share on other sites
On 6/21/2016 at 0:24 PM, Jason Carr said:

Hey everybody, post your XAML tips and tricks to share with other theme creators here. For starters, here's how to add an image with a relative path:

<Image Source="pack://siteoforigin:,,,/Themes/CleanHardware/img/white-corner.png" RenderOptions.BitmapScalingMode="HighQuality" />

Note that the "pack://siteoforigin:,,," is basically replaced with the LaunchBox folder path. Also note the forward slashes instead of backslashes. :)

 

On 8/1/2016 at 1:19 PM, Jason Carr said:

Hey all, I'm hoping to put out a tutorial tomorrow to wrap everything up. The latest betas include project files to open up the themes in Visual Studio and allow you to visually change them. I'm in the live development stream right now and we just added gif support. You can add animated gifs to Big Box now (or you will be able to after this new beta goes out later today). Just put this in the header UserControl tag: xmlns:gif="clr-namespace:WpfAnimatedGif;assembly=BigBox" And then, wherever you want to use a gif, create a new Image tag and add a property to it like this: gif:ImageBehavior.AnimatedSource="D:\Cat-party.gif" We're using the XamlAnimatedGif library here: https://github.com/XamlAnimatedGif/WpfAnimatedGif You can see their documentation for more details on more things you can do.

What's the variable to read the game name so that I can insert that variable as the gif so bigbox can read all gifs per game? Example: gif:ImageBehavior.AnimatedSource="pack://siteoforigin:,,,/Themes/Playstation/iGifs/%vargamename%.gif

Also, what's the variable for the appropriate paths as well? I want to to read from the location of the game and detect each system it is under.

Share this post


Link to post
Share on other sites

Hi guys!

I'm working on a theme and got into a few problems so i thought i'd just post my question here:

In my platforms view i wanted to use specific platform details, while not using the complete platform details block. In the Documentation.pdf in the Themes directory i found out you could use data binding properties for specific data, like SelectedPlatform.Cpu for that specific data string.

The ones i'm looking for are (platform bindings):

Total Games
Games Completed
Default Emulator
Most Played
 

These are listed under Options > Platform Details, but not in the Documentation.pdf. Does this mean they are not accessible as separate databindings, or just left out of the documentation?

This impedes the progress, and i would really not like to go back to the drawingboard to revise the whole theme :)

Thanks in advance.

 

 

  • Like 1

Share this post


Link to post
Share on other sites
On 1/19/2017 at 0:03 PM, Jegeroel said:

The ones i'm looking for are (platform bindings):

Total Games
Games Completed
Default Emulator
Most Played

These are listed under Options > Platform Details, but not in the Documentation.pdf. Does this mean they are not accessible as separate databindings, or just left out of the documentation?

@Jason Carr: I know these platform bindings have come up before but just wanted to double check with you. I'd really like to use them in my theme too if available. Would there be any bindings to a Filter object?

You've obviously been very busy implementing some sweet features for LB. I'm very impressed by your rapid development cycle. I realize this binding issue would be low priority. Would it be best to add a feature request for tracking? Anyway, minor issue. Thanks so much for putting together such a great piece of software!

  • Like 2

Share this post


Link to post
Share on other sites

Thank you @eatkinola; I'm sorry I haven't been more active in this thread lately guys. I will admit I've been a bit absorbed in implementing the new features that were requested in the poll.

It is true that those 4 items are probably inaccessible outside of the platform details, so I'll need to add individual properties for them. They are also potentially a cause for performance issues because the entire game set has to be parsed in order to get the information, but it doesn't seem to be a major performance issue for the platform details at this point at least.

Anyways, typically Bitbucket is the best place to request new features, but I like to give theme requests a bit higher priority than other stuff for obvious reasons, so it does feel like we need a new system for theme requests. I've added these fields to my short list though so hopefully I can get back to it soon. :)

  • Like 4

Share this post


Link to post
Share on other sites

Is there a way to determine platform name as a variable within a view? I'd like to implement something but it will change based on currently selected platform.

Share this post


Link to post
Share on other sites

I'm not in front of my computer right now but I believe it's SelectedGame.Platform for game views and SelectedPlatform.Name on platform views. It's all in the documentation, you should read it. Has all the bindings listed in it.


Sent from my iPhone using Tapatalk Pro

Share this post


Link to post
Share on other sites
Just now, Grila said:

I'm not in front of my computer right now but I believe it's SelectedGame.Platform for game views and SelectedPlatform.Name on platform views. It's all in the documentation, you should read it. Has all the bindings listed in it.


Sent from my iPhone using Tapatalk Pro

Grila...here to save me again.... Where is this wonderful documentation you speak of??

Edited by igotdvds

Share this post


Link to post
Share on other sites
54 minutes ago, igotdvds said:

 

Got it. Now, how do I stick a variable into a string?

Example: Source="pack://siteoforigin:,,,/Themes/Simplicity/Images/"{Binding Path=SelectedGame.Platform}".png" 

I'm not sure you can do it that way without some code-behind for a converter. You would have to use a string format, but the StringFormatter binding attribute will only work on strings (hence the need for a converter). I do have something that comes to mind and I'll give it a go tomorrow when I have more time. Not sure if it will work but I may be able to shoehorn something in. 

You could also use a StyleTrigger to accomplish this. Take a look at any of my themes that utilize the games star rating system and you'll see how its done. Here's an example from my ClassicMini theme...

<!-- RATING IMAGE START -->
            <Image Grid.Column="2" Grid.Row="5" RenderOptions.BitmapScalingMode="HighQuality" Panel.ZIndex="2" >
                <Image.Style>
                    <Style TargetType="Image" >
                        <Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/ClassicMiniNes/Images/Core/0.png" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="1" >
                                <Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/ClassicMiniNes/Images/Core/1.png" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="2" >
                                <Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/ClassicMiniNes/Images/Core/2.png" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="3" >
                                <Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/ClassicMiniNes/Images/Core/3.png" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="4" >
                                <Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/ClassicMiniNes/Images/Core/4.png" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="5" >
                                <Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/ClassicMiniNes/Images/Core/5.png" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <!-- RATING IMAGE END -->

 

Edited by Grila

Share this post


Link to post
Share on other sites
1 minute ago, Grila said:

I'm not sure you can do it that way without some code-behind for a converter. You would have to use a string format, but the StringFormatter binding attribute will only work on strings (hence the need for a converter). I do have something that comes to mind and I'll give it a go tomorrow when I have more time. Not sure if it will work but I may be able to shoehorn something in. 

You could also use a StyleTrigger or a DataTrigger to accomplish this. Take a look at any of my themes that utilize the games star rating system and you'll see how its done. Here's an example from my ClassicMini theme...


<!-- RATING IMAGE START -->
            <Image Grid.Column="2" Grid.Row="5" RenderOptions.BitmapScalingMode="HighQuality" Panel.ZIndex="2" >
                <Image.Style>
                    <Style TargetType="Image" >
                        <Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/ClassicMiniNes/Images/Core/0.png" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="1" >
                                <Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/ClassicMiniNes/Images/Core/1.png" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="2" >
                                <Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/ClassicMiniNes/Images/Core/2.png" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="3" >
                                <Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/ClassicMiniNes/Images/Core/3.png" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="4" >
                                <Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/ClassicMiniNes/Images/Core/4.png" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="5" >
                                <Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/ClassicMiniNes/Images/Core/5.png" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <!-- RATING IMAGE END -->

 

I figured it out right before you posted this...I'm getting closer to being a meaningful member of the community. :)

 

				<Image x:Name="BGMask" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="6" Grid.RowSpan="5" Opacity="0.0" Panel.ZIndex="1">
					<Image.Style>
						<Style TargetType="{x:Type Image}">
							<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Simplicity/Images/test.png"/>
							<Style.Triggers>
								<DataTrigger Value="Arcade Classics" Binding="{Binding Path=SelectedGame.Platform}">
									<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Simplicity/Images/Arcade Classics.png"/>
								</DataTrigger>
							</Style.Triggers>
						</Style>
					</Image.Style>
				</Image>

 

  • Like 2

Share this post


Link to post
Share on other sites
17 minutes ago, igotdvds said:

I figured it out

Nice.  Here are a few other ways to do this, in case you run into a situation where you need it.  It uses StringFormat as suggested by Grila.  In both cases, I use a collapsed TextBlock to apply the StringFormat, then I bind the image source (URI) to this TextBlock's text property.

<!-- PLATFORM LOGO FOR SELECTED GAME -->
<TextBlock x:Name="FileName" Visibility="Collapsed">
    <TextBlock.Text> <!-- THE HACKY BIT TO GET LOGO -->
        <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Images/Platforms/{0}/Clear Logo/{0}.png">
            <Binding Path="ActiveGame.Platform" />
        </MultiBinding>
    </TextBlock.Text>
</TextBlock>
<Viewbox Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center">
    <Image Source="{Binding Text, ElementName=FileName}" RenderOptions.BitmapScalingMode="HighQuality" />
</Viewbox>

and one more -- which I use to accomplish I think what you're trying to do:

<!-- BG ARTWORK FOR PLATFORM OF ACTIVE GAME -->
<TextBlock x:Name="UriBackgroundArt" Visibility="Collapsed"
           Text="{Binding Path=ActiveGame.Platform, StringFormat='pack://siteoforigin:,,,/Images/Platforms/{0}/Fanart/{0}.jpg'}" />
<Image Source="{Binding Text, ElementName=UriBackgroundArt}" Style="{DynamicResource {StaticResource AOBackgroundArt}}">
    <Image.OpacityMask>
        <ImageBrush ImageSource="{StaticResource AOUriWheel1Mask}" />
    </Image.OpacityMask>
</Image>

 

  • Like 3

Share this post


Link to post
Share on other sites
5 minutes ago, igotdvds said:

This will allow me to integrate "pointers" like in HS for each type of platform. THANKS!!!

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.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...