Jump to content
LaunchBox Community Forums

XAML Tips and Tricks


Jason Carr

Recommended Posts

Thanks xD  It's taking years to make because of the rate in which the features I need come in :P But I'm keeping in there.

Fading the entire view would be the equivalent of what I'm doing now. The controls are still gonna load at the same speed and you will still need the 1.5 seconds and during that time you will still be able to move with the gamepad. Invisibility is just cosmetic. It's still functioning even if you don't see it.

Link to comment
Share on other sites

  • 2 weeks later...

@eatkinola figured out a way to get rid of my effects not matching up with the creation of the wheel. I used objectanimationusingkeyframes and the visibility control with a trigger of textbox.loaded. This way when the effects first show, I can put a delay on it without it affecting the showing while actually scrolling through the wheel. Now I can get rid of the loading screen and no longer need the controller thing ;)  One future problem though, is if I want to delay music. There's no open control to control the music orchestrated by bigbox.

Edited by shinra358
  • Like 1
Link to comment
Share on other sites

On 5/11/2017 at 7:55 PM, eatkinola said:

Quick HOWTO on creating font resource libraries. This prevents user from having to install fonts separately. I'm sure there are other ways to do this, but this works for me. Before you bundle a font this way, please make sure you're not violating the font license. I only use fonts that are free to share and use in other projects. Note: you can also bundle image and resources this way if you wanted.

1. In Visual Studio 2017, create a Class Library (.NET Framework).

2. Give it a name like Ao.Bigbox.Epoch09 (whatever you want).

3. Create a subfolder in the project called Fonts (not necessary but keeps it organized). See attached screenshot.

4. Copy your font files into this Fonts folder -- just drag and drop the font files from windows file explorer directly into the Fonts folder in VS.

5. In VS, highlight these font files and make sure they are all tagged as Build Action = Resource. You can multi-select and change multiples at a time.

6. Build your library (DLL) using Release mode (debug works fine too, but just make it Release).

7. Find your DLL in the VS projects folder, e.g., D:\Users\Evan\Documents\Visual Studio 2017\Projects\Ao.Bigbox\Ao.Bigbox.Epoch09\bin\Release

8. Copy this DLL into the Plugins folder of your theme (available in LaunchBox 7.10-beta-5).

9. Reference the font resources like I did in Epoch09. Good to go! No need to have users install fonts separately, just copy your theme to LaunchBox\Themes.

NOTE: Be sure to use the proper font names in your XAML. The font files themselves can be called anything. Click on the font file in windows explorer to see what it's name really is -- this is how you must reference it within XAML. Please do checkout how I do this in Epoch09 views. Also, please note these refs don't seem to work within the Styles file, so you have to place these refs at the top of each view that uses a particular font. If you find a better way, please let me know.

5915261f61127_FontResourceDLL.thumb.jpg.2146d0326fa5dacd14d2d38b8885eb68.jpg

^^ from earlier in this thread. Be sure to check Epoch09 (or other themes that use this approach) for an example of how the fonts are referenced in XAML.

  • Thanks 1
Link to comment
Share on other sites

10 minutes ago, shinra358 said:

can you post how it was referenced in epoch? I don't feel like downloading a whole pack just to see that :P

Take a look at the fontfamily below

Example:

