Datagrid - 滚动将水平裁剪图像，而不是垂直 [英] Datagrid - Scrolling will crop images horizontally instead of vertically
本文介绍了Datagrid - 滚动将水平裁剪图像，而不是垂直的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要反转DataGrid上的列/行（请参阅
我该如何解决？
这里有一个完整的简单示例，如果你想测试它（你只需要复制/粘贴到一个新的项目，向下滚动看看问题）
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
标题= MainWindowHeight =150Width =1000>
< Grid>
< DataGrid x：Name =MyRotatedDataGridHorizontalContentAlignment =Center
ScrollViewer.HorizontalScrollBarVisibility =VisibleScrollViewer.VerticalScrollBarVisibility =Visible
AutoGenerateColumns =True
ItemsSource ={Binding Customers}>
< DataGrid.Resources>
< Style x：Key =DataGridBaseTargetType =Control>
< Setter Property =LayoutTransform>
< Setter.Value>
< TransformGroup>
< RotateTransform Angle = - 90/>
< ScaleTransform ScaleX =1ScaleY = - 1/>
< / TransformGroup>
< /Setter.Value>
< / Setter>
< Setter Property =TextOptions.TextFormattingModeValue =Display/>
< / Style>
< Style TargetType =DataGridCellBasedOn ={StaticResource DataGridBase}/>
< Style TargetType =DataGridColumnHeaderBasedOn ={StaticResource DataGridBase}/>
< Style TargetType =DataGridRowHeaderBasedOn ={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 =BoldPadding =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
使用系统;
使用System.Collections.Generic;
使用System.ComponentModel;
使用System.Linq;
使用System.Text;
使用System.Threading.Tasks;
使用System.Windows;
使用System.Windows.Controls;
使用System.Windows.Data;
使用System.Windows.Documents;
使用System.Windows.Input;
使用System.Windows.Media;
使用System.Windows.Media.Imaging;
使用System.Windows.Navigation;
使用System.Windows.Shapes;
命名空间RotatedDataGrid
{
///< summary>
/// MainWindow.xaml的交互逻辑
///< / summary>
public partial class MainWindow：Window
{
public ICollectionView Customers {get;私人集合}
public ICollectionView GroupedCustomers {get;私人集合}
public MainWindow（）
{
InitializeComponent（）;
var _customers = new List< Customer>
{
新客户
{
FirstName =Christian，
LastName =Moser，
性别=性别，美元，
WebSite = new Uri（http://www.wpftutorial.net），
ReceiveNewsletter = true，
Image =Images / christian.jpg
}，
new客户
{
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
性别=性别女性，
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性别
{
男，
女
}
public class Customer：INotifyPropertyChanged
{
private string _firstName;
private string _lastName;
私人性别_性别;
私人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）;
}
}
公共性别性别
{
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成员
public event PropertyChangedEventHandler PropertyChanged;
#endregion
#region Private Helpers
private void NotifyPropertyChanged（string propertyName）
{
if（PropertyChanged！ = null）
{
PropertyChanged（this，new PropertyChangedEventArgs（propertyName））;
}
}
#endregion
}
}
解决方案
确定我找到了解决方法。
应用于DataGridCell的转换正在创建此scrollviewer问题。为了解决这个问题，我删除了DataGridCell上的布局转换（通过删除BaseOn代码），并将转换应用到DataGridCell模板中。
错误
< Style TargetType =DataGridCellBasedOn ={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>
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
}
}
解决方案
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>
这篇关于Datagrid - 滚动将水平裁剪图像，而不是垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
