Just my tech blog

Alexander Molodykh

<p>GraphQL services support introspection queries. Unfortunatelly, on production environments introspections usually blocked for sequrity reasons. But I found Deuche Bahn one if you don't have your own to play with https://bahnql.herokuapp.com/graphql</p>
<p><a href="/explore_service.json">Insomnia template for below examples</a></p>
<h2>Check the list of possible queries and mutations.</h2>
<p>
<pre><code>
{
  __schema {
    queryType {
      name
      fields{
        name
      }
    }

    mutationType{
      name
      fields{
        name
      }
    }
  }
}
</code></pre>
</p>
<h3>Or simplified version where common code moved into fragment.</h3>
<p>
<pre><code>
{
  __schema {
    queryType {
      ...TypeFields
    }

    mutationType {                                           
      ...TypeFields
    }
  }
}

fragment TypeFields on __Type
{
  name
  fields {
    name
  }   
}
</code></pre>
</p>

<p>For Deuche Bahn service I got response below. I would not present all the responses - you can download insomnia app and try by yourself.</p>
<p>
<pre><code>
{
	"data": {
		"__schema": {
			"queryType": {
				"name": "Query",
				"fields": [
					{
						"name": "routing"
					},
					{
						"name": "stationWithEvaId"
					},
					{
						"name": "stationWithStationNumber"
					},
					{
						"name": "stationWithRill100"
					},
					{
						"name": "search"
					},
					{
						"name": "nearby"
					},
					{
						"name": "parkingSpace"
					}
				]
			},
			"mutationType": null
		}
	}
}
</code></pre>
</p>

<p>We can see there some queries but no mutations (mutationType: null).
<br/>Keep in mind, some nasty services would throw error for such query (when there are no mutations). Then just remove `mutationType` piece.</p>
<h3>Good services have also documentation. Just add description field into previous fragment.</h3>
<pre><code>
fragment TypeFields on __Type
{
  name
  fields {
    name
    description
  }   
}
</code></pre>
</p>
<h3>Keep in mind, depreacted functions are not shown by default. But we can access them and check the reason it is deprecated.</h3>
<pre><code>
fragment TypeFields on __Type
{
  name
  fields {
    name
    isDeprecated
    deprecationReason
  }   
}
</code></pre>
</p>

<h2>Check the list of possible input parameters.</h2>
<p>
<pre><code>
{
  __schema {
    queryType {
      ...TypeFields
    }

    mutationType {                                           
      ...TypeFields
    }
  }
}

fragment TypeFields on __Type
{
  name
  fields {
    name
    args {
      name
      type {
        name
      }
    defaultValue
    }
  }
}
</code></pre>
</p>

<h2>Check the list of possible output parameters.</h2>
<p>
<pre><code>
{
  __schema {
    queryType {
      ...TypeFields
    }

    mutationType {                                           
      ...TypeFields
    }
  }
}

fragment TypeFields on __Type
{
  name
  fields {
    name
    type {
      ofType {
        name
      }
    }
  }   
}
</code></pre>
</p>

<h2>Check complex types.</h2>
<p>Finally, explore the types. The argument is not always a simple string on number. It is often some complex data structures.</p>
<p>
<pre><code>
{
  __schema {
    queryType {
      ...TypeFields
    }

    mutationType {                                           
      ...TypeFields
    }
  }
}

fragment TypeFields on __Type
{
  name
  fields {
    name
    type {
      ofType {
        name
      }
    }
  }   
}
</code></pre>
</p>
<p>It was just overview of basic GraphQL cases. In real life you can have more interesting cases with inheritance, unions, enums.
<br/>Use insomnia code compleat functionality to explore them all.</p>

Sometimes you need quickly check GraphQL contract and no other tools available. Sometimes you build a script that automatically grabs available resources. Here is the set of useful GraphQL introspection quieries.

Explore GraphQL using introspection queries

<p>Not fully finished. You can contribute if not lazy :-P</p>
<h2>What a WCF is?</h2>
<p>WCF is a framework for building service-oriented applications.</p>

<h2>WCF’s ABС</h2>
<p>In order to access some WCF service you have to define endpoint which contains such key parameters as: Address, Binding and Contract</p>
<p><b>Address</b> can be defined as IP or host name with port and special path. Different kinds of protocols can be used: HTTP, TCP, NamedPipe, Peer2Peer, MSMQ.
<br />&#09;http://host:8080
<br />&#09;net.tcp://host:987/service
<br />&#09;net.pipe//pipe/service
</p>
<p><b>Binding</b> specifies service access mode.
<ul>
<li>Protocols determines the security, reliability, and context flow settings to use for messages that are sent to the endpoint;</li>
<li>Encoding determines the wire encoding to use for messages that are sent to the endpoint, for example, text/XML, binary, or Message Transmission Optimization Mechanism (MTOM);</li>
<li>Transport determines the underlying transport protocol to use when sending messages to the endpoint: HTTP, TCP, NamedPipe, Peer2Peer, MSMQ.</li>
</ul>
</p>
<p>
Supported bindings and its characteristics are shown <a href="http://msdn.microsoft.com/en-us/library/ms730879(v=vs.110).aspx">here</a>
</p>
<p><b>Contract</b> is a way to describe what service does.
<ul>
<li>Srvice contract describes an operations that service can perform.</li>
<li>Data Contract defines which data types are passed to and from the service.</li>
<li>Fault contracts defines errors raised by the service.</li>
<li>Message contracts contains Data like a DatContract, however, it allows to control the structure of SOAP message, e.g. what data should be in header and what in body, or element names. It also makes some restrictions on operation syntax.  <a href="http://msdn.microsoft.com/en-us/library/ms730255(v=vs.110).aspx">MessageContract</a></li>
<li>Collection data contract allows to control xml representation of collections precisely.</li>
</ul>
</p>
<p>