<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"
             xmlns:coverFlow="clr-namespace:Unbroken.LaunchBox.Wpf.Controls.CoverFlow;assembly=Unbroken.LaunchBox.Wpf"
             xmlns:aop="clr-namespace:Ao.Bigbox.Plugins;assembly=Ao.Bigbox.Themer"
			 xmlns:cal="http://www.caliburnproject.org"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             mc:Ignorable="d"
             d:DesignHeight="1080" d:DesignWidth="1920" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
    
	
	<!-- USER CONTROL START -->
	<UserControl.Resources>
        <FontFamily x:Key="FontHead">/CityHunter.Resources;Component/Fonts/#Streamster</FontFamily>
        <FontFamily x:Key="FontBody">/CityHunter.Resources;Component/Fonts/#Arcade</FontFamily>
    
	
	<!-- STORYBOARDS START -->
		<Storyboard x:Key="DetailsFade">
	    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FlowControl">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="WheelBG">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="WheelSelectedBG">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.8"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.0" Value="0.8"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="WheelSelectedInfoBG">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.8"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.0" Value="0.8"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GameLogo">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Icons">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
		</Storyboard>
		</UserControl.Resources>
	<!-- STORYBOARDS END -->
	
	
	<!-- CANVAS START -->
	<Canvas Name="Canvas">
        
		<!-- VIDEO BACKGROUND START -->
		<Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">
			<aop:AutopathVideoLooper Autopath="Context" AllowMultipleVideos="true" AllowFallbackParent="false" FallbackPath="pack://siteoforigin:,,,/Themes/Blade Runner/Videos/Backgrounds/Default/" Fallback="StopAfterTry3" Mute="True" Crossfade="0:0:5" Speed="1" Shuffle="True" Stretch="Fill" />
	        </Grid>
		<!-- VIDEO BACKGROUND END -->
		
		
		<!-- GRID START -->
        <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="30*" />
                <ColumnDefinition Width="390*" />
                <ColumnDefinition Width="330*" />
                <ColumnDefinition Width="30*" />
                <ColumnDefinition Width="360*" />
                <ColumnDefinition Width="30*" />
                <ColumnDefinition Width="330*" />
                <ColumnDefinition Width="420*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="125*" />
                <RowDefinition Height="40*" />
                <RowDefinition Height="90*" />
                <RowDefinition Height="90*" />
                <RowDefinition Height="30*" />
                <RowDefinition Height="345*" />
                <RowDefinition Height="75*" />
                <RowDefinition Height="235*" />
                <RowDefinition Height="50*" />
            </Grid.RowDefinitions>
            
			
			<!-- HORIZONTAL WHEEL START -->
            <coverFlow:FlowControl x:Name="FlowControl" Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="8" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ImageType="Boxes"
                CurveAmount="0.0" CameraZPosition="6.0" VisibleCount="14" PageSize="6" Spacing="2.4" ItemZPosition="1.0" SelectedItemZPosition="1.0" Panel.ZIndex="100">
                <coverFlow:FlowControl.CoverFactory>
                    <coverFlow:HorizontalWheelCoverFactory />
                </coverFlow:FlowControl.CoverFactory>
            </coverFlow:FlowControl>
            <!-- HORIZONTAL WHEEL END -->
            
			
			<!-- SCANLINE OVERLAY START -->
            <Image x:Name="Scanline" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="8" Grid.RowSpan="9" Source="pack://siteoforigin:,,,/Themes/Blade Runner/Images/Theme/scanline.png" RenderOptions.BitmapScalingMode="HighQuality" 
                   Opacity="0.2" Panel.ZIndex="0"/>
            <!-- SCANLINE OVERLAY END -->
            
			
			<!-- TOP BAR BG START -->
            <Border x:Name="TopBarBG" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="8" Opacity="0.8" Background="Black" SnapsToDevicePixels="True" Panel.ZIndex="1" />
            <!-- TOP BAR BG END -->
            
			
			<!-- BOTTOM BAR BG START -->
            <Border x:Name="BottomBarBG" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="8" Opacity="0.8" Background="Black" SnapsToDevicePixels="True" Panel.ZIndex="1" />
            <!-- BOTTOM BAR BG END -->
            
			
			<!-- WHEEL BG START -->
            <Border x:Name="WheelBG" Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="8" SnapsToDevicePixels="True" Panel.ZIndex="1" >
                <Border.Background>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="1,0">
                        <GradientStop Color="#1A000000" Offset="0.5"/>
                        <GradientStop Color="#A6000000" Offset="0"/>
                        <GradientStop Color="#A6000000" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <!-- WHEEL BG END -->
            
			
			<!-- WHEEL SELECTED BG START -->
            <Border x:Name="WheelSelectedBG" Grid.Column="3" Grid.Row="4" Grid.ColumnSpan="3" Grid.RowSpan="2" Opacity="0.8" Background="#FF3737" SnapsToDevicePixels="True" CornerRadius="35,35,0,0" Panel.ZIndex="2"/>
            <!-- WHEEL SELECTED BG END -->
            
			
			<!-- WHEEL SELECTED INFO BG START -->
            <Border x:Name="WheelSelectedInfoBG" Grid.Column="3" Grid.Row="6" Grid.ColumnSpan="3" Opacity="0.8" Background="#FE1C1C" SnapsToDevicePixels="True" CornerRadius="0,0,35,35" Panel.ZIndex="2"/>
            <!-- WHEEL SELECTED INFO BG END -->
            
			
			<!-- SELECTED TITLE BG START -->
            <Border x:Name="SelectedTitleBG" Grid.Column="2" Grid.Row="2" Grid.ColumnSpan="5" Opacity="0.6" Background="#000000" SnapsToDevicePixels="True" CornerRadius="20" Panel.ZIndex="2" />
            <!-- SELECTED TITLE BG END -->
            
			
			<!-- PLATFORM LOGO START -->
            <Image x:Name="PlatformLogo" Source="{Binding Path=ActiveGame.PlatformClearLogoImagePath}" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Margin="0,10,0,15" HorizontalAlignment="Left" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Panel.ZIndex="99"  />
            <!-- PLATFORM LOGO END -->
			
			
			<!-- TIME START -->	
				<TextBlock x:Name="Clock" Text="{Binding CurrentTime}" TextAlignment="Right" FontFamily="{StaticResource FontBody}" FontSize="49" TextWrapping="Wrap" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="7" Opacity="1" Panel.ZIndex="3" Margin="0,2,20,0" VerticalAlignment="Center" >
					<TextBlock.Foreground>
						<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
							<GradientStop Color="#FE1C1C" Offset="1"/>
						    <GradientStop Color="#FF3737"/>
						</LinearGradientBrush>
					</TextBlock.Foreground>
				</TextBlock>
			<!--TIME END-->
            
			
			<!-- GAME LOGO START -->
            <Image x:Name="GameLogo" Grid.Column="4" Grid.Row="7" Source="{Binding Path=ActiveGame.ClearLogoImagePath}" Margin="0,10" RenderOptions.BitmapScalingMode="HighQuality" Panel.ZIndex="3" />
            <!-- GAME LOGO END-->
            
			
			<!-- STATIC CUSTOM HEADER TEXT -->
            <TextBlock x:Name="GameStaticText" Grid.Column="2" Grid.Row="0" Grid.ColumnSpan="5" Text="" FontFamily="{StaticResource FontHead}" FontSize="60" HorizontalAlignment="Center"
                      VerticalAlignment="Center" Panel.ZIndex="3" >
				<TextBlock.Foreground>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#FE1C1C" Offset="1"/>
						<GradientStop Color="#FF3737"/>
					</LinearGradientBrush>
				</TextBlock.Foreground>
			</TextBlock>	
            <!-- STATIC CUSTOM HEADER TEXT END -->
			
			
			<!-- SELECTED TITLE START -->
            <Viewbox x:Name="SelectedTitle" Grid.Column="2" Grid.Row="2" Grid.ColumnSpan="5" StretchDirection="DownOnly" Margin="10" Panel.ZIndex="3">
                <TextBlock Text="{Binding ActiveGame.Title}" Foreground="#FFFFFF" FontFamily="{StaticResource FontBody}" FontSize="60" Margin="0,6,0,0" />
            </Viewbox>
            <!-- SELECTED TITLE END -->
			
			
			<!-- STORYBOARD TRIGGER START -->
            <TextBlock x:Name="Trigger" Text="{Binding Path=SelectedGame.Name, NotifyOnTargetUpdated=True}" Visibility="Hidden" ><!-- binds to the SELECTED platform name and notifies the trigger everytime it updates -->
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="Binding.TargetUpdated"><!-- trigger that plays the storyboard and when it plays it, in this case everytime the SelectedPlatform.Name of the TextBlock changes -->
                        <BeginStoryboard Storyboard="{StaticResource DetailsFade}"/><!-- specifies which storyboard the trigger will play -->
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>
            <!-- STORY BOARD TRIGGER END -->			
            
			
			<!-- SELECTED ICONS START -->
            <DockPanel x:Name="Icons" Grid.Column="4" Grid.Row="6" HorizontalAlignment="Center" VerticalAlignment="Center" Panel.ZIndex="3">
                <Image Source="pack://siteoforigin:,,,/Themes/Blade Runner/Images/Theme/favorite.png" RenderOptions.BitmapScalingMode="HighQuality" >
                    <Image.Style>
                        <Style TargetType="Image">
                            <Setter Property="Visibility" Value="Collapsed" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ActiveGame.Favorite}" Value="True">
                                    <Setter Property="Visibility" Value="Visible" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding ActiveGame.Favorite}" Value="False">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
                <Image Source="pack://siteoforigin:,,,/Themes/Blade Runner/Images/Theme/completed.png" RenderOptions.BitmapScalingMode="HighQuality" >
                    <Image.Style>
                        <Style TargetType="Image">
                            <Setter Property="Visibility" Value="Collapsed" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ActiveGame.Completed}" Value="True">
                                    <Setter Property="Visibility" Value="Visible" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding ActiveGame.Completed}" Value="False">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
                <Image Source="pack://siteoforigin:,,,/Themes/Blade Runner/Images/Theme/broken.png" RenderOptions.BitmapScalingMode="HighQuality" >
                    <Image.Style>
                        <Style TargetType="Image">
                            <Setter Property="Visibility" Value="Collapsed" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ActiveGame.Broken}" Value="True">
                                    <Setter Property="Visibility" Value="Visible" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding ActiveGame.Broken}" Value="False">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
            </DockPanel>
            <!-- SELECTED ICONS END -->
            
			
			<!-- GAME CONTROLS START -->
            <Image x:Name="GameControls" Grid.Column="2" Grid.Row="8" Grid.ColumnSpan="5" Source="pack://siteoforigin:,,,/Themes/Blade Runner/Images/Theme/game_controls_ps4.png" RenderOptions.BitmapScalingMode="HighQuality" Panel.ZIndex="3" />
            <!-- GAME CONTROLS END -->
            
			
			<!-- QUICK JUMP START -->
            <ListBox Name="Index" Grid.Column="0" Grid.Row="7" Grid.ColumnSpan="8" Style="{DynamicResource HorizontalListBoxStyle}" Visibility="{Binding IndexVisibility}" Panel.ZIndex="100" VerticalAlignment="Bottom">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseDoubleClick">
                        <cal:ActionMessage MethodName="OnEnter" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </ListBox>
            <!-- QUICK JUMP END -->
        
		
		<!-- GRID END -->
		</Grid>
    
	
	<!-- CANVAS END -->    
	</Canvas>

	
	<!-- USER CONTROL END -->
