Simple example

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");

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>

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