Jump to content
LaunchBox Community Forums
Juzzotec

Startup Theme XAML Tutorial?

Recommended Posts

Posted (edited)

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

Share this post


Link to post
Share on other sites
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. 

 

Screen Shot 2019-06-18 at 8.28.07 AM.png

  • Like 2

Share this post


Link to post
Share on other sites
Posted (edited)
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 by Juzzotec

Share this post


Link to post
Share on other sites

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

Share this post


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