<pre><code>
        [ServiceContract]
        public interface ISomeService
        {
            [OperationContract]
            SomeData SomeOperation(int arg1, string arg2, SomeData arg3);

            [OperationContract]
            SomeMessage SomeOperation(SomeMessage);
        }

        [DataContract]
        public class SomeData
        {
            [DataMember]
            public int SomeId { get; set; }
            [DataMember]
            public List<string> SomeData { get; set; }
        }

        [MessageContract]
        public class SomeMessage
        {
           [MessageHeader(ProtectionLevel=None)] public int arg1;
           [MessageHeader(ProtectionLevel=Sign)] public int arg2;
           [MessageBodyMember(ProtectionLevel=EncryptAndSign)] public string SomeData;
        }

        [CollectionDataContract(
            Name = "CountriesOrRegionsWithCapitals", 
            ItemName = "entry", 
            KeyName = "countryorregion", 
            ValueName = "capital")]
        public class CountriesOrRegionsWithCapitals2 : Dictionary<string, string> { }

</code></pre>
</p>

<h2>Binding</h2>
<p>
Standart bindings support transport protocols: HTTP, TCP, P2P, Named Pipes, MSMQ.
<br />Purpose of using of <b>named pipes</b> is when communication is required between different WCF applications on a single computer, and you want to prevent any communication from another machine.
</p>
<p>
Encoding could be binary, text or MTOM.
</p>
<p>
Security could be on transport or message level or without any.
</p>
<p>Some binding support sessions and some of them are not.</p>
<p>Some binding support transactions and some of them are not.</p>
<p>
The diagram that helps choosing corect binding
<img src="/choose-binding.jpg" />
</p>

<h2>Fault contract</h2>
<p>
Fault contract allows making standartized fault messages.
<pre><code>
        [ServiceContract]
        public interface ISomeService
        {
            [OperationContract]
            [FaultContract(typeof(MathFault))]
            SomeData SomeOperation(int arg1, string arg2, SomeData arg3);
        }

        [DataContract]
        public class SomeFault
        {
            [DataMember]
            public string Cause { get; set; }
            [DataMember]
            public string Resolution { get; set; }
        }
</code></pre>

</p>
<p>Now the SomeOperation body can throw exception this way:
<br />
throw new FaultException<SomeFault>(
<br />&nbsp;&nbsp;&nbsp;&nbsp;new SomeFault { Cause = "Becuse exception ocured", Resolution = "Write better code)."} );
</p>
<p>And the fault can be handled on the client side using:
<br />
catch (FaultException&lt;SomeFault&gt; e).
</p>

<h2>Message Patterns in WCF</h2>
<p><b>Request-Reply Pattern</b> is a syncronous way of comunication. The client thread sends a request to the service and thread hangs while waiting the serice responce.</p>
<p><b>One-Way Message Exchange Pattern</b> is the of comunication "shoot and forget". Client sends a request without waiting response and doesn't have the result of operation or even the information concerning the exceptions that may occur.</p>
<p><b>Duplex or Callback Message Exchange Pattern</b> is an asyncronous way of comunication. Client sends a request without waiting response but having the result of operation as callback from the server side. IOW it is a Request-Reply Pattern without hanging the client thread.</p>
<p>
One-Way pattern can be easily implemented by setting IsOneWay property in your operation contract.
<pre class="prettyprint"><code>
[OperationContract(IsOneWay = true)]
void LogAction(string action);
</code></pre>

</p>
<p>Duplex pattern is a bit harder. You have to have two interfaces, the service interface and the callback interface. Both operations have to marked as OneWay and a service must know the callback contract interface.
<pre><code>
        [ServiceContract(CallbackContract=typeof(ILoggingServiceCallback))]
        public interface ILoggingService
        {
		    [OperationContract(IsOneWay = true)]
            void LogAction(string action);
        }

        public interface ILoggingServiceCallback
        {
            [OperationContract(IsOneWay = true)]
            void LoggingSuccessful(bool someResult);
        }
</code></pre>

</p>
<p>
Looks fine, but who will call LoggingSuccessful? From the service operation body (implementation of LogAction method) will be called the LoggingSuccessfull method manually (OperationContext.Current.GetCallbackChannel<ILoggingServiceCallback>().LoggingSuccessful(true);).
</p>
<p>On the client side you have to implement ILoggingServiceCallback in order to have an ability to execute some logic when service calls back.
</p>

<h2>Sessions</h2>
<p>WCF service session used only to identify the client, an can't store some additional data because service must be stateless by definition.</p>
<p> - Not all the bindings support sessions, so the one that supports has to chosen.</p>
<p> - The <b>InstanceContextMode</b> behavior must be set as "PerSession".</p>
<p> - The service contract's property <b>SessionMode</b> has to be "Allowed" or "Required". If it equals "NotAllowed" the connections that require session will be ignored. In the case of "Required" the session-less connections will be ignored.</p>
<p>In the case of NetTCPBinding and NetNamedPipeBinding, WCF identifies the client by the underlying transport channel. However, the WSHttp uses connection-less http protocol, so in order to identify the client session it adds session id into header.</p>
<p>Operation can be marked as an operation that breaks session. For this purpose OperationContract has the "IsTerminating" property. If it set as True it breaks the session.</p>

<h2>Service Instantiation</h2>
<p>You can control service instance creation mode using <b>InstanceContextMode</b> behavior. The service instance can be one per all requests "Single", in that case the requests will be placed in queue and processed consequently. The instance can be also maiden one per request "PerCall" or one per session "PerSession"</p>
<p>Service instantiation can be managed by OperationContract property <b>IsInitiating</b>. The client can't call operations where IsInitiating = False before the operation that has IsInitiating = True has been executed. 
<br />The parameter IsTerminating = True terminates session, so after that the operation with IsInitiating = True can be called only.</p>
<p>
SessionMode must be "Required"!
<pre><code>
        [OperationContract(IsInitiating = True)]
        bool SignIn()   

        [OperationContract(IsInitiating = false)]
        List<string> GetData()

        [OperationContract(IsInitiating = false)]
        void SetData(string data)

        [OperationContract(IsInitiating = false, IsTerminating = True)]
        bool SignOut()
</code></pre>

</p>

