Startup Theme XAML Tutorial?

[Juzzotec]

Hi Guys

Simple question really for the coding noobs like me, are there any useful tutorials for startup theme creation?

I want to understand all the key elements, this example is based on my favourite theme by @keltoigael called minimal.

First Section

<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"
             mc:Ignorable="d"
             d:DesignHeight="562"
             d:DesignWidth="1000"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             FocusVisualStyle="{x:Null}"
             BorderThickness="0"
             Margin="0"
             Padding="0"
             Background="#000">

Second Section

    <Canvas Name="Canvas">
        <Image Source="{}pack://siteoforigin:,,,/StartupThemes/Minimal/background/launching.png" Stretch="UniformToFill" RenderOptions.BitmapScalingMode="HighQuality"
            Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" />
        <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">
            <Grid.Background>
                <SolidColorBrush Color="Black" Opacity="{Binding BackgroundFade}" />
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="30*" />
                <RowDefinition Height="10*" />
                <RowDefinition Height="45*" />
                <RowDefinition Height="10*" />
                <RowDefinition Height="8*" />
                <RowDefinition Height="35*" />
                <RowDefinition Height="9*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10*" />
                <ColumnDefinition Width="31*" />
                <ColumnDefinition Width="20*" />
                <ColumnDefinition Width="31*" />
                <ColumnDefinition Width="10*" />
            </Grid.ColumnDefinitions>
		    <Image Grid.ColumnSpan="5" Grid.RowSpan="7" Source="{}pack://siteoforigin:,,,/StartupThemes/minimal/platform/arcade.png" Opacity="100" Panel.ZIndex="1" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" />

I want to understand the concept of controlling where things are on the screen. Specifically <Grid.RowDefinitions> and <Image Grid.ColumnSpan="5" Grid.RowSpan="7"...

I kind of worked out how to change source based on other themes that call for clearlogo etc

Also when I changed the code to show the clear logo instead of platform image, I specified a global height and width to shrink the images, is this correct?

This is the code I changed and it shows all clear logos as 500x500 now.

<Image Grid.ColumnSpan="5" Grid.RowSpan="7" Source="{Binding SelectedGame.ClearLogoImagePath}" Opacity="100" Panel.ZIndex="1" Width="500" Height="500" 
			RenderOptions.BitmapScalingMode="HighQuality" />
                			

Any help is appreciated.

Edited June 18, 2019 by Juzzotec

[Retro808]

1 hour ago, Juzzotec said:

I want to understand the concept of controlling where things are on the screen. Specifically <Grid.RowDefinitions> and <Image Grid.ColumnSpan="5" Grid.RowSpan="7"...

I am entry level on all this so happy to share what has been shared with me as I learn. 

First, I would recommend downloading the free version of Visual Studio. This way you can copy in a theme's code and see the grids/columns to make editing easier. Otherwise, just editing on Notepadd++ you are shooting in the dark as to exactly where things may land on the Full canvas. 

The theme views the layout in exactly that, Grids and Columns. So you dictate how wide, tall and how many there are. One thing to note though is when you are listing the Row or Column an element appears in the count starts a "0" and not "1" So if you have 7 rows and want an item to show up on the second row you count 0, 1, 2, 3, 4, 5, 6. So the second row is actually Grid.Row="1". I kept making the mistake thinking I want in on the second row that that should be Grid.Row="2". Nope, the first row is 0 and so on. Same with columns.

The span just tells it how many rows or columns you want it to take up. You want an element to appear in the 3rd column and take up 3 columns you would have Grid.Column="2" Grid.ColumnSpan="3". 

This is all from my fundamental understanding of it. I am sure our more resident experts would have better tips and hints. 

 

[Retro808]

Oh and there are some good tips in here. 

[Juzzotec]

23 hours ago, Retro808 said:

I am entry level on all this so happy to share what has been shared with me as I learn. 

First, I would recommend downloading the free version of Visual Studio. This way you can copy in a theme's code and see the grids/columns to make editing easier. Otherwise, just editing on Notepadd++ you are shooting in the dark as to exactly where things may land on the Full canvas. 

The theme views the layout in exactly that, Grids and Columns. So you dictate how wide, tall and how many there are. One thing to note though is when you are listing the Row or Column an element appears in the count starts a "0" and not "1" So if you have 7 rows and want an item to show up on the second row you count 0, 1, 2, 3, 4, 5, 6. So the second row is actually Grid.Row="1". I kept making the mistake thinking I want in on the second row that that should be Grid.Row="2". Nope, the first row is 0 and so on. Same with columns.

The span just tells it how many rows or columns you want it to take up. You want an element to appear in the 3rd column and take up 3 columns you would have Grid.Column="2" Grid.ColumnSpan="3". 

This is all from my fundamental understanding of it. I am sure our more resident experts would have better tips and hints. 

Thanks so much for the reply @Retro808, this cleared up a few things for me.

My main issue is that I'm trying to use the designer view in visual studio as per your screenshot but this doesn't load at all when I'm reviewing the code.

I might be a missing a view that may need to be checked? this would help me out a great deal. I am loading Default.xaml and Default Shutdown.xmal

Edited June 19, 2019 by Juzzotec

[Retro808]

@Juzzotec Honestly I am not to sure I ticked any settings. After initial download I opened VS. I selected to start a new project and under Visual Basic chose WPF User Control. It opened with the views needed. 

[JaysArcade]

On 6/19/2019 at 6:13 AM, Retro808 said:

After initial download I opened VS. I selected to start a new project and under Visual Basic chose WPF User Control. It opened with the views needed. 

Just the info I was looking for, thanks. I was editing Pause and startup themes in Notepad++ all weekend because I didn't understand how to do this, LOL.