How To Use Metro - nicklikescoffee/UltimateUiPlugin GitHub Wiki

Ultimate UI comes with Metro built-in. Metro is a UI toolkit for WPF that will automatically style the default Controls as well as add extra Metro Controls to use. You can find more information as well as controls and guides here: https://mahapps.com/

Enabling Metro

Enabling Metro is easy, in the UI Load XAML command just set the parameter Enable Metro Theme to be True and you are using Metro!

To see what Metro does first copy this code which does not use Metro:

plugin command("UltimateUI.dll", "UI Load XAML", "<Grid Background=\"White\">
		<Grid>
			<Grid.RowDefinitions>
				<RowDefinition Height=\"30\"/>
				<RowDefinition Height=\"5\"/>
				<RowDefinition Height=\"30\"/>
				<RowDefinition Height=\"5\"/>
				<RowDefinition Height=\"30\"/>
				<RowDefinition Height=\"5\"/>
				<RowDefinition Height=\"30\"/>
				<RowDefinition Height=\"5\"/>
				<RowDefinition Height=\"30\"/>
			</Grid.RowDefinitions>

			<Grid.ColumnDefinitions>
				<ColumnDefinition Width=\"80\"/>
				<ColumnDefinition Width=\"5\"/>
				<ColumnDefinition Width=\"200\"/>
			</Grid.ColumnDefinitions>
			
			<TextBlock Text=\"First Name\" VerticalAlignment=\"Center\" Grid.Row=\"0\" Grid.Column=\"0\"/>
			<TextBox x:Name=\"firstNameTextBox\" VerticalContentAlignment=\"Center\" Grid.Row=\"0\" Grid.Column=\"2\"/>

			<TextBlock Text=\"Last Name\" VerticalAlignment=\"Center\" Grid.Row=\"2\" Grid.Column=\"0\"/>
			<TextBox x:Name=\"lastNameTextBox\" VerticalContentAlignment=\"Center\" Grid.Row=\"2\" Grid.Column=\"2\"/>

			<TextBlock Text=\"Favorite Food\" VerticalAlignment=\"Center\" Grid.Row=\"4\" Grid.Column=\"0\"/>
			<TextBox x:Name=\"favoriteFoodTextBox\" VerticalContentAlignment=\"Center\" Grid.Row=\"4\" Grid.Column=\"2\"/>

			<TextBlock Text=\"Favorite Movie\" VerticalAlignment=\"Center\" Grid.Row=\"6\" Grid.Column=\"0\"/>
			<TextBox x:Name=\"favoriteMovieTextBox\" VerticalContentAlignment=\"Center\" Grid.Row=\"6\" Grid.Column=\"2\"/>

			<Button Content=\"Submit\" Width=\"100\" HorizontalAlignment=\"Left\" Grid.Row=\"8\" Grid.Column=\"2\"/>
		</Grid>
	</Grid>", "True", "False", "False", "BaseLight", "Blue")

Now compare this to using the Metro theme, you can easily switch back and forth by setting the parameter Enable Metro Theme to True and False - and rerunning the program.

plugin command("UltimateUI.dll", "UI Load XAML", "<Grid Background=\"White\">
		<Grid>
			<Grid.RowDefinitions>
				<RowDefinition Height=\"30\"/>
				<RowDefinition Height=\"5\"/>
				<RowDefinition Height=\"30\"/>
				<RowDefinition Height=\"5\"/>
				<RowDefinition Height=\"30\"/>
				<RowDefinition Height=\"5\"/>
				<RowDefinition Height=\"30\"/>
				<RowDefinition Height=\"5\"/>
				<RowDefinition Height=\"30\"/>
			</Grid.RowDefinitions>

			<Grid.ColumnDefinitions>
				<ColumnDefinition Width=\"80\"/>
				<ColumnDefinition Width=\"5\"/>
				<ColumnDefinition Width=\"200\"/>
			</Grid.ColumnDefinitions>
			
			<TextBlock Text=\"First Name\" VerticalAlignment=\"Center\" Grid.Row=\"0\" Grid.Column=\"0\"/>
			<TextBox x:Name=\"firstNameTextBox\" VerticalContentAlignment=\"Center\" Grid.Row=\"0\" Grid.Column=\"2\"/>

			<TextBlock Text=\"Last Name\" VerticalAlignment=\"Center\" Grid.Row=\"2\" Grid.Column=\"0\"/>
			<TextBox x:Name=\"lastNameTextBox\" VerticalContentAlignment=\"Center\" Grid.Row=\"2\" Grid.Column=\"2\"/>

			<TextBlock Text=\"Favorite Food\" VerticalAlignment=\"Center\" Grid.Row=\"4\" Grid.Column=\"0\"/>
			<TextBox x:Name=\"favoriteFoodTextBox\" VerticalContentAlignment=\"Center\" Grid.Row=\"4\" Grid.Column=\"2\"/>

			<TextBlock Text=\"Favorite Movie\" VerticalAlignment=\"Center\" Grid.Row=\"6\" Grid.Column=\"0\"/>
			<TextBox x:Name=\"favoriteMovieTextBox\" VerticalContentAlignment=\"Center\" Grid.Row=\"6\" Grid.Column=\"2\"/>

			<Button Content=\"Submit\" Width=\"100\" HorizontalAlignment=\"Left\" Grid.Row=\"8\" Grid.Column=\"2\"/>
		</Grid>
	</Grid>", "True", "False", "True", "BaseLight", "Blue")

You will notice that the TextBoxes have different properties when you hover over them, type into them and highlight the text inside of them. Also, the button completely changes and looks much nicer. All without having to dig deep into XAML code to customize your Controls.

Metro really shines when you want to change the theme, with just a few clicks you can completely change the look of your program.

Changing The Theme

Changing the theme of your Metro application is simple in Ultimate UI. Simply choose between the light or dark theme, accent color and then change the color of your Grid background accordingly.

  • For light theme use the background color White
  • For dark theme use the background color: #252525

In order to see the changes easier, let's first add this property to our Button:

Style="{StaticResource AccentedSquareButtonStyle}"

So now the Button code should look like this:

<Button Content="Submit" Width="100" Style="{StaticResource AccentedSquareButtonStyle}" HorizontalAlignment="Left" Grid.Row="8" Grid.Column="2"/>

Run your application and now the button should be Blue which is the Metro Accent Color set in the UI Load XAML command.

You can manipulate Controls by reading the documentation for the Controls on the MahAPps website, here is the page for the Button Control: https://mahapps.com/controls/buttons.html

Now change the Accent Color, rerun the application and see the Button color change! You will also notice that when you type into the TextBoxes and then highlight the text - the color of the Selection Brush will also be the Accent Color.

Let's switch to the dark theme by changing the parameter Metro Theme to BaseDark. You will also want to change the background color of the Grid like so:

<Grid Background="#252525">

Because we are now using the dark theme you may want to make the TextBlocks more readable by adding this property:

Foreground="White"

You should now have a dark theme with white TextBlocks. The dark theme will automatically take care of the TextBoxes and Button.

Working With Metro Controls

You will find sections for Metro Commands and Functions in the Ubot sidebar. These will help you get and set properties for Metro specific Controls. Metro specific Controls are Controls that look like the following:

<Controls:NumericUpDown Minimum = 0, Maximum = 10000, Interval = 5, StringFormat="C2"/>

Controls that begin with "Controls:" are Metro Controls. These Controls must begin with a capital "C" - sometimes in the Metro documentation they use a lowercase "c" - this will not work and you will have to change this to be a capital "C"

Getting and setting properties on these Metro Controls is the same as any other control.

Metro will automatically style many Controls, even Controls that are not Metro specific. For example, a Button will automatically be styled by Metro, however, it is still a normal Button. And because of that, it is not under the Metro Commands/Functions sections. Instead, to manipulate properties and subscribe to Events you can simply use the normal Button commands and functions for this purpose.

⚠️ **GitHub.com Fallback** ⚠️