CriticalCid Posted November 30, 2017 Share Posted November 30, 2017 Hey Phil, great to see you here The TransitionsPresenter has always a small delay in it that you can’t disable but you can try this instead: <Grid.Background> <Image Source="{Binding Path=SelectedPlatform.BackgroundImagePath}" Stretch="UniformToFill" RenderOptions.BitmapScalingMode="HighQuality" /> </Grid.Background> 1 Quote Link to comment Share on other sites More sharing options...
PhillsDoodles Posted November 30, 2017 Share Posted November 30, 2017 (edited) Hey CriticalCid, thanks a lot! I've tried a different approach, i followed Jason's Data Bind tutorial and added the theme image on top of the menu and it worked great! Edit: The code works only when i put it on the PlatformWheel1FiltersView, but now when i tried to insert it on TextGamesView, i does nothing. Thanks in advance. Edit 2: changed the Binding Path=PlatformTitle to SelectedGame.Platform and it worked. <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:transitions="clr-namespace:Unbroken.LaunchBox.Wpf.Transitions;assembly=Unbroken.LaunchBox.Wpf" mc:Ignorable="d" d:DesignHeight="562" d:DesignWidth="1000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}"> <UserControl.Resources> <DataTemplate DataType="{x:Type ContentControl}" x:Key="ImageTemplate"> <Image x:Name="TemplateImage" /> <DataTemplate.Triggers> <DataTrigger Binding="{Binding Path=PlatformTitle}" Value="Atari 2600"> <Setter TargetName="TemplateImage" Property="Source" Value="pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/Atari 2600.jpg"></Setter> </DataTrigger> <DataTrigger Binding="{Binding Path=PlatformTitle}" Value="Sega Genesis"> <Setter TargetName="TemplateImage" Property="Source" Value="pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/Sega Genesis.jpg"></Setter> </DataTrigger> <DataTrigger Binding="{Binding Path=PlatformTitle}" Value="Nintendo Entertainment System"> <Setter TargetName="TemplateImage" Property="Source" Value="pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/Nintendo Entertainment System.jpg"></Setter> </DataTrigger> <DataTrigger Binding="{Binding Path=PlatformTitle}" Value="Super Nintendo Entertainment System"> <Setter TargetName="TemplateImage" Property="Source" Value="pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/Super Nintendo Entertainment System.jpg"></Setter> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> </UserControl.Resources> <Canvas Name="Canvas"> <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" /> <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}"> <Grid.Background> <SolidColorBrush Color="Black" Opacity="{Binding BackgroundFade}" /> </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width="26*" /> <ColumnDefinition Width="71*" /> <ColumnDefinition Width="3*" /> </Grid.ColumnDefinitions> <transitions:TransitionPresenter Grid.Column="0" TransitionSelector="{Binding ListTransitionSelector}" Content="{Binding ListView}" /> <Grid Grid.Column="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="4*" /> <ColumnDefinition Width="96*" /> </Grid.ColumnDefinitions> <Grid Grid.Column="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="44*" /> <ColumnDefinition Width="5*" /> <ColumnDefinition Width="52*" /> </Grid.ColumnDefinitions> <Grid Grid.Column="0"> <Grid.RowDefinitions> <RowDefinition Height="4.2*" /> <RowDefinition Height="59.3*" /> <RowDefinition Height="5.4*" /> <RowDefinition Height="45.3*" /> <RowDefinition Height="4.2*" /> </Grid.RowDefinitions> <transitions:TransitionPresenter Grid.Row="1" TransitionSelector="{Binding ImageTransitionSelector}" Content="{Binding ImageView}" /> <!-- This is the line that brings the background, i've tried to replace the screenshot first to see if it works. --> <ContentControl Content="{Binding}" ContentTemplate="{StaticResource ImageTemplate}" /> <!--<transitions:TransitionPresenter Grid.Row="3" TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true" />--> </Grid> <transitions:TransitionPresenter Grid.Column="2" TransitionSelector="{Binding GameDetailsTransitionSelector}" Content="{Binding GameDetailsView}" /> </Grid> </Grid> </Grid> </Canvas> </UserControl> Edited December 1, 2017 by PhillsDoodles Found another issue on my code and don't wanna double post. Quote Link to comment Share on other sites More sharing options...
CriticalCid Posted December 1, 2017 Share Posted December 1, 2017 Yes, the DataBinding approach works as well but I would suggest to use a more dynamic version for it. Your current code is fine if you have a manageable amount of platforms or just want it for specific platforms, but it gets really messy the more platforms you add and you would also need to add every new platform manually. So I highly suggest to use this code here instead: <TextBlock x:Name="BackgroundPlatformName" Visibility="Collapsed"> <TextBlock.Text> <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/{0}.jpg"> <Binding Path="SelectedPlatform.Name" /> </MultiBinding> </TextBlock.Text> </TextBlock> <Image Source="{Binding Text, ElementName=BackgroundPlatformName, FallbackValue='pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/Default.jpg'}" Opacity="100" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" /> What this code does is to create a hidden TextBlock which gets populated with the correct path for the image as it uses a multibinding method to insert the name of the currently selected platform as a variable. The image element on the other hand just points to the content of the TextBox to get the file path from there. You can also specify a fallback value which gets used as default file path when there doesn't exist a file named like the platform title, because otherwise you would just get a black screen if you hit a platform you have no image for. Also a small tip regarding "Active" vs. "Selected": If you don’t need to show data or images instantly than you should always use the “Active” instead of the “Selected” tag. “Selected” is a known performance killer and if you call a lot of them in your View then you can really bring BigBox down when you navigate really fast through your collection or when the attract mode kicks in. So try to avoid "Selected" when it's not really necessary. 3 Quote Link to comment Share on other sites More sharing options...
PhillsDoodles Posted December 1, 2017 Share Posted December 1, 2017 (edited) Wow! awesome! thanks a lot, i'm gonna try it Edit: It works like a charm! Thanks a lot! Edited December 1, 2017 by PhillsDoodles Switch the code that CriticalCid provided Quote Link to comment Share on other sites More sharing options...
PhillsDoodles Posted December 3, 2017 Share Posted December 3, 2017 Hello! Is there a way to make the image size relative to its grid like it can be done on the grids definition? I had used MaxWidth and MaxHeight but the image appears in different size when i switch the resolution and i want it to looks the same in different resolutions. Thanks in advance. Quote Link to comment Share on other sites More sharing options...
CriticalCid Posted December 3, 2017 Share Posted December 3, 2017 I wouldn't give the image a specific size and just set the stretch property to fill the grid. 1 Quote Link to comment Share on other sites More sharing options...
PhillsDoodles Posted December 3, 2017 Share Posted December 3, 2017 Yup, i think it's best to divide the grid cell and use RowSpan and CollumSpan to resize them. Thanks a lot! Quote Link to comment Share on other sites More sharing options...
Jason Carr Posted December 4, 2017 Author Share Posted December 4, 2017 @PhillsDoodles Just feasted my eyes on this: Wow! 1 Quote Link to comment Share on other sites More sharing options...
PhillsDoodles Posted December 4, 2017 Share Posted December 4, 2017 Thanks a lot Jason! i'm glad you guys enjoy it! 1 Quote Link to comment Share on other sites More sharing options...
shinra358 Posted December 12, 2017 Share Posted December 12, 2017 On 12/1/2017 at 11:27 AM, CriticalCid said: Yes, the DataBinding approach works as well but I would suggest to use a more dynamic version for it. Your current code is fine if you have a manageable amount of platforms or just want it for specific platforms, but it gets really messy the more platforms you add and you would also need to add every new platform manually. So I highly suggest to use this code here instead: <TextBlock x:Name="BackgroundPlatformName" Visibility="Collapsed"> <TextBlock.Text> <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/{0}.jpg"> <Binding Path="SelectedPlatform.Name" /> </MultiBinding> </TextBlock.Text> </TextBlock> <Image Source="{Binding Text, ElementName=BackgroundPlatformName, FallbackValue='pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/Default.jpg'}" Opacity="100" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" /> What this code does is to create a hidden TextBlock which gets populated with the correct path for the image as it uses a multibinding method to insert the name of the currently selected platform as a variable. The image element on the other hand just points to the content of the TextBox to get the file path from there. You can also specify a fallback value which gets used as default file path when there doesn't exist a file named like the platform title, because otherwise you would just get a black screen if you hit a platform you have no image for. Also a small tip regarding "Active" vs. "Selected": If you don’t need to show data or images instantly than you should always use the “Active” instead of the “Selected” tag. “Selected” is a known performance killer and if you call a lot of them in your View then you can really bring BigBox down when you navigate really fast through your collection or when the attract mode kicks in. So try to avoid "Selected" when it's not really necessary. In your code, what does the {0} mean? Quote Link to comment Share on other sites More sharing options...
PhillsDoodles Posted December 12, 2017 Share Posted December 12, 2017 it returns the platform name. So, if i'm on Arcade platform, it will return Arcade.jpg and show the image as background. 1 Quote Link to comment Share on other sites More sharing options...
shinra358 Posted December 12, 2017 Share Posted December 12, 2017 (edited) Excellent! Thanks, I needed that. Do you know how to do a randomized version? (randomly selecting from a series of images like arcade-01.png, arcade-02.png, arcade-03.png) with said code? Edited December 12, 2017 by shinra358 Quote Link to comment Share on other sites More sharing options...
mcfilmmakers Posted December 12, 2017 Share Posted December 12, 2017 You need to set it up with a multi converter Quote Link to comment Share on other sites More sharing options...
shinra358 Posted December 12, 2017 Share Posted December 12, 2017 Is that xaml only without code behind? If so, can you integrate it with the above code and show it? Quote Link to comment Share on other sites More sharing options...
mcfilmmakers Posted December 12, 2017 Share Posted December 12, 2017 What you want to do require and if/and statement and that can only be done code behind. Quote Link to comment Share on other sites More sharing options...
steambowser Posted December 31, 2017 Share Posted December 31, 2017 Heya. Apologies if this is the incorrect place to post this, but I have an extremely simple question: For Bigbox, is there a way to make the height of the game boxes smaller in the "wall" view? I can't seem to find an option for this, so it seems the only solution would be to edit the skin. If possible, I'd like my Steam banners to be closer to each other in this view: Thanks in advance! And sorry again if this is the wrong place to ask. Quote Link to comment Share on other sites More sharing options...
y2guru Posted January 27, 2018 Share Posted January 27, 2018 @Jason Carr Hey Jason, I could of sworn you posted a tip detailing a method that can enable the theme creator to enforce a given resolution, I cannot find it anywhere :-( If I'm not mistaken can you link it... pretty please. Quote Link to comment Share on other sites More sharing options...
Rincewind Posted January 27, 2018 Share Posted January 27, 2018 It's in the ThemeSettings.xml in the theme folder, just change the one you want to force use with 'true' <Force16X9AspectRatio>false</Force16X9AspectRatio> <Force4X3AspectRatio>false</Force4X3AspectRatio> Quote Link to comment Share on other sites More sharing options...
y2guru Posted January 27, 2018 Share Posted January 27, 2018 Ah ok, it’s the aspect ratio... that will still come in handy! Cheers @Rincewind Quote Link to comment Share on other sites More sharing options...
Sithel Posted February 3, 2018 Share Posted February 3, 2018 I've done some searching and can't seem to find the issue I'm having. Looking in the .pdf notes I see this: SelectedGame.StarRating The selected game’s Star Rating; integer value between 0 and 5 <TextBlock Text="{Binding Path=SelectedGame.StarRating}" Foreground="White" /> I see we can set the star rating in halves but setting the integer to something like 2.5 will not output a 2.5 rating. It seems to round down to a 2. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.