Background Images for Filters View

[bbweiners]

Hi,

Does anyone know if there's a way to select a specific background image for the different categories in the Filters view (genre, series, developer, etc...). There is a setting in Bigbox to select a random games fanart that is within a specific filter, but I'm looking to make the image static.

Thanks!

[C-Beats]

Like a single image for when you are in Genre filter, and a specific image for series, etc?

[bbweiners]

17 minutes ago, C-Beats said:

Like a single image for when you are in Genre filter, and a specific image for series, etc?

Exactly!

[bbweiners]

Let me be sure we're on the same page. So if you're in the genre's filter, you have a specific image for each genre -- Action, Platformers, Sports, etc...

If you're in series, you have a specific image for Contra, Metal Slug, Mario, Sonic, etc...

[C-Beats]

OH so you want an image per filter value, not what filter you were on. So for example if you select "View Genres" you don't want a generic "Genres" image, you want an image matching the name of the Genre value you are moused over?

[bbweiners]

30 minutes ago, C-Beats said:

OH so you want an image per filter value, not what filter you were on. So for example if you select "View Genres" you don't want a generic "Genres" image, you want an image matching the name of the Genre value you are moused over?

Yes. That is correct. Is that something we can currently do?

[C-Beats]

21 minutes ago, bbweiners said:

Yes. That is correct. Is that something we can currently do?

You CAN via XAML but it isn't very intuitive, easy or strait-forward. What you would basically do is create a invisible text box and use it to build the string to the path the image is in (using static strings and SelectedFilter.Name binding). Then in the image control point to the text box Text binding to get the image (if it's there).

[bbweiners]

43 minutes ago, C-Beats said:

You CAN via XAML but it isn't very intuitive, easy or strait-forward. What you would basically do is create a invisible text box and use it to build the string to the path the image is in (using static strings and SelectedFilter.Name binding). Then in the image control point to the text box Text binding to get the image (if it's there).

Yeah, that sounds a bit above my head. I've done a fair amount of stuff with xaml and creating themes, but I'm not a programmer by any stretch. Are there any example code snippets of this. Maybe @faeran would know?

[C-Beats]

You SHOULD be able to do it with just XAML but requires lesser known controls and a some binding types you may not be use to using.

[bbweiners]

1 hour ago, C-Beats said:

You SHOULD be able to do it with just XAML but requires lesser known controls and a some binding types you may not be use to using.

It worked! Thanks!

[Khaar]

Hello @C-Beats. I want to do exactly the same thing! In TextFiltersView, I want to use a specific background image for each genre, for each series, etc.

I've created a folder for this: LaunchBox\Images\FiltersView\
In this folder are the images, for example, for the genre Action, an image named 'Action.jpg'
Based on your proposed solution, I've created the following code to generate the path to the images and specify it in the Image Control as the Source:

 

<TextBlock x:Name="FileName" Visibility="Collapsed">
    <TextBlock.Text>
        <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Images/FiltersView/{0}.jpg">
            <Binding Path="SelectedFilter.Name" />
        </MultiBinding>
    </TextBlock.Text>
</TextBlock>



<Image Source="{Binding Text, ElementName=FileName}" />

 

However, it doesn't work, and no background image is displayed.
After carefully reading LaunchBox\Themes\Documentation.pdf, I noticed that there is actually no binding named SelectedFilter.Name! So, I misunderstood something here...
I hope you can help me solve the problem.

Edited March 6 by Khaar

[C-Beats]

3 hours ago, Khaar said:

Hello @C-Beats. I want to do exactly the same thing! In TextFiltersView, I want to use a specific background image for each genre, for each series, etc.

I've created a folder for this: LaunchBox\Images\FiltersView\
In this folder are the images, for example, for the genre Action, an image named 'Action.jpg'
Based on your proposed solution, I've created the following code to generate the path to the images and specify it in the Image Control as the Source:

 

<TextBlock x:Name="FileName" Visibility="Collapsed">
    <TextBlock.Text>
        <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Images/FiltersView/{0}.jpg">
            <Binding Path="SelectedFilter.Name" />
        </MultiBinding>
    </TextBlock.Text>
</TextBlock>



<Image Source="{Binding Text, ElementName=FileName}" />

 

However, it doesn't work, and no background image is displayed.
After carefully reading LaunchBox\Themes\Documentation.pdf, I noticed that there is actually no binding named SelectedFilter.Name! So, I misunderstood something here...
I hope you can help me solve the problem.

a bit out of the loop in regards to what you're referring to but all filters view have SelectedFilter binding and they all have the Name property on them

[Khaar]

I found the mistake and now it works! Thanks for the help.

Edited March 6 by Khaar