<h2>Transactions</h2>
<p>Not all the standart binding support transactions.</p>
<p>Transaction support provided through DTC (Distributed Transaction Manager).</p>
<p>The transaction necesity can be configured by OperationContract.TransactionFlow property, it could be Allowed, NotAllowed, Mandatory.</p>
<p>Definition "[OperationBehavior(TransactionScopeRequired=true)]" makes metod as one transction even if the metod haven't been put in the transaction scope.
<br />
If the method will be finished without exceptions, the transaction will be commited.
<br />
This behavior could be changed with parameter TransactionAutoComplete.
<br />
If the autocompleation switched of <br />([OperationBehavior(TransactionScopeRequired=true, TransactionAutoComplete=false )]), <br />the transaction must be commited automatically by calling "OperationContext.Current.SetTransactionComplete();"
</p>
<p>
Transaction can be also controlled from the client side, using transaction scope (using(TransactionScope scope = new TransactionScope())). The "scope" variable in that case musn't be sent as operation parameter, it will be picked up automatically. 
</p>
<p><a href="http://www.codeproject.com/Articles/183708/WCF-Transactions-Brief-Introduction">More</a></p>

<h2>Behaviors</h2>
<p></p>
<p></p>
<h2>Streaming</h2>
<p></p>
<p></p>
<p></p>
<h2>Creating REST service in WCF.</h2>
<p>REST service is a service that uses URI and operation name (POST, GET, PUT, DELETE) for getting operation result. It can use any transport protocol, but preferable for this purposes using HTTP becauses it realises CRUD operation on the protocol level and can be acces from any browser.</p>
<p>To make it work, add additional attribute (WebInvoke) to your operation.
<br />
WebInvoke can be configured using various properties, the more interesting ones:
<br />
- UriTemplate - that defines URI wich be used to acces operation and parameters, like: "Customer/{id}";
<br />
- Method - defines CRUD operation, like "POST";
<br />
- ResponseFormat - can be defined output format as an XML or JSON. Response format can be chosen automaticly using WebHttpBehavior.AutomaticFormatSelectionEnabled.
</p>
<p>REST operations will not appear in WSDL specification.</p>

Just a small WCF crib. Quick reminder about key aspects that should save from long reads.

Windows Communication Foundation (WCF) reminder

<p>You can read path markup language description <a href="https://msdn.microsoft.com/en-us/library/cc189041(v=vs.95).aspx">here</a>. </p>

<object id="SilverlightPlugin1" width="600" height="300"
    data="data:application/x-silverlight-2," 
    type="application/x-silverlight-2" >
    <param name="source" value="/xaml-path-markup-test/PathDataTester.xap"/>
    
    <a href="https://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.60310.0" 
        style="text-decoration: none;">
        <img src="https://go.microsoft.com/fwlink/?LinkId=161376" 
            alt="Get Microsoft Silverlight" 
            style="border-style: none"/>
    </a>
</object>

This Path Markup tester for XAML may be useful for developers and those who wants to practice creating different shapes with path.

XAML Path Markup test

<p>Example for <a href="http://donetsk-usergroup.blogspot.com/2012/04/net-user-group.html">.NET UserGroup</a> event.</p>
<p>Making templated XAML control under Windows 8 METRO is similar to one for WPF or Silverlight. So the theory you can read from my <a href="/posts/templated-control-xaml/">previouse article</a>.
<br>Of course there are some differences. The differences I found are described in current article.</p>
<p>As an example, I'll move control described in the <a href="/posts/templated-control-xaml/">previouse article</a> from WPF/Silverlight to Windows 8 METRO application.</p>

<h2>1. We have to define control properties.</h2>
<p>First stage the same:</p>
<pre><code>
	public sealed class PacmanControl : Control
	{
		public static readonly DependencyProperty SizeProperty =
			DependencyProperty.Register("Size", typeof (double), 
				typeof (PacmanControl), new PropertyMetadata(default(double)));

		public double Size
		{
			get { return (double) GetValue(SizeProperty); }
			set { SetValue(SizeProperty, value); }
		}

		public static readonly DependencyProperty MouthAngleProperty =
			DependencyProperty.Register("MouthAngle", typeof (double), 
				typeof (PacmanControl), new PropertyMetadata(default(double)));

		public double MouthAngle
		{
			get { return (double) GetValue(MouthAngleProperty); }
			set { SetValue(MouthAngleProperty, value); }
		}

		public PacmanControl()
		{
			DefaultStyleKey = typeof(PacmanControl);
		}
	}
</code></pre>

<h2>2. We have to create template for this control.</h2>
<p>Second stage the same too:</p>
<pre><code>
	<Style TargetType="Pacman:PacmanControl">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="Pacman:PacmanControl">
					<Grid>
						
						<Path
								x:Name="TopChew"
								VerticalAlignment="Top"
								Data="M0,0 A0.5,0.5,0,1,1,1,0 L0.5,0"
								Fill="Yellow"
								Stretch="Uniform"
								Stroke="Gray"
								StrokeEndLineCap="Round"
								StrokeStartLineCap="Round"
								StrokeThickness="1">
						</Path>
						
						<Path
								x:Name="BotChew"
								VerticalAlignment="Bottom"
								Data="M0,0 A0.5,0.5,0,1,0,1,0 L0.5,0"
								Fill="Yellow"
								Stretch="Uniform"
								Stroke="Gray"
								StrokeEndLineCap="Round"
								StrokeStartLineCap="Round"
								StrokeThickness="1">
						</Path>
						
						<Grid>
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="0.45*" />
								<ColumnDefinition Width="0.1*" />
								<ColumnDefinition Width="0.45*" />
							</Grid.ColumnDefinitions>
							<Grid.RowDefinitions>
								<RowDefinition Height="0.25*" />
								<RowDefinition Height="0.1*" />
								<RowDefinition Height="0.65*" />
							</Grid.RowDefinitions>
							<Ellipse
								Grid.Row="1"
								Grid.Column="1"
								Fill="Black" />
						</Grid>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</code></pre>

<h2>3. Bound control properties in the template.</h2>
<h3>3.1. Size.</h3>
<p>Template bindings are working also:</p>
<pre><code>
	<ControlTemplate TargetType="Pacman:PacmanControl">
		<Grid                                
			Width="{TemplateBinding Size}"
			Height="{TemplateBinding Size}">
			   ...
</code></pre>

