Help learning to edit custom theme

[ELDOAMark]

Hello.. I have been fiddling with make alterations to the Critical Zone theme by editing the text files for the various "views".. I have managed to change some things like making the clear logo menu wheel disappear faster, changing the background video.. Two things that I am really struggling to find out how to alter just by looking at the text file (I do have a little bit of programming experience)..

How can I add the total number of games to the little bit at  the bottom that says the system name and year? I pasted below the part of the code that seems to refer to the metadata, but there seem to be so many little variables and things in each entry that I feel like I have no idea where to start. Could someone help me with making another entry(?) in the year and manufacturer section that has the total number of games for the system as well?

<!-- METADATA GLASS BAR -->
            <Border x:Name="MetaDataGlass" Grid.Column="4" Grid.ColumnSpan="5" Grid.Row="7" Grid.RowSpan="5" Background="Black" Opacity="0" Panel.ZIndex="15" SnapsToDevicePixels="True" CornerRadius="10" />

        <!-- PLATFORM TITLE -->
            <Viewbox Grid.Column="5" Grid.ColumnSpan="3" Grid.Row="8" Panel.ZIndex="20" >
                <DockPanel Height="36" Width="661" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                    <TextBlock x:Name="DetailsBar1" Text="{Binding Path=SelectedPlatform.Name}" FontFamily="Arial Black" FontSize="28" FontWeight="Bold" DockPanel.Dock="Top" TextAlignment="Center" VerticalAlignment="Center" >
                        <TextBlock.Foreground>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF1FA66F" Offset="1"/>
                                <GradientStop Color="#FF30FF30"/>
                            </LinearGradientBrush>
                        </TextBlock.Foreground>
                    </TextBlock>
                </DockPanel>
            </Viewbox>

        <!-- RELEASE YEAR AND MANUFACTURER -->
            <Viewbox Grid.Column="5" Grid.ColumnSpan="3" Grid.Row="10" Panel.ZIndex="20" >
                <DockPanel Height="26" Width="661" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                    <TextBlock x:Name="DetailsBar2" FontFamily="Calibri" FontSize="24"  FontWeight="Bold" DockPanel.Dock="Top" Foreground="White" TextAlignment="Center" >
                      <Run Text="{Binding Path=ActivePlatform.ReleaseDate, StringFormat=yyyy}"/>
                      <Run Text="    " />
                      <Run Text="{Binding Path=ActivePlatform.Developer}" />
                    </TextBlock>
                </DockPanel>
            </Viewbox>
        </Grid>
    </Canvas>

 

I was also struggling to figure out how to change the position on the screen of some objects. I would really like for the recently played game boxes to be off to the side a bit... I've tried changing the column number and row number etc but that just seems to have no effect or makes Big Box crash if I enter something invalid. All I've done is take the code for the recently played games and tried pasting it in different locations in the text file. I'm pretty happy with how things look now but I would love to just be able to add the total games for each system.

 

Thanks

PlatformWheel3FiltersView.xaml

[blattacker]

For adding the total number of games, you'll just want to add a text element with the binding ActivePlatform.TotalGameCount (or SelectedPlatform.TotalGameCount) in the area you want it in. The different data bindings are listed in the documentation PDF in the themes folder, if you haven't taken a look at it yet. 

Positioning is a bit harder to explain (especially when my morning caffeine hasn't quite hit my brain just yet), but I'll do my best to explain my process. I will say, you mentioned having a bit of programming experience, if any of that happens to include building responsive front-ends, you'll probably have an easier time understanding, as it works pretty similar to something like CSS grids. You'll essentially have to edit the grid/set up your own.

The key element you'll be dealing with (when using the following method) is going to be a Grid element. These are responsive elements that will resize to take up all the space available to them. The grid can further be split up into rows and columns, and this allows elements to be placed in specific locations within the grid, as long as a grid cell exists for it. The columns and rows can be as large or as small as you like, there can be as many of them as you need to create the layout you're going for, and they don't need to be equally sized.

• I don't know if there's a different way to do this, but I build my layouts essentially with percentages. So, for example, having my columns start at 0%, 25%, 50%, and 75%. 
  • As a note, the mentioned percentages are obviously just an example, actual numbers would vary depending on the layout
• That I've seen, XAML doesn't seem to understand percentages exactly. You basically tell it how many "parts" each column/row takes up.
  • As an example, if you wanted one column to be 25% of the width, another column to be 50%, and the third column to be the remaining 25%, you could say that each column takes up 1 part, 2 parts, and another 1 part respectively
  • The math shakes down so that each Definition is a fraction of the total. So, in the above example, 1 part, 2 parts, 1 part is 4 totals parts, so 1/4 (25%) 2/4 (50%) 1/4 (25%).
    • Because of this you can really use any numbers you want, as long as the ratio is the same. For example, saying 5 parts, 10 parts, 5 parts or 25 parts 50 parts 25 parts would both make the same column widths as 1, 2, 1.
    • If you're ever having a hard time with the math, sometimes I find it's easier to just use the percentage numbers. So in the above case, 25, 50, 25. As long as your numbers always add up to 100, you'll know that the numbers listed are the specific percentages.
• Once you've got the numbers figured out, you just have to tell the code how many columns/rows you need and how many parts they take up. You'll do this using Grid.ColumnDefinitions and/or Grid.RowDefinitions
  • Example code (using the 25% 50% 25% example above and having 3 equally sized rows)

  • <Grid.ColumnDefinitions>
      <ColumnDefinition Width="1*" />
      <ColumnDefinition Width="2*" />
      <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="1*" />
      <RowDefinition Height="1*" />
      <RowDefinition Height="1*" />
    </Grid.RowDefinitions>

  • In the above example, you'll notice there's an asterisk after the number. This is what tells the code that you want these sizes to be relative. 
    • If you're using the percentage number trick listed above, the easiest thing to do is literally just write the percentages and replace the % symbol with an asterisk.
• Once the grid is set up, you simply need to tell the code which column(s)/row(s) you want your element to live in. You'll do this using "Grid.Column"/"Grid.Row" on your element. Key thing to remember here is that the rows and columns are 0 indexed (so the first column/row is column/row 0, not column/row 1).
• If you want the item to span multiple columns/rows, you'll need to add the "Grid.ColumnSpan"/"Grid.RowSpan" property to it.
  • Example code for an element that exists inside the above-defined grid, where it should be in the middle column, but span the entire height

  • <TextBlock Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Text="Some text" />

• The last thing to mention is that you can place another Grid object inside of a parent Grid, with specific column/row placing for even more precise placement.
  • Extending the above example, let's change the TextBlock into a Grid object, split that grid up into different rows, and then place some TextBlock elements inside of the child Grid

  • <Grid Name="ParentGrid">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="1*" />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
      </Grid.RowDefinitions>
      <Grid Name="ChildGrid" Grid.Column="1" Grid.Row="0">
        <Grid.RowDefinitions>
          <RowDefinition Height="1*" />
          <RowDefinition Height="3*" />
        </Grid.RowDefinitions>
        <TextBlock Name="Header" Grid.Row="0" Text="A Headline" />
        <TextBlock Name="Content" Grid.Row="1" Text="Content displayed under the headline" />
      </Grid>
    </Grid>

  • This results in a layout where, in the top row of the center column, there is another grid with 2 rows, one 25% of the height, and the other 75% of the height. Both rows contain a TextBlock element which will appear visually stacked.

 

I hope that was helpful! I think at some point there was a video on the Unbroken Software YouTube that went over this in a much cleaner way, but I'm not able to find it right now, unfortunately. In any case, please let me know if you need anything explained in more depth!