</UserControl>

 

  • Like 1
Link to comment
Share on other sites

you posted the entire thing xD

 

I believe this is what the referrence is: 

<UserControl.Resources>
        <FontFamily x:Key="FontHead">/CityHunter.Resources;Component/Fonts/#Streamster</FontFamily>
        <FontFamily x:Key="FontBody">/CityHunter.Resources;Component/Fonts/#Arcade</FontFamily>

 

FontFamily="{StaticResource FontBody}"

 

Kinda mad I see how to do multiple vids at once and no one said anything when I asked before, smh :P

Edited by shinra358
Link to comment
Share on other sites

1 minute ago, shinra358 said:

you posted the entire thing xD

 

I believe this is what the referrence is: 


<UserControl.Resources>
        <FontFamily x:Key="FontHead">/CityHunter.Resources;Component/Fonts/#Streamster</FontFamily>
        <FontFamily x:Key="FontBody">/CityHunter.Resources;Component/Fonts/#Arcade</FontFamily>

 


FontFamily="{StaticResource FontBody}"

 

Kinda mad I see how to do multiple vids at once and no one said anything when I asked before, smh :P

At work, so quick and dirty cut and paste but should clear up what you need.

Link to comment
Share on other sites

got the dll in the plugins folder of my theme.

got this in:

<UserControl.Resources>
        <FontFamily x:Key="FontMain">/PSP-XE.Resources;Component/Fonts/#Square721 BT</FontFamily>

 

 

And got this in the spot for showing the font info in the textblock:

FontFamily="{StaticResource FontMain}"

 

 

Still showing default fonts. My theme is named PSP-XE. Is the fnt name supposed to be the name of its file or the actual name of the font?

Edited by shinra358
Link to comment
Share on other sites

2 minutes ago, shinra358 said:

Am i supposed to have this at the top?:     xmlns:aop="clr-namespace:Ao.Bigbox.Plugins;assembly=Ao.Bigbox.Themer"

No, you don't need that at the top. When you created the library, did you mark the fonts as resources within the project? Aside from that, I can take a look at your project file and theme if you want to pm them to me, but I can't do that until next week cause I'm away.

Link to comment
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...