使用ItemsControl和一个按钮的DataGridCell中的动态UI布局

Question

This screenshot is from the mockup of my ideal UI. Right now, this is a DataGridTemplateColumn , with header = "ATTENDEES". I am running into issues creating the layout of this DataGridColumn's cell.

I currently have an ItemsControl bound to a List of strings which are the attendees' emails. If there are too many attendees and the ItemsControls ' bounds cannot fit in the cell, then a Button with Content = "See more" should appear at the bottom of the cell, under the last attendee email that can be rendered within in the cell's bounds.

Then once the Button ("See more") is clicked, the row should expand to an appropriate height for the attendees to all be visible, and the "See more" Button should disappear.

I could not wrap my head around a clean implementation with a TemplateSelector , ValueConverter , or DataTrigger in pure XAML since I need to compare the ItemsControls ' height against the DataGridRow's height and then perform a modification of the cell's layout at runtime by hiding all the items in the ItemsControl that cannot fit within the cell and then showing at Button below it.

I concluded on attempting to do this in the code-behind by subscribing to the ItemControls ' load event. I first attempted to use the Height, MaxHeight, DesiredSize.Height, RenderedSize.Height, and ActualSize.Height properties of the ItemsControl but those all were equal to the clipped height of the ItemsControl, not the intrinsic height of all its contents.

I am now measuring the total height of all its items' strings using the FormattedText class. Then I compare this summed height with the row's height and that's as far as I have progressed; I am unsure of how to next change the layout of the cell or if this is even the correct approach.

I feel like I am fighting against the design of the WPF framework by doing rudimentary calculations and crude layout changes to the view in the code-behind.

Any help on this would be greatly appreciated!

---

Here is my event handler for the ItemsControl.Load:

 private void AttendeesItemsControl_Loaded(object sender, RoutedEventArgs e)
    {
        if (currentRowIndex == -1)
        {
            return;
        }

        List<ModelBase> eventsData = ModelManager.events.data;
        var eventObj = (Event)eventsData[currentRowIndex];
        var attendees = eventObj.attendees;
        var totalItemsHeight = 0;
        for(int i = 0; i < attendees.Count; i++)
        {
            totalItemsHeight += heightOfString(attendees[i]);
        }
        var itemsControl = (ItemsControl)sender;
        var controlRenderHeight = itemsControl.RenderSize.Height;
        // Check if the intrinsic height is greater than what can be drawn inside the cell
        if (controlRenderHeight < totalItemsHeight)
        {
            var itemHeight = totalItemsHeight / attendees.Count;
            var visibleItemsCount = controlRenderHeight / itemHeight;
            // .... not sure how to proceed
        }
    }

And the helper function that measures the height of one of its items:

private int heightOfString(string candidate)
    {
        var fontFamily = new FontFamily("Lato");
        var fontStyle = FontStyles.Normal;
        var fontWeight = FontWeights.Normal;
        var fontStretch = FontStretches.Normal;
        var fontSize = 12;
        var typeFace = new Typeface(fontFamily, fontStyle, fontWeight, fontStretch);
        var formattedText = new FormattedText(candidate, CultureInfo.CurrentUICulture, FlowDirection.LeftToRight, typeFace, fontSize, Brushes.Black);

        return (int)formattedText.Height;
    }

Finally, this is the DataGridTemplateColumn's XAML, with the cell template definition:

<DataGridTemplateColumn Header="ATTENDEES" Width="*">
       <DataGridTemplateColumn.CellTemplate>
           <DataTemplate>
               <ItemsControl ItemsSource="{Binding Path=attendees}" x:Name="AttendeesItemsControl" Loaded="AttendeesItemsControl_Loaded">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <TextBlock FontFamily="Lato" FontSize="12" FontWeight="Normal" Text="{Binding}">
                            </TextBlock>
                        </DataTemplate>    
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
           </DataTemplate>
       </DataGridTemplateColumn.CellTemplate>                    
   </DataGridTemplateColumn>

Answer 1

I had to do some real work but I got this set up. Hopefully you can follow it. Here is a screen shot of what it looks like. Obviously i didn't attempt to style it yet. Just getting the resizing. This way you let WPF handle the height of your control you leave it autosized. You just manage your list.

I created a control for the list called AttendeeListControl

 <UserControl xmlns:stackoverflow="clr-namespace:stackoverflow" x:Class="stackoverflow.AttendeeListControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> <Grid Background="GhostWhite"> <Grid.RowDefinitions> <RowDefinition Height="37"/> <RowDefinition Height="*"/> <RowDefinition Height="23"/> </Grid.RowDefinitions> <Label Content="Attendees" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/> <ListBox Name="listBoxAttendees" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1" /> <Button Content="SeeMore" Name="lblMore" HorizontalAlignment="Left" Margin="10,0,0,0" Grid.Row="2" VerticalAlignment="Top" Click="lblMore_Click"/> </Grid> </UserControl> 

This is the code behind

 using System.Collections.Generic; using System.Collections.ObjectModel; using System.Windows.Controls; namespace stackoverflow { /// <summary> /// Interaction logic for AttendeeListControl.xaml /// </summary> /// public partial class AttendeeListControl : UserControl { public AttendeeListViewModel vm { get; set; } public AttendeeListControl() { InitializeComponent(); var emails = new List<string>() { "email@gmail.com", "email@aol.com", "email.yahoo.com", "email@msn.com" }; var displayed = new ObservableCollection<string>() { emails[0], emails[1] }; vm = new AttendeeListViewModel() { EmailList = emails, DisplayList = displayed, Expanded = false }; DataContext = vm; listBoxAttendees.ItemsSource = vm.DisplayList; } private void lblMore_Click(object sender, System.Windows.RoutedEventArgs e) { if (vm.Expanded) { //remove all but last 2 do { vm.DisplayList.RemoveAt(vm.DisplayList.Count - 1); } while (vm.DisplayList.Count > 2); lblMore.Content = "Show More"; } else { //don't want the first 2 for (int i = 2; i < vm.EmailList.Count; i++) { vm.DisplayList.Add(vm.EmailList[i]); } lblMore.Content = "Show Less"; } vm.Expanded = !vm.Expanded; } } } 

and here is the model i used

 using System.Collections.Generic; using System.Collections.ObjectModel; namespace stackoverflow { public class AttendeeListViewModel { public bool Expanded { get; set; } public List<string> EmailList { get; set; } public ObservableCollection<string> DisplayList { get; set; } } } 

this was all just put on the mainwindow

 <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:stackoverflow" x:Class="stackoverflow.MainWindow" Title="MainWindow" Height="350" Width="525"> <Grid> <local:AttendeeListControl HorizontalAlignment="Left" Margin="55,53,0,0" VerticalAlignment="Top"/> <local:AttendeeListControl HorizontalAlignment="Left" Margin="340,53,0,0" VerticalAlignment="Top"/> </Grid> </Window>