CellTemplate in GridView

[Mikey_H]

I have created a CellTemplate for use in my ListView(GridView) without the CellTemplate the layout is how it should be, but when the custom CellTemplate is used it causes the ListView to stretch to the maximum size allowed. What in my CellTemplate would cause this?

<ListView ItemsSource="{Binding Path=HandsCollection, RelativeSource={RelativeSource AncestorType=Window}}" VerticalAlignment="Center" HorizontalAlignment="Center" SelectionMode="Single">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView>
<GridViewColumn Header="Date"
DisplayMemberBinding="{Binding DateTime}"/>
<GridViewColumn Header="Time"
DisplayMemberBinding="{Binding DateTime.TimeOfDay}"/>
<GridViewColumn Header="Game"
DisplayMemberBinding="{Binding Path=HandType, Converter={StaticResource HandTypeToString}}"/>
<GridViewColumn Header="Starting Hand">
<GridViewColumn.CellTemplate>
<DataTemplate>
<UserInterface_Elements_Cards:UICardArray ItemsSource="{Binding StartingHand}"
DisplayType="{Binding Path=HandType, Converter={StaticResource HandTypeToDisplayType}}"
HorizontalAlignment="Center"
CardWidth="18" CardHeight="25"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>

Screenshot The listview should be centered and wrapping the content. Also note cutting off of content in 'Game' column. Any help is appreciated. -Mikey

[Mark Salsbery]

What happens when you comment-out the ItemContainerStyle? What is "UserInterface_Elements_Cards:UICardArray"? What is its ActualWidth at runtime?

Mark Salsbery Microsoft MVP - Visual C++ :java:

[Mikey_H]

Removing ItemContainerStyle only causes the content of the cell to be aligned to the left. UserInterface_Elements_Cards:UICardArray is a custom ItemsControl used to display a collection of

public struct Card
{
public CardRank Rank;
public CardSuit Suit;
}

public enum CardRank
{ Deuce, Three, Four, etc... }
public enum CardSuit
{ Spades, Hearts, Diamonds, Clubs }

in three different styles as seen in the screenshot. The ItemsTemplate for the ItemsControl has fixed width and height as default, and can be changed with CardWidth, CardHeight properties on UICardArray. The Items are presented in a StackPanel. The ActualWidth/Height of ListView is 765.18, 362. This does not change when expanding the window, only when contracting it. (The height stretches to the full height and most of the width of the window on startup, but then remains this size).

modified on Wednesday, November 11, 2009 10:16 PM

[Mark Salsbery]

Mikey_H wrote:

The ActualWidth/Height of ListView is 765.18, 362.

I meant what is the ActualWidth of the UserInterface_Elements_Cards:UICardArray element(s) at runtime. It appears at least one of them is larger than the cards visible in the screenshot, because the columns should auto size to the largest item in the column since no width is set on the columns.

Mark Salsbery Microsoft MVP - Visual C++ :java:

[Mikey_H]

Ok, I'm not sure how to get the ActualWidth/Height of a CellTemplate item, but adding Width and Height properties has altered the layout (it still cuts off the 'Game' column). I didn't think it would be the control itself as the rows didnt appear to be stretched vertically, and the SelectedItem background made it appear it was wrapping the content (vertically at least). Setting the width and height properties of the control in the CellTemplate is not an ideal option here, I would like the control to autosize. Below is the ControlTemplate for UICardArray. I have tried playing with Horizontal/VerticalAlignment and Width/Height with no success. I have some code behind that sets margins on Items that is called in MeasureOverride before calling base.MeasureOverride. I had disabled this, which has also caused no difference.

<Style x:Key="{x:Type c:UICardArray}" TargetType="{x:Type c:UICardArray}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type c:UICardArray}">
<StackPanel x:Name="PART_StackPanel"
Orientation="Horizontal"
IsItemsHost="True"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type d:Card}">
<c:UICard CardRank="{Binding Path=Rank}"
CardSuit="{Binding Path=Suit}"
Width="{Binding Path=CardWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type c:UICardArray}}}"
Height="{Binding Path=CardHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type c:UICardArray}}}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>

[Mark Salsbery]

I still can't tell what's going on based on the code you've shown so far. I stripped down a ListView similar to yours - no code behind, no external styles or templates, and the last column is an ItemsControl of a specific size. I am unable to reproduce the problems, including the clipped column. What do you get with this:

<ListView x:Name="ListView1" Width="400" Height="200">
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.View>
        <GridView AllowsColumnReorder="True" >
            <GridViewColumn Header="Date"
                  DisplayMemberBinding="{Binding DateTime}"/>
            <GridViewColumn Header="Time"
                  DisplayMemberBinding="{Binding DateTime.TimeOfDay}"/>
            <GridViewColumn Header="Game"
                  DisplayMemberBinding="{Binding Path=HandType, Converter={StaticResource HandTypeToString}}"/>
            <GridViewColumn Header="Starting Hand" >
                <GridViewColumn.CellTemplate>
                    <DataTemplate DataType="local:Item">
                        <ItemsControl Background="SteelBlue" Width="80" Height="80" />
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

Mark Salsbery Microsoft MVP - Visual C++ :java:

[Mikey_H]

I've tracked down where the issue is after recreating the UICardArray from the ItemsControl up. UICardArray.ItemTemplate

Width="{Binding Path=CardWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type c:UICardArray}}}"
Height="{Binding Path=CardHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type c:UICardArray}}}"

If I set these properties directly without the binding it all works fine. Why would this cause the ItemsControl to stretch? It appeared that the Items were the correct size using these bindings.

[Mark Salsbery]

Mikey_H wrote:

Why would this cause the ItemsControl to stretch?

Not sure. First thing I would try is setting the binding mode to OneWay. That's just a stab in the dark :) There must be something going on behind the scenes during layout...

Mark Salsbery Microsoft MVP - Visual C++ :java:

[Mikey_H]

Stab in the dark is no good :doh: :laugh: I have made some further discoveries on the matter. If I leave the bindings as they are, and add the following code behind to UICardArray

foreach (ContentPresenter content in PART_StackPanel.Children)
{
content.Width = CardWidth;
content.Height = CardHeight;
}

It all works 100% how I would expect it to work, autosized with no clipping. After finding this out I removed this code to its original state and added the following function to UICardArray

public void ShowSizes()
{
foreach (ContentPresenter content in PART_StackPanel.Children)
MessageBox.Show(content.ActualWidth.ToString() + ", " + content.ActualHeight.ToString());

        MessageBox.Show(ActualWidth.ToString() + ", " + ActualHeight.ToString());
    }

then placed a test array in a test listview and ran the function.

<ListView>
<UserInterface_Elements_Cards:UICardArray x:Name="TestArray" ItemsSource="{Binding Path=TestCards, RelativeSource={RelativeSource AncestorType=Window}}"
DisplayType="HoleCards"
HorizontalAlignment="Center"
CardWidth="18" CardHeight="25"/>
</ListView>

18x25px for each item(4 items), and 78x25px for the entire control (6px for margins between items), yet the listview again stretched the entire available window space. :confused: So I have a workaround for the problem, but I still don't understand what is going on here. Thanks for your help Mark :thumbsup: very much apprecited.