<h3>3.1. Rotate with RotateTransform.</h3>
<p>Some transformations in Windows 8 were changed (LayoutTransform changed to RenderTransform). But Rotate transform still present:</p>
<pre><code>
	<Path.RenderTransform>
		<RotateTransform />
	</Path.RenderTransform>
</code></pre>

<p>However, in Windows 8 we can't change RotateTransform using direct access to the class. IOW: when you get topRotator instance, using GetTemplateChild, and change its properties it doesn't make any effect on figure. We have to access parent container
</p>
<p>Next step should look like that:</p>
<pre><code>
    [TemplatePart(Name = TopChew, Type = typeof(Path))]
    [TemplatePart(Name = BotChew, Type = typeof(Path))]
    public class PacmanControl : Control
    {
        private const string BotChew = "BotChew";
        private const string TopChew = "TopChew";

        private Path _botChew;
        private Path _topChew;

        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            _topChew = GetTemplateChild(TopChew) as Path;
            _botChew = GetTemplateChild(BotChew) as Path;
        }
    }
</code></pre>

<p>With property changed:</p>
<pre><code>
    [TemplatePart(Name = TopChew, Type = typeof(Path))]
    [TemplatePart(Name = BotChew, Type = typeof(Path))]
    public class PacmanControl : Control
    {
        private const string BotChew = "BotChew";
        private const string TopChew = "TopChew";

        public static readonly DependencyProperty MouseAngleProperty =
            DependencyProperty.Register("MouthAngle", typeof(double), typeof(PacmanControl),
                new PropertyMetadata(default(double),
                    (o, args) => ((PacmanControl)o).PropertyChangedCallback()));

        public static readonly DependencyProperty SizeProperty =
            DependencyProperty.Register("Size", typeof(double), typeof(PacmanControl),
                new PropertyMetadata(default(double),
                    (o, args) => ((PacmanControl)o).PropertyChangedCallback()));

        private Path _botChew;
        private Path _topChew;

        public double MouthAngle
        {
            get { return (double)GetValue(MouseAngleProperty); }
            set { SetValue(MouseAngleProperty, value); }
        }

        public double Size
        {
            get { return (double)GetValue(SizeProperty); }
            set { SetValue(SizeProperty, value); }
        }

        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            _topChew = GetTemplateChild(TopChew) as Path;
            _botChew = GetTemplateChild(BotChew) as Path;
            PropertyChangedCallback();
        }

        private void PropertyChangedCallback()
        {
            RotateTransform topRotator = null;
            RotateTransform botRotator = null;
            if (_topChew != null)
                topRotator = _topChew.RenderTransform as RotateTransform;
            if (_botChew != null)
                botRotator = _botChew.RenderTransform as RotateTransform;

            if (topRotator != null)
            {
                topRotator.CenterX = Size / 2;
                topRotator.CenterY = Size / 2;
                topRotator.Angle = -MouthAngle;
            }
            if (botRotator != null)
            {
                botRotator.CenterX = Size / 2;
                botRotator.Angle = MouthAngle;
            }
        }
    }
</code></pre>

<h2>4. Reaction on user action.</h2>
<p>Changing visual states still the same:</p>
<pre><code>
	public PacmanControl()
	{
		DefaultStyleKey = typeof(PacmanControl);
		Loaded += (sender, args) => VisualStateManager.GoToState(this, "Normal", true);
		PointerEntered += (sender, args) => VisualStateManager.GoToState(this, "MouseOver", true);
		PointerExited += (sender, args) => VisualStateManager.GoToState(this, "Normal", true);
		PointerPressed += (sender, args) => VisualStateManager.GoToState(this, "Pressed", true);
		PointerReleased += (sender, args) => VisualStateManager.GoToState(this, "Normal", true);
	}
</code></pre>
<pre><code>
    [TemplateVisualState(Name = "Normal")]
    [TemplateVisualState(Name = "MouseOver")]
    [TemplateVisualState(Name = "Pressed")]
</code></pre>

<p>We cant access to topRotator from animation too. You have to access parent container "BotChew" with "(Path.RenderTransform).(RotateTransform.Angle)".</p>

<pre><code>
	<ControlTemplate TargetType="Pacman:PacmanControl">
		<Grid Width="{TemplateBinding Size}" Height="{TemplateBinding Size}">
			<VisualStateManager.VisualStateGroups>
				<VisualStateGroup x:Name="CommonStates">
					<VisualState x:Name="Normal">
						<Storyboard>
							<DoubleAnimation
								Duration="0:0:0.2"
								Storyboard.TargetName="BotChew"
								Storyboard.TargetProperty=
									"(Path.RenderTransform).(RotateTransform.Angle)" />
							<DoubleAnimation
								Duration="0:0:0.2"
								Storyboard.TargetName="TopChew"
								Storyboard.TargetProperty=
									"(Path.RenderTransform).(RotateTransform.Angle)" />
							<ColorAnimation
								Duration="0:0:0.2"
								Storyboard.TargetName="BotChew"
								Storyboard.TargetProperty=
									"(Path.Fill).(SolidColorBrush.Color)" />
							<ColorAnimation
								Duration="0:0:0.2"
								Storyboard.TargetName="TopChew"
								Storyboard.TargetProperty=
									"(Path.Fill).(SolidColorBrush.Color)" />
						</Storyboard>
					</VisualState>
					<VisualState x:Name="MouseOver">
						<Storyboard>
							<DoubleAnimation
								AutoReverse="True"
								Duration="0:0:0.2"
								From="40"
								RepeatBehavior="Forever"
								Storyboard.TargetName="BotChew"
								Storyboard.TargetProperty=
									"(Path.RenderTransform).(RotateTransform.Angle)"
								To="0" />
							<DoubleAnimation
								AutoReverse="True"
								Duration="0:0:0.2"
								From="-40"
								RepeatBehavior="Forever"
								Storyboard.TargetName="TopChew"
								Storyboard.TargetProperty=
									"(Path.RenderTransform).(RotateTransform.Angle)"
								To="0" />
						</Storyboard>
					</VisualState>
					<VisualState x:Name="Pressed">
						<Storyboard>
							<DoubleAnimation
								Duration="0:0:0.5"
								Storyboard.TargetName="BotChew"
								Storyboard.TargetProperty=
									"(Path.RenderTransform).(RotateTransform.Angle)"
								To="0" />
							<DoubleAnimation
								Duration="0:0:0.5"
								Storyboard.TargetName="TopChew"
								Storyboard.TargetProperty=
									"(Path.RenderTransform).(RotateTransform.Angle)"
								To="0" />
							<ColorAnimation
								Duration="0:0:0.5"
								Storyboard.TargetName="BotChew"
								Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
								To="Red" />
							<ColorAnimation
								Duration="0:0:0.5"
								Storyboard.TargetName="TopChew"
								Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
								To="Red" />
						</Storyboard>
					</VisualState>
				</VisualStateGroup>
			</VisualStateManager.VisualStateGroups>
		 ...
</code></pre>

<p>Source code you can find here <a href="https://Prof-MAG@github.com/Prof-MAG/pacman_windows_8.git">Pacman control for windows 8</a></p>

Making templated XAML control under Windows 8 METRO. Difference between WPF and Windows 8. Issue with RotateTransform.

Templated custom controls in XAML (Windows 8)

How to make a templated control. Step by step instructions. Doing ''Packman'' control as example.

Templated custom controls in XAML (WPF, Silverlight)

<p>There is post in future, where the animation is applied to templated control <a href="/posts/templated-control-xaml/">Templated custom controls in XAML</a> and example in git.</p>
<h2>Storyboard</h2>
<p>Storyboard is a controller that manages animation.</p>
<p>Storyboard containns timer that starts ticking after "Storyboard.BeginTime" time, during "Storyboard.Duration" time. 
<br />If you define "AutoReverse" property, animation duration will be doubled automatically.
<br />So if you want to calculate animation duraction, it would be "BeginTime + Duration / SpeedRatio" if "AutoReverse" property is false and "BeginTime + Duration / SpeedRatio * 2" in the other case.</p>
<p>Storyboard also provides some method that allows managing animation (play, stop, seek, get current time and so on)</p>
<p>The "Children" property contains an list of animation describers.</p>

<h2>Animation describers</h2>
<p>Animation describers it's some amount of data that describes how object properties must change their values during animation time.</p>
<p>There are two types of animation in Silverlight: 
<ul>
<li><b>From/To/By animations</b> - this animation types are describing first and last object state for current animation cycle;</li>
<li><b>Key-frame animations</b> - this type of animation are describing object states by each moment of time.</li>
</ul>
</p>
<p>Animation is going acording to the some control property. These properties can be a numeric values, color or point.</p>
<p>Storyboard provides easy way to animate color and motion fluently. It is animation for color, numeric and pont values.</p>
<p>As you might guess Silverlight doesn't provide animation for any other property types because it isn't avident how other propertie types should describe intermediate values.</p>

<h2>Describing "From/To/By" based animation</h2>
<p>There are some classes which are describing animation parameters.
<ul>
<li>Color animation describes - <b>ColorAnimation</b></li>
<li>Numeric values animation - <b>DoubleAnimation</b></li>
<li>Point values (X,Y) - <b>PointAnimation</b></li>
</ul>
</p>
<p>To make animation of this type, you have to define such animation parameters:
<br /> <b>"From"</b> - defines starting property value  <i>(this propertie equals to current value if you not define it)</i>; 
<br /> <b>"To"</b> - final value <i>(equals to value thet was defined in control)</i>;
<br /> <b>"Duration"</b> - the animation duration (length). </p>
<p>Difference in default values between <b>"From"</b> and <b>"To"</b>: Default value for "From" is the value on which last animation was stoped and default value for "To" is the value that was assigned to control. 
<br />For example: if we had defined for control value 40px and last animation has changed it to 20px, our properties for animation would have such default values: From=20px, To=40px. It helps making fluent transition between different animations.</p>
<p>Note: In Windows 8 METRO application the From and To default values are defining only on storyboard loading so sometimes it leads to incorrect animation working (when you are chenging properties in runtime). In  Silverlight and WPF it works fine.</p>
<p>There are some other additional properties that allows you to delay your animation start, define incrementation for current value, make animation reversable and the other stuf you can read about in the documentation.</p>
<p>The record below describes how to animate "Width" propery of "MyAnimatedShape". It animates this property from 100 to 300 with duration in 1 second.</p>
<pre><code>
            <DoubleAnimation 
                Storyboard.TargetName="MyAnimatedShape" 
                Storyboard.TargetProperty="Width"
                From="100"
                To="300" 
                Duration="0:0:1" />
</code></pre>
<p>Color animation are making the same way. Property "To" in this case describes color. But how do we get animation for "Fill" property of circle object if it isn't a color? Fill property is a Brush.
<br />It resolves very easy. We can define property from property in animation TargetProperty (actually we can make property chain with any level of imlicity).
<br />Property in chains splitted by dots, every property in this chain describes with such structure (Class.Property). I.e. to describe "Fill" property of Ellipse type you have to use this (Ellipse.Fill), to describe property "Color" of SolidColorBrush you have to use it (SolidColorBrush.Color) and if you want to make properties chain you have to use such string "(Ellipse.Fill).(SolidColorBrush.Color)". 
<br />You can also use array accessors in this string</p>
<p>Color animation for solid color brush:</p>
<pre><code>
            <ColorAnimation 
                Storyboard.TargetName="MyAnimatedCircle"
                Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
                To="Orange"
                Duration="0:0:1" />
</code></pre>
<p>Color animation for linear gradient brush:</p>
<pre><code>
            <ColorAnimation 
                Storyboard.TargetName="MyAnimatedCircle"
                Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
                To="Orange"
                Duration="0:0:1" />       
</code></pre>

<h2>Describing frame based animations.</h2>
<p>Sometimes you have to make difficult animation, even something like cartoons. In this case you have to use animation based on key-frames. 
<br />Key-frame describes value/state of the object property at the one moment of time. E.g. "Width" property must be set to 100 at 0 second, 300 at 1 second and come back to 100 at 2 second.</p>
<p>This animation is describing same as "From/To/By animations" with only one exception, insted of "From" and "To" values it uses colection of the values and time when this value must be showed, e.g:</p>
<pre><code>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="MyAnimatedCircle" 
                Storyboard.TargetProperty="Width">
                <DiscreteDoubleKeyFrame KeyTime="0" Value="100" />
                <LinearDoubleKeyFrame KeyTime="0:0:1" Value="300" />
                <LinearDoubleKeyFrame KeyTime="0:0:2" Value="100" />                
            </DoubleAnimationUsingKeyFrames>
