<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:pingback="http://madskills.com/public/xml/rss/module/pingback/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0">
  <channel>
    <title>Rénald's Blog - Blend 4.0</title>
    <link>http://www.renaldnollet.com/blog/</link>
    <description />
    <language>en-us</language>
    <copyright>Rénald Nollet</copyright>
    <lastBuildDate>Tue, 06 Apr 2010 20:57:17 GMT</lastBuildDate>
    <generator>newtelligence dasBlog 2.3.9074.18820</generator>
    <managingEditor>rno.rno.rno@gmail.com</managingEditor>
    <webMaster>rno.rno.rno@gmail.com</webMaster>
    <item>
      <trackback:ping>http://www.renaldnollet.com/blog/Trackback.aspx?guid=9916b889-beb6-40ee-bd6c-77d2978e6184</trackback:ping>
      <pingback:server>http://www.renaldnollet.com/blog/pingback.aspx</pingback:server>
      <pingback:target>http://www.renaldnollet.com/blog/PermaLink,guid,9916b889-beb6-40ee-bd6c-77d2978e6184.aspx</pingback:target>
      <dc:creator>Rénald Nollet</dc:creator>
      <wfw:comment>http://www.renaldnollet.com/blog/CommentView,guid,9916b889-beb6-40ee-bd6c-77d2978e6184.aspx</wfw:comment>
      <wfw:commentRss>http://www.renaldnollet.com/blog/SyndicationService.asmx/GetEntryCommentsRss?guid=9916b889-beb6-40ee-bd6c-77d2978e6184</wfw:commentRss>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>
Element to element binding was new with Silverlight 3.0. 
</p>
        <p>
To know more about it, I invite you to read <a href="http://www.wintellect.com/CS/blogs/jprosise/archive/2009/03/27/silverlight-3-s-new-element-data-binding.aspx">this
post</a> from Jeff Prosise. 
</p>
        <p>
Some improvements are made in Blend 4 Beta and Visual Studio 2010 RC to improve your
everyday work on this point. 
</p>
        <p>
          <span style="font-size: 14pt;">
            <strong>The old way (Blend 3.0/Visual Studio 2008) </strong>
          </span>
        </p>
        <p>
Suppose that you want to bind the value of a Slider to a TextBlock text : 
</p>
        <p>
          <img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp1.png" alt="" />
        </p>
        <p>
In Blend 3.0, you must select the TextBlock, go into the common properties, select
the Text property and the Data Binding in the contextual menu : 
</p>
        <p>
          <img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp2.png" alt="" />
        </p>
        <p>
Once this is made, you must select the Element Property, browse the three to find
the element and the property to bind to. 
</p>
        <p>
          <img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp3.png" alt="" />
        </p>
        <p>
In Visual Studio 2008, there was nothing to help you to generate this simple XAML
piece: 
</p>
        <p>
          <span style="font-family: Courier New; font-size: 10pt;">
            <span style="color: blue;">&lt;</span>
            <span style="color: rgb(163, 21, 21);">TextBlock</span>
            <span style="color: red;"> Height</span>
            <span style="color: blue;">="32"</span>
            <span style="color: red;"> Margin</span>
            <span style="color: blue;">="8,0,12,8"</span>
            <span style="color: red;"> VerticalAlignment</span>
            <span style="color: blue;">="Bottom"</span>
            <span style="color: red;"> Text</span>
            <span style="color: blue;">="{</span>
            <span style="color: rgb(163, 21, 21);">Binding</span>
            <span style="color: red;"> Value</span>
            <span style="color: blue;">,</span>
            <span style="color: red;"> ElementName</span>
            <span style="color: blue;">=slider,</span>
            <span style="color: red;"> Mode</span>
            <span style="color: blue;">=OneWay}"</span>
            <span style="color: red;">TextWrapping</span>
            <span style="color: blue;">="Wrap"/&gt;</span>
          </span>
        </p>
        <p>
          <span style="font-size: 14pt;">
            <strong>The new way (Blend 4.0 beta/VS 2010 RC) </strong>
          </span>
        </p>
        <p>
