Frameset and frames page names please

[MerlinArcade]

I don't know much about xaml but I used to be a web designer 20 years ago so I learned basic HTML back then and looking at a video where Jason shows some xaml code, I might be able to basically figure out the xaml files I need to change to get the theme that I want.

 

My first question is regarding FRAMESETS.

 

In HTML, we use multiple HTML pages as frames and 1 main HTML page called frameset that will define with height and width in pixels or % of each frame inside the frameset.

 

For example, I took this theme here and I can clearly see that this page is a combination of 3 frames and I divided them like so.

I can see that the left frame (Frame 1) is where the wheel code will be located. Frame 2 on the top right is where we will see some basic game text info and the bottom right Frame 3 is where we will load the game box covers.

 

How am I doing? Am I getting close to what you guys do here?

If so then can you tell me in which directory they are, the names of these 3 frames that we see here but also the name of the xaml page used as the overall frameset page which will determine the height and width of these 3 frames.

 

I should be able to do the rest after that...

 

Thanks

 

Merlin
 

[CriticalCid]

XAML is very similar to HTML and other markup languages but nonetheless it works slightly different than HTML. I highly recommend you to watch the whole XAML tutorial series that Jason did, that should clarify a lot for you:

 

[Maddoc1007]

@MerlinArcade Hi 

What your showing is Default Vertical theme and the PlatformWheel4FiltersView.xaml each element as you can see has its grid co-ordinates such as coverflow which is in Grid.Column="0".  As @CriticalCid pointed out watch the video he linked to, I would also read the Documentation.pdf inside the Launchbox themes folder for descriptions of elements etc.

1     <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" CoverFactory="{Binding CoverFactory}" ImageType="Clear Logo" CurveAmount="0" CameraZPosition="2.85" VisibleCount="16" PageSize="6" Spacing="1.05" ItemZPosition="1.05" SelectedItemZPosition="2.0" />
    (Line 22)

2    <transitions:TransitionPresenter Grid.Column="1" TransitionSelector="{Binding DetailsTransitionSelector}" Content="{Binding DetailsView}" Margin="0,0,0,0" />
    (Line 46)

3    <transitions:TransitionPresenter Grid.Column="1" TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true" Grid.Row="2" Margin="0,0,2,0" />
    (Line 45)

4    <transitions:TransitionPresenter Grid.Row="3" TransitionSelector="{Binding TopBoxesTransitionSelector}" Content="{Binding TopBoxesView}" />
    (This is where the Favourites show, Line 48)

5    <transitions:TransitionPresenter Grid.Row="5" TransitionSelector="{Binding BottomBoxesTransitionSelector}" Content="{Binding BottomBoxesView}" Margin="0,0,0,0" />
    (This is where the Recent show, Line 49)

See Screenshot

Also the Whole background art is 

 <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>

(Line 12 to 16)

 

Edited January 22, 2017 by Maddoc1007

[MerlinArcade]

Thank you guys for your time.

I will soon watch the video.

What I'm understanding for now is that "PlatformWheel4FiltersView.xaml" in this case would be the Frameset file that I talked about above which determines which other xaml pages will fit inside the frameset and also determines the height and width of each one of the sub frames.

So for now, "PlatformWheel4FiltersView.xaml" the main page to focus on if I want the wheel to show up at the bottom of the vertical theme and the games screenshot frame  (ex: Arcade gameplay images) shows up those images just about the wheel like in the screenshot below.

 

Correct?

Merlin



 

Edited January 22, 2017 by MerlinArcade

[Maddoc1007]

The frameset you are on about would be the Canvas and on top of this would be the grid where you lay the elements you want in the Grid.Column and the Grid.Row.  But what you are showing now would be one of the GameViews such as thisWhich is WheelGamesView in the theme folder

Edited January 22, 2017 by Maddoc1007

[MerlinArcade]

Just a quick question before I watch the video and get deep into this.

In HTML, you could temporarily add a code (ex: Border="5") inserted in the frameset page to see a small border around each one of the frames below so that you can rapidly see which frame is too small or too big etc...

In the WheelGamesView page, is it possible to do that and if so how would you go about doing this?

If I can't make this work on my own after that, I'm not sure I will want to get deeper into this xaml thing.

Thanks


 

Edited January 22, 2017 by MerlinArcade

[Maddoc1007]

@MerlinArcade You would have to tell it something like this before the element ie the coverflow etc

<Border Grid.Column="0" SnapsToDevicePixels="True"  BorderBrush="White" BorderThickness="4" />

[MerlinArcade]

On Sunday, January 22, 2017 at 10:39 PM, Maddoc1007 said:

@MerlinArcade You would have to tell it something like this before the element ie the coverflow etc

<Border Grid.Column="0" SnapsToDevicePixels="True"  BorderBrush="White" BorderThickness="4" />

I copy pasted your line in many different spots in the GameDetailsView.xaml page in the default theme and yet, no border was seen.

Any other suggestions?

 

Btw, are you sure that GameDetailsView.xaml is the right xaml page to edit? I have been opening many different xaml pages in the default theme and remove big chunks of code but this page here doesn't seem to change at all so obviously I'm not editing the right page.

Again this is the screenshot I see when I open up BB.

 

And the setting in the options>>views is like so...

 

 

Edited January 25, 2017 by MerlinArcade

[Maddoc1007]

@MerlinArcade from your above screenshots your Game List View is set on Vertical Wheel 1 which is equal to WheelGamesView.xaml, and your Platform List View is on Platform Wheel 1 which is equal to PlatformWheel1FiltersView.xaml.  The very first page you see when you open up BigBox is the one of the Platform Views you have then to click on one of the platforms ie:arcade nintendo etc in order to see the Game View.  There are different views for both Platforms and Games.  In your Options page you can change the views by clicking on Views then scrolling down to the Platform List View and clicking on it the same with the Game List View.  The code works here is a screenshot of a view i just tried it on, note the white border around the Coverflow also remember for the different items you must change in the code their Column and or Row's reference.

[Maddoc1007]

@MerlinArcade By your options page you are also on the Default Theme, you should never change the Default Theme, instead you should make a copy of the default theme and paste it in the Theme Folder.  Then you should open up BigBox/OptionsPage/ClickOnView and then click on Default to change to The Default Copy and work on that instead, always make a copy of any theme you want to change and then open that Theme in BigBox.

[MerlinArcade]

Ok just to make sure those 2 pages are the ones I need to edit, I renamed them WheelGamesView2.xaml and PlatformWheel1FiltersView2.xaml and then opened up BB.

 

I was stunned to see that as soon as BB opened, 2 new pages were created WheelGamesView.xaml and PlatformWheel1FiltersView.xaml !!! WTF!!

 

How can I edit a page that will instantly be overwritten as soon as I open up BB?
 

[Maddoc1007]

@MerlinArcade read the above post there is no need to create new views just copy default theme or what ever theme you are working on and change to that in BigBox the views i mentioned are inside the Theme folder in the Views Folder. 

Edited January 25, 2017 by Maddoc1007

[MerlinArcade]

5 minutes ago, Maddoc1007 said:

@MerlinArcade ....you should never change the Default Theme, instead you should make a copy of the default theme and paste it in the Theme Folder.

Yeah I know that. :- D  It's not for editing permanently, it's just to add frames and then remove them back as soon as I'm done. Also, I always make a copy the page I want to edit before I edit it. When I will see those damn frames in the default theme then I will copy the entire theme and start editing.


 

Edited January 25, 2017 by MerlinArcade

[Maddoc1007]

@MerlinArcade Here are the 2 Views with borders around them you notice the Grid Column And Grid Row References in the code above the elements paste them into your theme and overwrite the files make copies of the originals first.

PlatformWheel1FiltersView.xaml

WheelGamesView.xaml

[MerlinArcade]

6 minutes ago, Maddoc1007 said:

@MerlinArcade Here are the 2 Views with borders around them you notice the Grid Column And Grid Row References in the code above the elements paste them into your theme and overwrite the files make copies of the originals first.

PlatformWheel1FiltersView.xaml

WheelGamesView.xaml

Thanks I did copied the default theme and them edited the 2 pages but couldn't get to show more than 1 white frame. Now I overwritten my 2 pages with yours and see 4 white blocks but I see an error pop up. :-D

 

Something on line 9 and 35 so I guess that was your border line code.

 

Edited January 25, 2017 by MerlinArcade

[Maddoc1007]

@MerlinArcade You shouldn't see any errors unless you did something wrong here is screenshots of 2 views i just gave you

[Maddoc1007]

@MerlinArcade Line 9 has nothing to do with borders this is line 9

mc:Ignorable="d"

Line 35 is this

<Grid Grid.Row="1">

Edited January 25, 2017 by Maddoc1007

[MerlinArcade]

Forget it, it was an error in GameDetailsView.xaml that I edited earlier on. When I deleted it and brought back the original, the error msg went away.

Ok, one last question. Since I want a vertical theme, I need to move frames around.

So let's take your superman screenshot here. How would go to rotate every frames to the left so that the clear logos on the game list on the left now appears as the bottom row.

I guess now the game wheel would become a row (ex:row #3) instead of column #1 or something like that.
 

Am I getting warmer here? :-D

 

Edited January 25, 2017 by MerlinArcade

[MerlinArcade]

Ok so far so good, I managed to find the code for each frame. I color coded them, white, blue, red and green. Now I just need to know how to move them around.

 

[Maddoc1007]

@MerlinArcade You would have to start from scratch and then strip everything out redo a new grid set it as you want then you would have to apply the elements to the grid co-ordinates that you want.  You would also have to create a horizontal wheel, but you would still have your artwork and videos stretched out of proportion and not the way you are depicting in the screenshot.