</code></pre>
<p>This animation doing the same as en animation example for DoubleAnimation described above except returning width value 100 at 2 sec. time.</p>
<p>There are four classes for describing key based animation:
<ul>
<li>Color animation describes - <b>ColorAnimationUsingKeyFrames</b></li>
<li>Numeric values animation - <b>DoubleAnimationUsingKeyFrames</b></li>
<li>Point values (X,Y) - <b>PointAnimationUsingKeyFrames</b></li>
<li>Any object values - <b>ObjectAnimationUsingKeyFrames</b></li>
</ul>
All animation describers except "ObjectAnimationUsingKeyFrames" support fluent animation between frames.
</p>

How to make animation in XAML. Storyboard. Animation based on attribute change. Frame based animation.

Animation in XAML (Silverlight 5, WPF, Windows 8 METRO)

<p>In my team we are using class members ordering according to the StyleCop Rules Documentation.</li></ul></p>

<p>Acording to this documentation:
<ul>
<li>
Within a class, struct, or interface, elements must be positioned in the following order:
<ul>
<li>Constant Fields</li>
<li>Fields</li>
<li>Constructors</li>
<li>Finalizers (Destructors)</li>
<li>Delegates</li>
<li>Events</li>
<li>Enums</li>
<li>Interfaces</li>
<li>Properties</li>
<li>Indexers</li>
<li>Methods</li>
<li>Structs</li>
<li>Classes</li>
</ul>
</li>
<li>
Elements of the same type must be positioned in the following order by access level:
<ul>
<li>public</li>
<li>internal</li>
<li>protected internal</li>
<li>protected</li>
<li>private</li>
</ul>
</li>
<li>
All static elements must be placed above all instance elements of the same type.
</li>
</ul>
</p>

<p>It sometimes annoys teammembers following this rules. So I made special template for ReSharper's CodeCleanup tool that provides automatic members ordering according to the StyleCop Rules Documentation.</p>
<p>I also add ordering by member name inside of the each member type group.</p>
<p>To use this feature you have to: 
<ol>
<li>Go to ReSharper->Options->Languages->C#->TypeMemberLayouts and copy this template to the field;</li>
<li>Go to ReSharper->Options->Tools->Code Cleanup.
<br />Add new rule and sign "Reorder type member". I am also sign "Reformat code", "Arrange 'this' qualifier" and "Optimize using directives".</li>
</ol>
</p>
<p>To run code cleanup you can use ReSharper->Tools=>Cleanup Code or use hot key Ctrl-E, C.</p>
<p>Or you can make full solution cleanup if you left click on solution in the solution explorer window and choice "Cleanup Code".</p>

<pre><code>
<Patterns xmlns="urn:shemas-jetbrains-com:member-reordering-patterns">
  
  <Pattern>
    <Match>
      <Or Weight="100">
        <And>
          <Kind Is="interface"/>
          <Or>
            <HasAttribute CLRName="System.Runtime.InteropServices.InterfaceTypeAttribute"/>
            <HasAttribute CLRName="System.Runtime.InteropServices.ComImport"/>
          </Or>
        </And>
        <HasAttribute CLRName="System.Runtime.InteropServices.StructLayoutAttribute"/>
      </Or>
    </Match>
  </Pattern>
  
  <Pattern RemoveAllRegions="true">
    <Match>
      <And Weight="100">
        <Kind Is="class"/>
        <HasAttribute CLRName="NUnit.Framework.TestFixtureAttribute" Inherit="true"/>
      </And>
    </Match>
    
    <Entry>
      <Match>
        <And>
          <Kind Is="method"/>
          <Or>
            <HasAttribute CLRName="NUnit.Framework.SetUpAttribute" Inherit="true"/>
            <HasAttribute CLRName="NUnit.Framework.TearDownAttribute" Inherit="true"/>
            <HasAttribute CLRName="NUnit.Framework.FixtureSetUpAttribute" Inherit="true"/>
            <HasAttribute CLRName="NUnit.Framework.FixtureTearDownAttribute" Inherit="true"/>
          </Or>
        </And>
      </Match>
    </Entry>
    
    <Entry/>
    
    <Entry>
      <Match>
        <And Weight="100">
          <Kind Is="method"/>
          <HasAttribute CLRName="NUnit.Framework.TestAttribute" Inherit="false"/>
        </And>
      </Match>
      <Sort>
        <Name/>
      </Sort>
    </Entry>
  </Pattern>
  
  <Pattern>
    
    <Entry>
      <Match>
          <Kind Is="constant"/>
      </Match>
      <Sort>
        <Access Order="public internal protected-internal protected private"/>
        <Readonly/>
        <Static/>
        <Name/>
      </Sort>
    </Entry>
    
    <Entry>
      <Match>
          <Kind Is="field"/>
      </Match>
      <Sort>
        <Access Order="public internal protected-internal protected private"/>
        <Readonly/>
        <Static/>
        <Name/>
      </Sort>
    </Entry>
    
    <Entry>
      <Match>
        <Kind Is="constructor"/>
      </Match>
      <Sort>
        <Static/>
        <Access Order="public internal protected-internal protected private"/>
      </Sort>
    </Entry>
    
    <Entry>
      <Match>
        <Kind Is="destructor"/>
      </Match>
      <Sort>
        <Static/>
        <Access Order="public internal protected-internal protected private"/>
      </Sort>
    </Entry>
    
    <Entry>
      <Match>
          <Kind Is="delegate"/>
      </Match>
      <Sort>
        <Access Order="public internal protected-internal protected private"/>
        <Readonly/>
        <Static/>
        <Name/>
      </Sort>
    </Entry>
    
    <Entry>
      <Match>
        <Kind Is="event"/>
      </Match>
      <Sort>
        <Access Order="public internal protected-internal protected private"/>
        <Readonly/>
        <Static/>
        <Name/>
      </Sort>
    </Entry>
    
    <Entry>
      <Match>
        <Kind Is="enum"/>
      </Match>
      <Sort>
        <Access Order="public internal protected-internal protected private"/>
        <Readonly/>
        <Static/>
        <Name/>
      </Sort>
    </Entry>
    
    <Entry>
      <Match>
        <And>
          <Kind Is="property"/>
          <Not>
            <Kind Is="indexer"/>
          </Not>
        </And>
      </Match>
      <Sort>
        <Access Order="public internal protected-internal protected private"/>
        <Static/>
        <Name/>
      </Sort>
    </Entry>
    
    <Entry>
      <Match>
        <Kind Is="indexer"/>
      </Match>
      <Sort>
        <Access Order="public internal protected-internal protected private"/>
        <Static/>
        <Name/>
      </Sort>
    </Entry>
    
    <Entry>
      <Match>
        <And>
          <Or>
            <Kind Is="method"/>
            <Kind Is="operator"/>
            <HandlesEvent/>
          </Or>
          <Not>
            <Kind Is="destructor"/>
          </Not>
        </And>
      </Match>
      <Sort>
        <Access Order="public internal protected-internal protected private"/>
        <Static/>
        <Abstract/>
        <Virtual/>
        <Override/>
        <Name/>
      </Sort>
    </Entry>
    
    <Entry/>
    
    <Entry>
      <Match>
        <Kind Is="type"/>
      </Match>
      <Sort>
        <Access Order="public internal protected-internal protected private"/>
        <Static/>
        <Abstract/>
        <Virtual/>
        <Override/>
        <Name/>
      </Sort>
    </Entry>
  </Pattern>
