Archive for category XAML

This past week, I was helping out at a “hack day” at the Microsoft offices in Downers Grove, IL. One of the attendees had an interesting problem: he wanted the contents of his list to dynamically expand to take up the full width of the ListView. The type of item doesn’t matter, so I picked something with 4 properties for the display that would allow me to exercise core of the issue and nothing more.

So far, so good, but when the app displayed the collection of Class1 objects, we saw that the ItemTemplate didn’t extend across the screen.

This little item did not do what we wanted it to do, so we thought about what the problem was. A Grid wants to expand to the size of it’s surroundings when not given a limit. The container it was given was one where it was told to size to as big as it needed and no more. As a result, the Grid reported back that it needed to be big enough for the 4 TextBlocks and then was only given that space. Was there a way to go bigger? We looked at the properties and saw one on the ListView called HorizontalContentAlignment, which appeared to let the items align Center, Left, Right, or to Stretch. Stretch usually does good things, so we tried that:

<ListView Name="ListView1" HorizontalContentAlignment="Stretch">

The end result: no change. The screen looked the same as before. At that point, we remembered that we could set the width of the grid manually. Setting the width manually, we were able to achieve the effect, but would still lose any adaptive layout as the screen geometry changed. Still, knowing that the Grid Width property would solve the problem, we only had to find a way to bind the Width of the Grid to the Width of the ListView. On the Grid, we tried binding its width to the Width of ListView 1:

<Grid Width="{Binding ElementName=ListView1, Path=Width}">

Again, no real change. So, we went a bit further. We remembered that we could hook to the SizeChanged event on the ListView and then change a property on the page to feed things. For properties that can be linked to, one can use a combination of DependencyProperty and a value to keep things in sync or implement INotifyPropertyChanged and bind to that value. We tried both paths and found that the DependencyProperty was less code and easier to understand for a control. For this, we added the following to the Page code: