Skip to content

Simple example

Jump to bottom
Macocian Alexandru Victor edited this page Mar 15, 2019 · 7 revisions

To use in a project, do the following steps:

Code part

Declare a monomenu object globally:

MonoMenu m;

And initialize it in LoadContent() method as follows:

m = new MonoMenu(GraphicsDevice, Content);
m.Load("test.xml");

or

m.Load("text.xaml");

Then, add the following in Update(GameTime gameTime)

MouseInput.Poll(gameTime);
m.Update(gameTime);

And lastly add the following in Draw(GameTime gameTime)

m.Draw(spriteBatch);

When resizing the window, add the following code after the resizing has taken place.

m.Resize();

XML Part

In the folder where the executable is located create a new file called test.xml Inside it, place the following:

<Menu>
	<Style>
		<Name>SomeStyle</Name>
		<BorderColor>Black</BorderColor>
		<BorderSize>0</BorderSize>
		<Foreground>White</Foreground>
		<Background>Red</Background>
		<FontSize>12</FontSize>
	</Style>
	<Rectangle>
		<Name>BaseRectangle</Name>
		<Style>SomeStyle</Style>
		<Width> 50% </Width>
		<Height> 50% </Height>
		<Background>Blue</Background>
		<Text>Welcome</Text>
		<Foreground>White</Foreground>
		<BorderSize>5</BorderSize>
		<BorderColor>Black</BorderColor>
		<Font>font</Font>
		<Events>
			<AnimatedEvent>
				<Type>MouseEnter</Type>
				<Target>Background</Target>
				<From>Blue</From>
				<To>DodgerBlue</To>
				<Duration>100</Duration>
			</AnimatedEvent>
			<AnimatedEvent>
				<Type>MouseLeave</Type>
				<Target>Background</Target>
				<From>DodgerBlue</From>
				<To>Blue</To>
				<Duration>100</Duration>
			</AnimatedEvent>
			<AnimatedEvent>
				<Name>SizeAnimation</Name>
				<Type>LeftMouseDown</Type>
				<Target>Width</Target>
				<From>50%</From>
				<To>100%</To>
				<Duration>400</Duration>
			</AnimatedEvent>
			<AnimatedEvent>
				<Type>LeftMouseDown</Type>
				<Target>Height</Target>
				<From>50%</From>
				<To>100%</To>
				<Duration>400</Duration>
			</AnimatedEvent>
			<AnimatedEvent>
				<Type>RightMouseDown</Type>
				<Target>Width</Target>
				<From>100%</From>
				<To>50%</To>
				<Duration>400</Duration>
			</AnimatedEvent>
			<AnimatedEvent>
				<Type>RightMouseDown</Type>
				<Target>Height</Target>
				<From>100%</From>
				<To>50%</To>
				<Duration>400</Duration>
			</AnimatedEvent>
			<AnimatedEvent>
				<Type>AnimationFinished</Type>
				<Trigger>SizeAnimation</Trigger>
				<Target>FontSize</Target>
				<From>12</From>
				<To>24</To>
				<Duration>200</Duration>
			</AnimatedEvent>
		</Events>
		<Children>
			<Ellipse>
				<RelativeX>0</RelativeX>
				<RelativeY>0</RelativeY>
				<Width>30</Width>
				<Height>30</Height>
				<BorderSize>1</BorderSize>
				<BorderColor>#FFFFFF</BorderColor>
				<Events>
					<AnimatedEvent>
						<Type>DoubleClick</Type>
						<Target>BorderSize</Target>
						<From>1</From>
						<To>5</To>
						<Duration>300</Duration>
					</AnimatedEvent>
					<AnimatedEvent>
						<Type>DoubleClick</Type>
						<Target>BorderColor</Target>
						<From>#000000</From>
						<To>#FFFFFF</To>
						<Duration>300</Duration>
					</AnimatedEvent>
					<BasicEvent>
						<Type>Click</Type>
						<Target>Visibility</Target>
						<Value>Hidden</Value>
					</BasicEvent>
					<BasicEvent>
						<Type>RightMouseDown</Type>
						<Target>Visibility</Target>
						<Value>Visible</Value>
					</BasicEvent>
				</Events>
				<VerticalAlignment>Top</VerticalAlignment>
				<HorizontalAlignment>Right</HorizontalAlignment>
				<Background>#000000</Background>
			</Ellipse>
			<Image>
				<Source>picture</Source>
				<Width>300</Width>
				<Height>300</Height>
				<HorizontalAlignment>Left</HorizontalAlignment>
				<VerticalAlignment>Top</VerticalAlignment>
				<Text>Image</Text>
				<Foreground>White</Foreground>
				<Font>font</Font>
				<Events>
					<AnimatedEvent>
						<Type>LeftMouseDown</Type>
						<Target>BorderSize</Target>
						<From>0</From>
						<To>50</To>
						<Duration>2000</Duration>
					</AnimatedEvent>
					<AnimatedEvent>
						<Type>LeftMouseDown</Type>
						<Target>BorderColor</Target>
						<From>Black</From>
						<To>White</To>
						<Duration>2000</Duration>
					</AnimatedEvent>
					<AnimatedEvent>
						<Type>RightMouseDown</Type>
						<Target>BorderSize</Target>
						<From>50</From>
						<To>0</To>
						<Duration>2000</Duration>
					</AnimatedEvent>
					<AnimatedEvent>
						<Type>RightMouseDown</Type>
						<Target>BorderColor</Target>
						<From>White</From>
						<To>Black</To>
						<Duration>2000</Duration>
					</AnimatedEvent>
					<BasicEvent>
						<Type>DoubleClick</Type>
						<Target>Visibility</Target>
						<Value>Hidden</Value>
					</BasicEvent>
				</Events>
			</Image>
		</Children>
	</Rectangle> 