</Patterns>
</code></pre>

If you need to orger your class members, following you copmany StyleCop rules, you can use ReSharper (Visual Studio plug-in) to achive that.

Order class members using ReSharper


<p>As example I&#39;ve create table sorter plugin.</p>

<h2>1. Create an empty jQuery plugin</h2>
<p>It is the jQuery plugin's template. </p>
<pre><code>
(function($) {
 $.fn.sort_by_mag = function() {
     // constructor
    }
})(jQuery);
</code></pre>
<p>Its called "sort_by_mag", as you might to guess.</p>

<h2>2. Attach jQuery plugin.</h2>
<p>Firstable you need to add the link to jQuery library.</p>
<p>To get the most recent version of jQuery in the 1.*.* family, use the following link:</p>
<pre><code>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
</code></pre>
<p>Then we need to refer to our plugin:</p>
<pre><code>
<script src="jquery.sort_by_mag.js"></script>
</code></pre>
<p>And attach our plugin to table that we are try to sort (with id = "#mag_sort").</p>
<p>You should be add plugins when the page is always loaded! That's why I use($(document).ready)</p>
<pre><code>
$(document).ready(function () {
       $('#mag_sort').sort_by_mag();
});
</code></pre>

<h2>3. Add some simple action to constructor</h2>
<p>Select all first row cells in table for sorting (&#39;tr:first th&#39;) and put some simple action on click. Let&#39;s show a simple message with number of column that was clicked. </p>
<pre><code>
var table_sort = this;
table_sort.find('tr:first td').each(function(i,element){
 $(this).bind('click',function(event){
  alert("You click at table number " + i + ", elment = " + element);
 });
});
</code></pre>
<p>Now you can see that is really works: <a href="/jquery_plugin/sample1/index.html">See result</a>.</p>

<h2>4. Let's add some sort action</h2>
<p>Let's change the action that we are hang to the table header to more interest.</p>
<p>Here we add ascending sort for our columns (fields.sort(cmp_asc)), and append it to the table.</p>
<pre><code>
// take array of rows (without first row becaus we don't need to sort header)
var fields = table_sort.find('tr:gt(0)');
       
// compare jQuery objects by column i ascending 
function cmp_asc(a, b) {
 a = jQuery(a).find('td:eq('+i+')').text();
 b = jQuery(b).find('td:eq('+i+')').text();
 if (a < b) return -1;
 if (a > b) return 1;
 return 0;
}; 
       
// take array of rows (without first row)
var fields = table_sort.find('tr:gt(0)');
       
// sort this array
fields.sort(cmp_asc);    
       
// append rows
var ROW_COUNT = fields.length;      
for(var j = 0; j < ROW_COUNT; j++)
{    
 table_sort.append(fields[j]);
}
</code></pre>
<p><a href="/jquery_plugin/sample2/index.html">See result</a></p>

<h2>5. Add reversive sort</h2>
<p>Finally we need to add a reversive sorting feature, and other sweet things)</p>
<p><a href="/jquery_plugin/index.html">See result</a></p>

It is a quick step by step guide that show's how to create a simple jQuery plugin.

How to write jQuery plugin

<p>P.S.: Standart IPAddress class has "Adress" property for getting IP as "long" that is marked as deprecated so I relize it by my self.</p>

