<?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>r2 musings - rants, raves, and research (mostly on .NET topics) from rik robinson - UI Rant</title>
    <link>http://www.r2musings.com/</link>
    <description>rants, raves, and research (mostly on .NET topics) from rik robinson</description>
    <language>en-us</language>
    <copyright>Rik Robinson</copyright>
    <lastBuildDate>Fri, 06 Feb 2009 02:15:10 GMT</lastBuildDate>
    <generator>newtelligence dasBlog 2.0.7226.0</generator>
    <managingEditor>r2@r2musings.com</managingEditor>
    <webMaster>r2@r2musings.com</webMaster>
    <item>
      <trackback:ping>http://www.r2musings.com/Trackback.aspx?guid=fde23620-55e9-427b-b2fd-f95ab209fcee</trackback:ping>
      <pingback:server>http://www.r2musings.com/pingback.aspx</pingback:server>
      <pingback:target>http://www.r2musings.com/PermaLink,guid,fde23620-55e9-427b-b2fd-f95ab209fcee.aspx</pingback:target>
      <dc:creator>Rik Robinson</dc:creator>
      <wfw:comment>http://www.r2musings.com/CommentView,guid,fde23620-55e9-427b-b2fd-f95ab209fcee.aspx</wfw:comment>
      <wfw:commentRss>http://www.r2musings.com/SyndicationService.asmx/GetEntryCommentsRss?guid=fde23620-55e9-427b-b2fd-f95ab209fcee</wfw:commentRss>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>
If you've used the the Silverlight 2 DataGrid, you've no doubt seen this:
</p>
        <p>
          <a href="http://www.r2musings.com/images/blogged/AnotherAnnoyingUIRant1_113D2/silverlightDatagrid01.jpg">
            <img style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" height="195" alt="silverlightDatagrid01" src="http://www.r2musings.com/images/blogged/AnotherAnnoyingUIRant1_113D2/silverlightDatagrid01_thumb.jpg" width="330" border="0" />
          </a>
        </p>
        <p>
I really hate when this happens!  I've seen several forum discussions where folks
were looking to get rid of this nastiness, so I know I'm not the only one losing sleep
over it.  I haven't come across a solution in anything I've seen and so now that
I have one, I thought I'd share it.  
</p>
        <p>
I ran into this a few weeks back and tried most of the obvious things with defining
the DataGridColumns myself rather than auto-generating them.  In these defined
DataGridColumns, I tried setting the Width of the last column to "*" just like you
would a standard Grid.ColumnDefinition if you wanted to have it take up the remainder
of the space.  This did nothing more than invite my buddy, AG_E_PARSER_BAD_PROPERTY,
to show up...again.  It appears that star-sizing isn't yet implemented for DataGridColumn
derivatives.  
</p>
        <p>
This morning I was finally able to grab a few minutes to dive into DataGrid and find
out what I could do about this.  I decided to create an ExtendedDataGrid and
add a LastColumnFill DependencyProperty similar to way the DockPanel has a LastChildFill.
Most of the work is happening in this method which is called if the LastColumnFill
is true:
</p>
        <p>
private void AdjustLastColumnWidth(Size finalSize) 
<br />
{ 
<br />
    // get the Vertical ScrollBar 
<br />
    ScrollBar scrollBar = this.GetTemplateChild("VerticalScrollbar")
as ScrollBar; 
</p>
        <p>
    // compute the width to allow for the scrollbar based on it's visibility. 
<br />
    double scrollBarWidthAllowance = (scrollBar != null &amp;&amp;
scrollBar.Visibility == Visibility.Visible) ? scrollBar.ActualWidth + 2 : 2; 
</p>
        <p>
    // compute the width of all the columns excluding the last one 
<br />
    var widthOfAllButLastColumn = this.Columns 
<br />
                  
.TakeWhile(c =&gt; c != Columns.Last() &amp;&amp; 
<br />
                                           
c.Visibility == Visibility.Visible) 
<br />
                  
.Sum(c =&gt; c.ActualWidth); 
</p>
        <p>
     // set the last column width     
<br />
     this.Columns.Last().Width = new DataGridLength(finalSize.Width
- widthOfAllButLastColumn - scrollBarWidthAllowance); 
<br />
}
</p>
        <p>
This is the result:
</p>
        <p>
          <a href="http://www.r2musings.com/images/blogged/AnotherAnnoyingUIRant1_113D2/silverlightDatagrid02.jpg">
            <img style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" height="199" alt="silverlightDatagrid02" src="http://www.r2musings.com/images/blogged/AnotherAnnoyingUIRant1_113D2/silverlightDatagrid02_thumb.jpg" width="331" border="0" />
          </a>
        </p>
        <p>
Much better!  The <a href="http://silverlight.r2musings.com/LastColumnFillDataGrid/" target="_blank">live
demo</a> shows it with and without a vertical scrollbar.  Note that it also handles
auto-generated DataGridColumns if that's your thang.
</p>
        <p>
Here's the <a href="http://silverlight.r2musings.com/LastColumnFillDataGrid/" target="_blank">live
demo</a>.
</p>
        <p>
Here's the <a href="http://www.r2musings.com/downloads/LastColumnFillDataGrid.zip" target="_blank">code</a>.
</p>
        <img width="0" height="0" src="http://www.r2musings.com/aggbug.ashx?id=fde23620-55e9-427b-b2fd-f95ab209fcee" />
      </body>
      <title>Silverlight UI Rant #1 - DataGrid Last Column Fill</title>
      <guid isPermaLink="false">http://www.r2musings.com/PermaLink,guid,fde23620-55e9-427b-b2fd-f95ab209fcee.aspx</guid>
      <link>http://www.r2musings.com/2009/02/06/SilverlightUIRant1DataGridLastColumnFill.aspx</link>
      <pubDate>Fri, 06 Feb 2009 02:15:10 GMT</pubDate>
      <description>&lt;p&gt;