</Menu>

XAML

If you want to use xaml, create a file called test.xaml in the folder where the executable is located. Inside it place the following:

<Menu>
	<Style Name="SomeStyle" BorderColor="Black" BorderSize="0" Foreground="White" Background="Red" FontSize="12"></Style>
	<Rectangle Name="BaseRectangle" Style="SomeStyle" Width="50%" Height="50%" Background="Blue" Text="Welcome" Foreground="White" BorderSize="0"
		BorderColor="Black" Font="font">
		<Events>
			<AnimatedEvent Type="MouseEnter" Target="Background" From="Blue" To="DodgerBlue" Duration="100"></AnimatedEvent>
			<AnimatedEvent Type="MouseLeave" Target="Background" From="DodgerBlue" To="Blue" Duration="100"></AnimatedEvent>
			<AnimatedEvent Name="SizeAnimation" Type="LeftMouseDown" Target="Width" From="50%" To="100%" Duration="400"></AnimatedEvent>
			<AnimatedEvent Type="LeftMouseDown" Target="Height" From="50%" To="100%" Duration="400"></AnimatedEvent>
			<AnimatedEvent Type="RightMouseDown" Target="Width" From="100%" To="50%" Duration="400"></AnimatedEvent>
			<AnimatedEvent Type="RightMouseDown" Target="Height" From="100%" To="50%" Duration="400"></AnimatedEvent>
			<AnimatedEvent Type="AnimationFinished" Trigger="SizeAnimation" Target="FontSize" From="12" To="24" Duration="200"></AnimatedEvent>
		</Events>
		<Children>
			<Ellipse RelativeX="0" RelativeY="0" Width="30" Height="30" BorderSize="1" BorderColor="#FFFFFF" VerticalAlignment="Top" HorizontalAlignment="Right" 
			Background="#000000">
				<Events>
					<AnimatedEvent Type="DoubleClick" Target="BorderSize" From="1" To="5" Duration="300"></AnimatedEvent>
					<AnimatedEvent Type="DoubleClick" Target="BorderColor" From="#000000" To="#FFFFFF" Duration="300"></AnimatedEvent>
					<BasicEvent Type="Click" Target="Visibility" Value="Hidden"></BasicEvent>
					<BasicEvent Type="RightMouseDown" Target="Visibility" Value="Visible"></BasicEvent>
				</Events>
			</Ellipse>
			<Image Source="picture" Width="300" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top" Text="Image" Foreground="White" Font="font">
				<Events>
					<AnimatedEvent Type="LeftMouseDown" Target="BorderSize" From="0" To="50" Duration="2000"></AnimatedEvent>
					<AnimatedEvent Type="LeftMouseDown" Target="BorderColor" From="Black" To="White" Duration="2000"></AnimatedEvent>
					<AnimatedEvent Type="RightMouseDown" Target="BorderSize" From="50" To="0" Duration="2000"></AnimatedEvent>
					<AnimatedEvent Type="RightMouseDown" Target="BorderColor" From="White" To="Black" Duration="2000"></AnimatedEvent>
					<BasicEvent Type="DoubleClick" Target="Visibility" Value="Hidden"></BasicEvent>
				</Events>
			</Image>
		</Children>
	</Rectangle> 
</Menu>

Note

To be able to launch successfully, make sure you have in your content pipeline an image called picture and a spritefont called font.

Showcase

Alt Text

Clone this wiki locally