<pre><code>

        static class IPOperations
        {
            /// <summary>
            /// Convert IP address to unsigned int value
            /// </summary>
            public static UInt32 ToUInt(System.Net.IPAddress ip)
            {
                return ToUInt(ip.GetAddressBytes());
            }

            /// <summary>
            /// Convert IP address to unsigned int value
            /// </summary>
            public static UInt32 ToUInt(byte[] bip)
            {
                if (bip == null) throw new ArgumentNullException();
                if (bip.Length < 4) 
                    throw new FormatException(
                        "IPOperations: parameter byte[] ip must have 4 or more elements.");
                return (uint)(bip[3] | (bip[2] << 8) | (bip[1] << 16) | (bip[0] << 24));
            }

            /// <summary>
            /// Convert IP address to unsigned int value
            /// </summary>
            /// <exception cref="System.ArgumentNullException"></exception>
            /// <exception cref="System.FormatException"></exception>
            public static UInt32 ToUInt(string ip)
            {
                return ToUInt(System.Net.IPAddress.Parse(ip));
            }

            /// <summary>
            /// Convert IP to string
            /// </summary>
            public static string ToString(long ip)
            {
                return ToString(ToByte((uint)ip));
            }

            /// <summary>
            /// Convert IP to string
            /// </summary>
            public static string ToString(byte[] ip)
            {
                if (ip == null) throw new ArgumentNullException();
                if (ip.Length < 4) 
                    throw new FormatException(
                        "IPOperations: parameter byte[] ip must have 4 or more elements.");
                return ip[0] + "." + ip[1] + "." + ip[2] + "." + ip[3];
            }

            /// <summary>
            /// Convert IP to byte array
            /// </summary>
            public static byte[] ToByte(UInt32 ip)
            {
                byte[] res = new byte[4];
                res[3] = (byte)ip;
                ip = ip >> 8;
                res[2] = (byte)ip;
                ip = ip >> 8;
                res[1] = (byte)ip;
                ip = ip >> 8;
                res[0] = (byte)ip;
                return res;
            }

            /// <summary>
            /// Increment ip address
            /// </summary>
            /// <param name="ip">ip
            public static System.Net.IPAddress Inc(System.Net.IPAddress ip)
            {
                return new System.Net.IPAddress(ToUInt(ip) + 1);
            }
            public static System.Net.IPAddress Inc(long ip)
            {
                return new System.Net.IPAddress(ip + 1);
            }

            /// <summary>
            /// subtraction ip's
            /// </summary>
            /// <param name="ip1">minuend
            /// <param name="ip2">subtrahend
            /// <returns> = ip1 - ip2</returns>
            public static long Sub(System.Net.IPAddress ip1, System.Net.IPAddress ip2)
            {
                return ToUInt(ip1) - ToUInt(ip2);
            }
        }
</code></pre>


This class implements some operations with IP adress. For example '192.168.0.255' + 1 = '192.168.1.0'.

Helper for IPv4 operations

<ul>
<li>Use the override modifier when the base entity is marked as abstract, virtual or override.</li>
<li>An interface contains only the signatures of methods, properties, events or indexers. All members are public by default.</li>
<li>When you inherit some class, the base constructor will be called in automatic mode if its without parameters, otherwise it shows you an error because compiler don&#39;t know what parameters sould be placed to the base class constructor.</li>
<li>When you cover some method, field or property it can be accessed throught the base class.</li>
</ul>


<pre><code>
using System;

namespace ConsoleApplication1
{
	 interface IClass
	 {
		  // can&#39;t have fields        
		  void InterfaceMethod();
	 }

	 abstract class AClass
	 {
		  public int AbstractInt;

		  protected AClass() // modifier is required
		  {
			  AbstractInt = 1;
			  Console.WriteLine("  -  aClass: constructor: " + AbstractInt);
		  }

		  abstract public void AbstractMethod(); // implementation is prohibited

		  virtual public void VirtualMethod() //must be implemented
		  {
			  Console.WriteLine("  -  aClass: virtualMethod: " + AbstractInt);
		  }

		  public void NotAbstractInAbstractMethod()
		  {
			  Console.WriteLine("  -  aClass: notAbstractInAbstractMethod: " + AbstractInt);
		  }
	 }

	 class EClass : AClass, IClass
	 {
		  public new int AbstractInt = 2; // Note! It is not override old field, it also cover it.
		  public EClass()
			  : base() // Even if you doesn&#39;t write it, the old default constructor will be called. 
		  {
			  AbstractInt = 3;
			  Console.WriteLine("  -  eClass: constructor: " + AbstractInt);
		  }

		  public override void AbstractMethod() // abstract methods must be overrided
		  {
			  Console.WriteLine("  -  eClass: abstractMethod: " + AbstractInt);
		  }

		  public override void VirtualMethod()
		  // One may not implement. Without override modifier it is also covering 
		  // and base method can be accessed throught the base class
		  {
			  base.VirtualMethod();
			  Console.WriteLine("  -  eClass: virtualMethod: " + AbstractInt);
		  }

		  public new void NotAbstractInAbstractMethod() 
		  // Method also covered, so the base method can be accessed throught the base class
		  {
			  Console.WriteLine("  -  eClass: notAbstractInAbstractMethod: " + AbstractInt);
		  }

		   public void InterfaceMethod()
		  // Can&#39;t escape from implementation.
		  {
			  Console.WriteLine("  -  eClass: interfaceMethod: " + AbstractInt);
		  }
	 }

	 class Program
	 {
		  static void Main()
		  {
			  Console.WriteLine("eClass e = new eClass():  ");
			  EClass e = new EClass();
			  AClass a = e;
			  Console.WriteLine("e.abstractMethod():  ");
			  e.AbstractMethod();
			  Console.WriteLine("e.e.notAbstractInAbstractMethod():  ");
			  e.NotAbstractInAbstractMethod();
			  Console.WriteLine("e.virtualMethod():  ");
			  e.VirtualMethod();
			  Console.WriteLine("e.interfaceMethod():  ");
			  e.InterfaceMethod();
			  Console.WriteLine("a.abstractMethod():  ");
			  a.AbstractMethod();
			  Console.WriteLine("a.notAbstractInAbstractMethod():  ");
			  a.NotAbstractInAbstractMethod();
			  Console.WriteLine("a.virtualMethod():  ");
			  a.VirtualMethod();
			  Console.ReadKey();
			  return;
		  }
	 }
}
 </code></pre>

<p>Output:</p>

<pre><code>
	eClass e = new eClass():
	  -  aClass: constructor: 1
	  -  eClass: constructor: 3
	e.abstractMethod():
	  -  eClass: abstractMethod: 3
	e.e.notAbstractInAbstractMethod():
	  -  eClass: notAbstractInAbstractMethod: 3
	e.virtualMethod():
	  -  aClass: virtualMethod: 1
	  -  eClass: virtualMethod: 3
	e.interfaceMethod():
	  -  eClass: interfaceMethod: 3
	a.abstractMethod():
	  -  eClass: abstractMethod: 3
	a.notAbstractInAbstractMethod():
	  -  aClass: notAbstractInAbstractMethod: 1
	a.virtualMethod():
	  -  aClass: virtualMethod: 1
	  -  eClass: virtualMethod: 3
 </code></pre>


This code demonstate's some important principles in inheritance that beginners often forget.