DataGrid 未正确调整大小答案

【问题标题】：DataGrid not sizing correctlyDataGrid 未正确调整大小
【发布时间】：2011-08-14 00:28:29
【问题描述】：

如您所见，我的应用中有两个DataGrids。由于未知原因，当应用程序启动时，其中一个或两个网格的大小将不正确。（图像以编程方式加载。）

有谁知道原因，更重要的是，有解决此问题的方法吗？

需要注意的一件奇怪的事情是，当鼠标滚动按钮在其上滚动时，网格会自行调整大小，但滚动按钮不会滚动网格（只有向上/向下翻页和光标键可以，当然，除了拖动滚动条）。此外，即使删除了ScrollViewer，问题仍然存在。

XAML

<UserControl x:Class="SW.ImagesControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:SW="clr-namespace:SW">
  <UserControl.Resources>
    <SW:NullImageConverter x:Key="NullImageConverter" />
  </UserControl.Resources>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <ScrollViewer HorizontalScrollBarVisibility="Visible" Grid.Row="1" Grid.ColumnSpan="2">
      <DataGrid AutoGenerateColumns="False" IsReadOnly="True" Padding="0" Margin="0"
          ItemsSource="{Binding}" SelectionUnit="Cell"
             VirtualizingStackPanel.VirtualizationMode="Recycling" >
        <DataGrid.Columns>
          <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
          <DataGridTemplateColumn Header="Image">
            <DataGridTemplateColumn.CellTemplate>
              <DataTemplate>
                <Button Command="{Binding ChangeImageCommand}">
                  <Button.Template>
                    <ControlTemplate>
                      <Grid>
                        <TextBlock Name="tb" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed">
                            <Hyperlink Command="{Binding ChangeImageCommand}">Browse...</Hyperlink>
                        </TextBlock>
                        <Image Name="img" Source="{Binding Image, Converter={StaticResource NullImageConverter}}" Margin="0"/>
                      </Grid>
                      <ControlTemplate.Triggers>
                        <Trigger SourceName="img" Property="Source" Value="{x:Null}">
                          <Setter TargetName="tb" Property="Visibility" Value="Visible"/>
                        </Trigger>
                      </ControlTemplate.Triggers>
                    </ControlTemplate>
                  </Button.Template>
                </Button>
              </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
          </DataGridTemplateColumn>
          <DataGridTemplateColumn Header="Preview">
            <DataGridTemplateColumn.CellTemplate>
              <DataTemplate>
                <Image Source="{Binding PreviewImage, Converter={StaticResource NullImageConverter}}" Margin="0" />
              </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
          </DataGridTemplateColumn>
        </DataGrid.Columns>
      </DataGrid>
    </ScrollViewer>
  </Grid>
</UserControl

【问题讨论】：

标签： wpf datagrid

【解决方案1】：

DataGrid 有一个内部的ScrollViewer，因此不需要外部的。不过，这可能并不明显，因为VirtualizingStackPanel.VirtualizationMode 被设置为Recycling。删除该属性和滚动查看器解决了大小问题以及缺少滚动。

<UserControl x:Class="SW.ImagesControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:SW="clr-namespace:SW">
  <UserControl.Resources>
    <SW:NullImageConverter x:Key="NullImageConverter" />
  </UserControl.Resources>
  <DataGrid AutoGenerateColumns="False" IsReadOnly="True" Padding="0" Margin="0"
          ItemsSource="{Binding}" SelectionUnit="Cell" >
    <DataGrid.Columns>
      <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
      <DataGridTemplateColumn Header="Image">
        <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
            <Button Command="{Binding ChangeImageCommand}">
              <Button.Template>
                <ControlTemplate>
                  <Grid>
                    <TextBlock Name="tb" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed">
                            <Hyperlink Command="{Binding ChangeImageCommand}">Browse...</Hyperlink>
                    </TextBlock>
                    <Image Name="img" Source="{Binding Image, Converter={StaticResource NullImageConverter}}" Margin="0"/>
                  </Grid>
                  <ControlTemplate.Triggers>
                    <Trigger SourceName="img" Property="Source" Value="{x:Null}">
                      <Setter TargetName="tb" Property="Visibility" Value="Visible"/>
                      <!--<Setter TargetName="img" Property="Visibility" Value="Collapsed"/>-->
                    </Trigger>
                  </ControlTemplate.Triggers>
                </ControlTemplate>
              </Button.Template>
            </Button>
          </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
      </DataGridTemplateColumn>
      <DataGridTemplateColumn Header="Preview">
        <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
            <Image Source="{Binding PreviewImage, Converter={StaticResource NullImageConverter}}" Margin="0" />
          </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
      </DataGridTemplateColumn>
    </DataGrid.Columns>
  </DataGrid>
</UserControl

【讨论】：