Jump to content
LaunchBox Community Forums
zengeek

Changing background for different platforms

Recommended Posts

Hello, Is it possible to change just the background colour between selecting different platforms in bigbox? I know it's possible to change the background image, video, etc. but I wasn't sure whether its possible to just change the background colour? Many Thanks, T

Share this post


Link to post
Share on other sites

I don't think there's a way to just change the color. If that's something I wanted to do, I'd probably go the route that @Rincewind suggested. That is a weirdly super-specific thing to make an entire website for haha :P

If it's something you'd really like to see implemented, you could submit a Bitbucket feature request for it.

Edited by Zombeaver
  • Like 1

Share this post


Link to post
Share on other sites

You can accomplish this by creating a style for background element. Let's say your background is a Grid component. In the view's XAML file, paste the following Resource Dictionary just below the UserControl tag:


<UserControl.Resources>

	<Style x:Key="DynamicBackground" TargetType="{x:Type Grid}">

		<Style.Triggers>

			<DataTrigger Binding="{Binding Path=SelectedPlatform.Name}" Value="Arcade">

				<Setter Property="Background" Value="Blue" />

			</DataTrigger>

			<DataTrigger Binding="{Binding Path=SelectedPlatform.Name}" Value="Nintendo 64">

				<Setter Property="Background" Value="Red" />

			</DataTrigger>

			<DataTrigger Binding="{Binding Path=SelectedPlatform.Name}" Value="Nintendo Entertainment System">

				<Setter Property="Background" Value="Green" />

			</DataTrigger>

		</Style.Triggers>

	</Style>

</UserControl.Resources>

So here's the breakdown. The Style is defined with a Key, which is basically the name that identifies the style. In this case, I've named the style DynamicBackground. Since the background will be a Grid component, I've set the TargetType to Grid. In order to vary the background color based on the platform, the color is set by using Triggers. This works by defining a condition, and if the condition is true, the value is set based on that condition. In this case, we want the color of the Grid's background to change depending on the platform, so the Trigger is the value of the selected platform. Therefore, in the DataTrigger tag, we set the Binding property to SelectedPlatform.Name, and the Value that will trigger this color is the name of the platform, for example, Arcade. When the trigger is activated, we want it to set the background color; so, inside the DataTrigger, a Setter is defined, along with the Property that we want to set and the appropriate Value. In the case of the Arcade platform, we want the Background Property of the Grid component to be set to the color Blue. This process can be repeated for as many platforms as you would like, just define a DataTrigger for each of them.

To implement it, you just have to apply the Style to the Grid component, like so:


<Grid Style="{StaticResource DynamicBackground}">

Since the style is defined in a Resource Dictionary, it is accessible as a StaticResource with the name DynamicBackground, in this case. Here's an example of it in action:

XAML_Dynamic_Background.gifI hope that helps! :)

Edited by silvusvalentine
Formatting fixes.

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...