If you've used the the Silverlight 2 DataGrid, you've no doubt seen this:
&lt;/p&gt;
&lt;p&gt;
&lt;a href="http://www.r2musings.com/images/blogged/AnotherAnnoyingUIRant1_113D2/silverlightDatagrid01.jpg"&gt;&lt;img style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" height=195 alt=silverlightDatagrid01 src="http://www.r2musings.com/images/blogged/AnotherAnnoyingUIRant1_113D2/silverlightDatagrid01_thumb.jpg" width=330 border=0&gt;&lt;/a&gt; 
&lt;/p&gt;
&lt;p&gt;
I really hate when this happens!&amp;nbsp; I've seen several forum discussions where folks
were looking to get rid of this nastiness, so I know I'm not the only one losing sleep
over it.&amp;nbsp; I haven't come across a solution in anything I've seen and so now that
I have one, I thought I'd share it.&amp;nbsp; 
&lt;/p&gt;
&lt;p&gt;
I ran into this a few weeks back and tried most of the obvious things with defining
the DataGridColumns myself rather than auto-generating them.&amp;nbsp; In these defined
DataGridColumns, I tried setting the Width of the last column to "*" just like you
would a standard Grid.ColumnDefinition if you wanted to have it take up the remainder
of the space.&amp;nbsp; This did nothing more than invite my buddy, AG_E_PARSER_BAD_PROPERTY,
to show up...again.&amp;nbsp; It appears that star-sizing isn't yet implemented for DataGridColumn
derivatives.&amp;nbsp; 
&lt;/p&gt;
&lt;p&gt;
This morning I was finally able to grab a few minutes to dive into DataGrid and find
out what I could do about this.&amp;nbsp; I decided to create an ExtendedDataGrid and
add a LastColumnFill DependencyProperty similar to way the DockPanel has a LastChildFill.
Most of the work is happening in this method which is called if the LastColumnFill
is true:
&lt;/p&gt;
&lt;p&gt;
private void AdjustLastColumnWidth(Size finalSize) 
&lt;br&gt;
{ 
&lt;br&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp; // get the Vertical ScrollBar 
&lt;br&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp; ScrollBar scrollBar = this.GetTemplateChild("VerticalScrollbar")
as ScrollBar; 
&lt;/p&gt;
&lt;p&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp; // compute the width to allow for the scrollbar based on it's visibility. 
&lt;br&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp; double scrollBarWidthAllowance = (scrollBar != null &amp;amp;&amp;amp;
scrollBar.Visibility == Visibility.Visible) ? scrollBar.ActualWidth + 2 : 2; 
&lt;/p&gt;
&lt;p&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp; // compute the width of all the columns excluding the last one 
&lt;br&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp; var widthOfAllButLastColumn = this.Columns 
&lt;br&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
.TakeWhile(c =&amp;gt; c != Columns.Last() &amp;amp;&amp;amp; 
&lt;br&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
c.Visibility == Visibility.Visible) 
&lt;br&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
.Sum(c =&amp;gt; c.ActualWidth); 
&lt;/p&gt;
&lt;p&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; // set the last column width&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 
&lt;br&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; this.Columns.Last().Width = new DataGridLength(finalSize.Width
- widthOfAllButLastColumn - scrollBarWidthAllowance); 
&lt;br&gt;
}
&lt;/p&gt;
&lt;p&gt;
This is the result:
&lt;/p&gt;
&lt;p&gt;
&lt;a href="http://www.r2musings.com/images/blogged/AnotherAnnoyingUIRant1_113D2/silverlightDatagrid02.jpg"&gt;&lt;img style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" height=199 alt=silverlightDatagrid02 src="http://www.r2musings.com/images/blogged/AnotherAnnoyingUIRant1_113D2/silverlightDatagrid02_thumb.jpg" width=331 border=0&gt;&lt;/a&gt; 
&lt;/p&gt;
&lt;p&gt;
Much better!&amp;nbsp; The &lt;a href="http://silverlight.r2musings.com/LastColumnFillDataGrid/" target=_blank&gt;live
demo&lt;/a&gt; shows it with and without a vertical scrollbar.&amp;nbsp; Note that it also handles
auto-generated DataGridColumns if that's your thang.
&lt;/p&gt;
&lt;p&gt;
Here's the &lt;a href="http://silverlight.r2musings.com/LastColumnFillDataGrid/" target=_blank&gt;live
demo&lt;/a&gt;.
&lt;/p&gt;
&lt;p&gt;
Here's the &lt;a href="http://www.r2musings.com/downloads/LastColumnFillDataGrid.zip" target=_blank&gt;code&lt;/a&gt;.
&lt;/p&gt;
&lt;img width="0" height="0" src="http://www.r2musings.com/aggbug.ashx?id=fde23620-55e9-427b-b2fd-f95ab209fcee" /&gt;</description>
      <comments>http://www.r2musings.com/CommentView,guid,fde23620-55e9-427b-b2fd-f95ab209fcee.aspx</comments>
      <category>Silverlight</category>
      <category>Silverlight 2</category>
      <category>UI and Usability</category>
      <category>UI Rant</category>
    </item>
  </channel>
</rss>