Datagrid - Scrolling will crop images horizontally instead of vertically

Question

I needed to invert Columns/Rows on my DataGrid (see WPF horizontal DataGrid and RotatedDataGrid)

Once I inverted it, I am having some weird effects on the images displayed inside my datagrid.

When I scroll down, the column 1 will crop the image by the left and a little on the right. The more I go down, the more it crops the left until there is nothing more.

How can I solve that ?

Here a full simple example if you want to test it (you just need to copy/paste it in a new project and scroll down to see the problem)

MainWindows.xaml

    <Window x:Class="RotatedDataGrid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="150" Width="1000">
    <Grid>
        <DataGrid x:Name="MyRotatedDataGrid" HorizontalContentAlignment="Center"
                     ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible" 
                     AutoGenerateColumns="True"
                     ItemsSource="{Binding Customers}">
            <DataGrid.Resources>
                <Style x:Key="DataGridBase" TargetType="Control">
                    <Setter Property="LayoutTransform">
                        <Setter.Value>
                            <TransformGroup>
                                <RotateTransform Angle="-90" />
                                <ScaleTransform ScaleX="1" ScaleY="-1" />
                            </TransformGroup>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="TextOptions.TextFormattingMode" Value="Display" />
                </Style >
                <Style TargetType="DataGridCell" BasedOn="{StaticResource DataGridBase}"/>
                <Style TargetType="DataGridColumnHeader" BasedOn="{StaticResource DataGridBase}"/>
                <Style TargetType="DataGridRowHeader" BasedOn="{StaticResource DataGridBase}"/>
            </DataGrid.Resources>

            <DataGrid.LayoutTransform>
                <TransformGroup>
                    <RotateTransform Angle="90" />
                    <MatrixTransform Matrix="-1, 0, 0, 1, 0, 0" />
                </TransformGroup>
            </DataGrid.LayoutTransform>

            <DataGrid.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" Padding="3"/>
                            </StackPanel>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <Expander>
                                            <Expander.Header>
                                                <StackPanel Orientation="Horizontal">
                                                    <TextBlock Text="{Binding Path=Name}"/>
                                                    <TextBlock Text="{Binding Path=ItemCount}" Margin="8,0,4,0"/>
                                                    <TextBlock Text="Items"/>
                                                </StackPanel>
                                            </Expander.Header>
                                            <ItemsPresenter />
                                        </Expander>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </DataGrid.GroupStyle>

        </DataGrid>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace RotatedDataGrid
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public ICollectionView Customers { get; private set; }
        public ICollectionView GroupedCustomers { get; private set; }


        public MainWindow()
        {
            InitializeComponent();




            var _customers = new List<Customer>
                                 {
                                     new Customer
                                         {
                                             FirstName = "Christian",
                                             LastName = "Moser",
                                             Gender = Gender.Male,
                                             WebSite = new Uri("http://www.wpftutorial.net"),
                                             ReceiveNewsletter = true,
                                             Image = "Images/christian.jpg"
                                         },
                                     new Customer
                                         {
                                             FirstName = "Peter",
                                             LastName = "Meyer",
                                             Gender = Gender.Male,
                                             WebSite = new Uri("http://www.petermeyer.com"),
                                             Image = "Images/peter.jpg"
                                         },
                                     new Customer
                                         {
                                             FirstName = "Lisa",
                                             LastName = "Simpson",
                                             Gender = Gender.Female,
                                             WebSite = new Uri("http://www.thesimpsons.com"),
                                             Image = "Images/lisa.jpg"
                                         },
                                     new Customer
                                         {
                                             FirstName = "Betty",
                                             LastName = "Bossy",
                                             Gender = Gender.Female,
                                             WebSite = new Uri("http://www.bettybossy.ch"),
                                             Image = "Images/betty.jpg"
                                         }
                                 };

            Customers = CollectionViewSource.GetDefaultView(_customers);

            GroupedCustomers = new ListCollectionView(_customers);
            GroupedCustomers.GroupDescriptions.Add(new PropertyGroupDescription("Gender"));


            MyRotatedDataGrid.DataContext = this;
        }
    }




     public enum Gender
    {
        Male, 
        Female
    }

     public class Customer : INotifyPropertyChanged
     {
         private string _firstName;
         private string _lastName;
         private Gender _gender;
         private Uri _webSite;
         private bool _newsletter;
         private string _image;

         public string FirstName
         {
             get { return _firstName; }
             set
             {
                 _firstName = value;
                 NotifyPropertyChanged("FirstName");
             }
         }

         public string LastName
         {
             get { return _lastName; }
             set
             {
                 _lastName = value;
                 NotifyPropertyChanged("LastName");
             }
         }

         public Gender Gender
         {
             get { return _gender; }
             set
             {
                 _gender = value;
                 NotifyPropertyChanged("Gender");
             }
         }

         public Uri WebSite
         {
             get { return _webSite; }
             set
             {
                 _webSite = value;
                 NotifyPropertyChanged("WebSite");
             }
         }

         public bool ReceiveNewsletter
         {
             get { return _newsletter; }
             set
             {
                 _newsletter = value;
                 NotifyPropertyChanged("Newsletter");
             }
         }

         public string Image
         {
             get { return _image; }
             set
             {
                 _image = value;
                 NotifyPropertyChanged("Image");
             }
         }

         #region INotifyPropertyChanged Members

         public event PropertyChangedEventHandler PropertyChanged;

         #endregion

         #region Private Helpers

         private void NotifyPropertyChanged(string propertyName)
         {
             if (PropertyChanged != null)
             {
                 PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
             }
         }

         #endregion
     }
}

Answer 1

Ok I found how to solve it. The transformation applied into the DataGridCell was creating this scrollviewer problem. To solve that, I removed the layout transform on the DataGridCell (by removing the BaseOn code) and I applied the transformation into the DataGridCell Template.

WRONG

<Style TargetType="DataGridCell" BasedOn="{StaticResource DataGridBase}"/>

RIGHT

<Style TargetType="DataGridCell">
  <Setter Property="Template">
    <Setter.Value>
       <ControlTemplate TargetType="{x:Type DataGridCell}">
           <Grid>
                <Grid.LayoutTransform>
                   <TransformGroup>
                        <RotateTransform Angle="90" />
                        <MatrixTransform Matrix="-1, 0, 0, 1, 0, 0" />
                   </TransformGroup>
               </Grid.LayoutTransform>
               <ContentPresenter/>
           </Grid>
        </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>