In Blend 4.0, you still have the same option. But you also have a more friendly option
with the new "Element Property Binding" option. 
</p>
        <p>
          <img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp4.png" alt="" />
        </p>
        <p>
Choosing that item, you only have to select the element you want to bind to with your
mouse : 
</p>
        <p>
          <img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp5.png" alt="" />
        </p>
        <p>
A new dialog then opens to ask you which property you want to bind to : 
</p>
        <p>
          <img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp6.png" alt="" />
        </p>
        <p>
In Visual Studio 2010 RC, you also now have now the option to work with the properties
window to do the same thing. 
</p>
        <p>
Go to the Text property in the Properties window. Click on the small Value Source
icon : 
</p>
        <p>
          <img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp7.png" alt="" />
        </p>
        <p>
Select "Apply Data Binding" 
</p>
        <p>
          <img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp8.png" alt="" />
          <strong>
          </strong>
        </p>
        <p>
In the dialog that appears, select an ElementName source, choose the slider : 
</p>
        <p>
          <img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp9.png" alt="" />
          <strong>
          </strong>
        </p>
        <p>
Then in the Path, choose the property you want to bind to : 
</p>
        <p>
          <img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp10.png" alt="" />
          <strong>
          </strong>
        </p>
        <img width="0" height="0" src="http://www.renaldnollet.com/blog/aggbug.ashx?id=9916b889-beb6-40ee-bd6c-77d2978e6184" />
      </body>
      <title>Element Property Binding Improvements in Blend 4 Beta and Visual Studio 2010 RC</title>
      <guid isPermaLink="false">http://www.renaldnollet.com/blog/PermaLink,guid,9916b889-beb6-40ee-bd6c-77d2978e6184.aspx</guid>
      <link>http://www.renaldnollet.com/blog/2010/04/06/ElementPropertyBindingImprovementsInBlend4BetaAndVisualStudio2010RC.aspx</link>
      <pubDate>Tue, 06 Apr 2010 20:57:17 GMT</pubDate>
      <description>&lt;p&gt;
Element to element binding was new with Silverlight 3.0. 
&lt;/p&gt;
&lt;p&gt;
To know more about it, I invite you to read &lt;a href="http://www.wintellect.com/CS/blogs/jprosise/archive/2009/03/27/silverlight-3-s-new-element-data-binding.aspx"&gt;this
post&lt;/a&gt; from Jeff Prosise. 
&lt;/p&gt;
&lt;p&gt;
Some improvements are made in Blend 4 Beta and Visual Studio 2010 RC to improve your
everyday work on this point. 
&lt;/p&gt;
&lt;p&gt;
&lt;span style="font-size: 14pt;"&gt;&lt;strong&gt;The old way (Blend 3.0/Visual Studio 2008) &lt;/strong&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;
Suppose that you want to bind the value of a Slider to a TextBlock text : 
&lt;/p&gt;
&lt;p&gt;
&lt;img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp1.png" alt=""&gt; 
&lt;/p&gt;
&lt;p&gt;
In Blend 3.0, you must select the TextBlock, go into the common properties, select
the Text property and the Data Binding in the contextual menu : 
&lt;/p&gt;
&lt;p&gt;
&lt;img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp2.png" alt=""&gt; 
&lt;/p&gt;
&lt;p&gt;
Once this is made, you must select the Element Property, browse the three to find
the element and the property to bind to. 
&lt;/p&gt;
&lt;p&gt;
&lt;img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp3.png" alt=""&gt; 
&lt;/p&gt;
&lt;p&gt;
In Visual Studio 2008, there was nothing to help you to generate this simple XAML
piece: 
&lt;/p&gt;
&lt;p&gt;
&lt;span style="font-family: Courier New; font-size: 10pt;"&gt;&lt;span style="color: blue;"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color: rgb(163, 21, 21);"&gt;TextBlock&lt;/span&gt;&lt;span style="color: red;"&gt; Height&lt;/span&gt;&lt;span style="color: blue;"&gt;="32"&lt;/span&gt;&lt;span style="color: red;"&gt; Margin&lt;/span&gt;&lt;span style="color: blue;"&gt;="8,0,12,8"&lt;/span&gt;&lt;span style="color: red;"&gt; VerticalAlignment&lt;/span&gt;&lt;span style="color: blue;"&gt;="Bottom"&lt;/span&gt;&lt;span style="color: red;"&gt; Text&lt;/span&gt;&lt;span style="color: blue;"&gt;="{&lt;/span&gt;&lt;span style="color: rgb(163, 21, 21);"&gt;Binding&lt;/span&gt;&lt;span style="color: red;"&gt; Value&lt;/span&gt;&lt;span style="color: blue;"&gt;,&lt;/span&gt;&lt;span style="color: red;"&gt; ElementName&lt;/span&gt;&lt;span style="color: blue;"&gt;=slider,&lt;/span&gt;&lt;span style="color: red;"&gt; Mode&lt;/span&gt;&lt;span style="color: blue;"&gt;=OneWay}"&lt;/span&gt; &lt;span style="color: red;"&gt;TextWrapping&lt;/span&gt;&lt;span style="color: blue;"&gt;="Wrap"/&amp;gt;&lt;/span&gt; &lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;span style="font-size: 14pt;"&gt;&lt;strong&gt;The new way (Blend 4.0 beta/VS 2010 RC) &lt;/strong&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;
In Blend 4.0, you still have the same option. But you also have a more friendly option
with the new "Element Property Binding" option. 
&lt;/p&gt;
&lt;p&gt;
&lt;img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp4.png" alt=""&gt; 
&lt;/p&gt;
&lt;p&gt;
Choosing that item, you only have to select the element you want to bind to with your
mouse : 
&lt;/p&gt;
&lt;p&gt;
&lt;img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp5.png" alt=""&gt; 
&lt;/p&gt;
&lt;p&gt;
A new dialog then opens to ask you which property you want to bind to : 
&lt;/p&gt;
&lt;p&gt;
&lt;img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp6.png" alt=""&gt; 
&lt;/p&gt;
&lt;p&gt;
In Visual Studio 2010 RC, you also now have now the option to work with the properties
window to do the same thing. 
&lt;/p&gt;
&lt;p&gt;
Go to the Text property in the Properties window. Click on the small Value Source
icon : 
&lt;/p&gt;
&lt;p&gt;
&lt;img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp7.png" alt=""&gt; 
&lt;/p&gt;
&lt;p&gt;
Select "Apply Data Binding" 
&lt;/p&gt;
&lt;p&gt;
&lt;img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp8.png" alt=""&gt;&lt;strong&gt; &lt;/strong&gt;
&lt;/p&gt;
&lt;p&gt;
In the dialog that appears, select an ElementName source, choose the slider : 
&lt;/p&gt;
&lt;p&gt;
&lt;img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp9.png" alt=""&gt;&lt;strong&gt; &lt;/strong&gt;
&lt;/p&gt;
&lt;p&gt;
Then in the Path, choose the property you want to bind to : 
&lt;/p&gt;
&lt;p&gt;
&lt;img src="http://www.renaldnollet.com/blog/content/binary/041110_2057_ElementProp10.png" alt=""&gt;&lt;strong&gt; &lt;/strong&gt;
&lt;/p&gt;
&lt;img width="0" height="0" src="http://www.renaldnollet.com/blog/aggbug.ashx?id=9916b889-beb6-40ee-bd6c-77d2978e6184" /&gt;</description>
      <comments>http://www.renaldnollet.com/blog/CommentView,guid,9916b889-beb6-40ee-bd6c-77d2978e6184.aspx</comments>
      <category>Blend 4.0</category>
      <category>Visual Studio 2010</category>
    </item>
  </channel>
</rss>