Changing background for different platforms

[zengeek]

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

[Rincewind]

If not you could just use an image as I single colour instead as a work around. Here's a link to a site that has just that too.... Solid colour backgrounds

[Zombeaver]

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 

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

Edited August 11, 2016 by Zombeaver

[zengeek]

Thanks for the responses guys, much appreciated. 

[silvusvalentine]

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:

I hope that helps!

Edited October 9, 2016 by silvusvalentine
Formatting fixes.