Click here to Skip to main content
15,892,575 members
Articles / Desktop Programming / XAML

Metro: Shuffle

Rate me:
Please Sign up or sign in to vote.
4.83/5 (26 votes)
11 Jul 2012CPOL5 min read 56.1K   2.4K   30  
A Metro tile puzzle game
<UserControl
    x:Class="Shuffle.GameTile"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Shuffle"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"	
	d:DesignWidth="130" d:DesignHeight="130" Width="130" Height="130">

	<Grid x:Name="LayoutRoot">
		<Viewbox x:Name="GameTile">
			<Canvas Width="130" Height="130" x:Name="GameTileCanvas">
				<Path x:Name="Rect1" Width="130" Height="129.977" Canvas.Left="0" Canvas.Top="0.0222473" Stretch="Fill" Data="F1 M 3,0.0222473L 127,0.0222473C 128.657,0.0222473 130,1.36545 130,3.02231L 130,127C 130,128.656 128.657,130 127,130L 3,130C 1.34315,130 0,128.656 0,127L 0,3.02231C 0,1.36545 1.34315,0.0222473 3,0.0222473 Z ">
					<Path.Fill>
						<LinearGradientBrush StartPoint="0.769,1.013" EndPoint="0.113,-0.031">
							<GradientStop Color="#FF0E0E0E" Offset="0.00423729"/>
							<GradientStop Color="#FF3B3B3B" Offset="1"/>
						</LinearGradientBrush>
					</Path.Fill>
				</Path>
				<Path x:Name="Rect2" Width="121.37" Height="121.573" Canvas.Left="0.00315857" Canvas.Top="0" Stretch="Fill" Data="F1 M 3.00316,0L 118.373,0C 120.03,0 121.373,1.34326 121.373,3L 121.373,118.573C 121.373,120.23 120.03,121.573 118.373,121.573L 3.00316,121.573C 1.3463,121.573 0.00315857,120.23 0.00315857,118.573L 0.00315857,3C 0.00315857,1.34326 1.3463,0 3.00316,0 Z ">
					<Path.Fill>
						<LinearGradientBrush StartPoint="0.978937,0.00655896" EndPoint="0.00807633,0.982226">
							<GradientStop Color="#00FFFFFF" Offset="0"/>
							<GradientStop Color="#00151515" Offset="0.444915"/>
							<GradientStop Color="#31030303" Offset="0.478814"/>
							<GradientStop Color="#8AFFFFFF" Offset="0.5"/>
							<GradientStop Color="#308E8E8E" Offset="0.525424"/>
							<GradientStop Color="#08000000" Offset="0.563559"/>
							<GradientStop Color="#00000000" Offset="1"/>
						</LinearGradientBrush>
					</Path.Fill>
				</Path>
				<Path x:Name="Rect3" Width="130" Height="129.977" Canvas.Left="0" Canvas.Top="0.0222473" Stretch="Fill" Data="F1 M 3,0.0222473L 127,0.0222473C 128.657,0.0222473 130,1.36545 130,3.02231L 130,127C 130,128.656 128.657,130 127,130L 3,130C 1.34315,130 0,128.656 0,127L 0,3.02231C 0,1.36545 1.34315,0.0222473 3,0.0222473 Z ">
					<Path.Fill>
						<LinearGradientBrush StartPoint="0.00648334,0.020945" EndPoint="0.982222,0.991867">
							<GradientStop Color="#00FFFFFF" Offset="0"/>
							<GradientStop Color="#00FFFFFF" Offset="0.381356"/>
							<GradientStop Color="#52FFFFFF" Offset="0.483051"/>
							<GradientStop Color="#FF444444" Offset="0.5"/>
							<GradientStop Color="#2B000000" Offset="0.542373"/>
							<GradientStop Color="#00FFFFFF" Offset="0.59322"/>
							<GradientStop Color="#00B8B8B8" Offset="1"/>
						</LinearGradientBrush>
					</Path.Fill>
				</Path>
				<Path x:Name="Rect4" Width="124.195" Height="124.178" Canvas.Left="2.905" Canvas.Top="2.913" Stretch="Fill" Data="F1 M 5.90471,3.91348L 124.1,3.91348C 125.204,3.91348 126.1,4.80893 126.1,5.91354L 126.1,124.091C 126.1,125.196 125.204,126.091 124.1,126.091L 5.90471,126.091C 4.80013,126.091 3.90472,125.196 3.90472,124.091L 3.90472,5.91354C 3.90472,4.80893 4.80013,3.91348 5.90471,3.91348 Z ">
					<Path.Fill>
						<LinearGradientBrush EndPoint="1.005,1.007" StartPoint="0.013,0.015">
							<GradientStop Color="#FF353535" Offset="0"/>
							<GradientStop Color="#FF1C1C1C" Offset="1"/>
						</LinearGradientBrush>
					</Path.Fill>
				</Path>
				<Path x:Name="StickerRct" Width="121.707" Height="121.219" Canvas.Left="4.009" Canvas.Top="4.134" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF505050" Data="F1 M 9.02936,6.14771L 120.696,6.14771C 122.353,6.14771 123.696,7.49075 123.696,9.14767L 123.696,120.339C 123.696,121.996 122.353,123.339 120.696,123.339L 9.02936,123.339C 7.37248,123.339 6.02934,121.996 6.02934,120.339L 6.02934,9.14767C 6.02934,7.49075 7.37248,6.14771 9.02936,6.14771 Z ">
					<Path.Fill>
						<LinearGradientBrush EndPoint="0.961,0.997" StartPoint="0.049,0.048">
							<GradientStop Color="#FFF9F9F9" Offset="0"/>
							<GradientStop Color="#FFECECEC" Offset="1"/>
						</LinearGradientBrush>
					</Path.Fill>
				</Path>
                <TextBlock Text="7" TextWrapping="Wrap" Height="130" Width="130" HorizontalAlignment="Stretch" VerticalAlignment="Center" TextAlignment="Center" FontWeight="Bold" FontSize="92" FontFamily="Curlz MT" x:Name="NumberTextBlock" Foreground="#FFB17100"/>
				
				<Path x:Name="Shine" Width="119.674" Height="110.854" Canvas.Left="5.042" Canvas.Top="5.211" Stretch="Fill" Data="F1 M123.216,26.5627 C98.8575,71.2155 60.2542,102.388 6.0163,114.446 L5.9590153,8.5140097 C5.9590153,6.9791897 7.0259119,6.168046 8.5549219,6.168046 L120.61206,6.168046 C122.14106,6.168046 123.16642,6.9791897 123.16642,8.5140097 L123.216,26.5627 z">
					<Path.Fill>
						<LinearGradientBrush StartPoint="0.207,0.061" EndPoint="1.152,-0.165">
							<LinearGradientBrush.RelativeTransform>
								<TransformGroup>
									<SkewTransform CenterX="0.224309" CenterY="-0.0502662" AngleX="3.268" AngleY="0"/>
									<RotateTransform CenterX="0.224309" CenterY="-0.0502662" Angle="68.5277"/>
								</TransformGroup>
							</LinearGradientBrush.RelativeTransform>
							<GradientStop Color="#B8FFFFFF" Offset="0"/>
							<GradientStop Color="#00FFFFFF" Offset="0.779661"/>
						</LinearGradientBrush>
					</Path.Fill>
				</Path>
				<Thumb Width="121.75" Height="122.25" Canvas.Left="4.25" Canvas.Top="3.75" x:Name="GameTileThumb" Opacity="0" />				
			</Canvas>
		</Viewbox>
	</Grid>
</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Kenya Kenya
Experienced C# software developer with a passion for WPF.

Awards,
  • CodeProject MVP 2013
  • CodeProject MVP 2012
  • CodeProject MVP 2021

Comments and Discussions