列表框寬度的變化

我正在寫使用.NET 4.5

一個WPF應用程序的底部我有一個ListBox顯示視頻信息的XAML如下所示。

<ListBox Margin="10, 5, 10, 10" 
      ItemsSource="{Binding SearchResponse.Results}" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch"> 
     <ListBox.ItemContainerStyle> 
      <Style TargetType="ListBoxItem"> 
       <EventSetter Event="MouseDoubleClick" 
          Handler="SearchResult_OnMouseDoubleClick"> 
       </EventSetter> 
      </Style> 
     </ListBox.ItemContainerStyle> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <Border BorderBrush="#3e3e42" 
         BorderThickness="1" 
         CornerRadius="5" 
         Background="#242424" 
         Padding="10"> 
        <StackPanel Orientation="Horizontal"> 
         <Image Source="{Binding ThumbnailPath}" 
           Width="{Binding RelativeSource={RelativeSource FindAncestor, 
           AncestorType={x:Type Window}}, 
           Path=DataContext.ThumbnailWidth}" 
           Height="{Binding RelativeSource={RelativeSource FindAncestor, 
           AncestorType={x:Type Window}}, 
           Path=DataContext.ThumbnailHeight}" 
           Margin="0,0,10,0" /> 
         <StackPanel TextBlock.FontFamily="Segoe WP" 
            TextBlock.FontSize="14" 
            TextBlock.Foreground="WhiteSmoke" 
            Width="300"> 
          <TextBlock Text="{Binding Title}" 
             TextTrimming="CharacterEllipsis" /> 
          <TextBlock Text="{Binding Description}" 
             TextTrimming="CharacterEllipsis" 
             TextWrapping="Wrap"/> 
          <TextBlock Text="{Binding Path}" 
             TextTrimming="CharacterEllipsis"/> 
         </StackPanel> 
        </StackPanel> 
       </Border> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox>

列表中的每個縮略圖（圖像）將具有相同的寬度和高度（無論是小，中或大）。對於我有SizeToContent=Width的窗口，窗口會在縮略圖大小發生變化時自動調整大小。

問題是這樣的：當我使用鼠標滾輪滾動ListBox時，寬度變化看起來是隨機的，並導致窗口寬度增加。如果我使用滾動條上下滾動按鈕，這不會發生。

我調試了ListBox項目數據模板（文本塊，堆棧面板，邊框等）中所有元素的ActualWidth，它們都保持在預期的固定寬度，但仍在調試列表框本身的寬度表明它隨機地改變寬度。

這裏有兩個截圖。第一個顯示正確的佈局，第二個顯示用鼠標滾輪滾動ListBox後的佈局。

Correct layout

After scrolling, listbox gets wider!

那麼，爲什麼不包含時內的項目ListBoxActualWidth變化？

更新： 一些進一步的調查表明，這種行爲是由事實，我使用了縮略圖的圖像比縮略圖顯示尺寸更大的圖像控制的調整引起的。看起來，列表框是（有時）根據原始圖像大小而不是較小的調整大小的圖像調整大小。

任何人有任何建議來克服這一點？

來源

2013-06-13 Steve

我設法通過編寫一個MultiValueConverter來解決這個問題，該文件接受一個圖像文件路徑和一個像素寬度（使用MultiBinding在xaml中綁定）並返回縮略圖圖像控件中顯示的正確大小的位圖。結果是使用了正確大小的圖像（並進行了緩存），因此寬度是不變的。

這是轉換器的代碼：

public class PathToThumbnailConverter : IMultiValueConverter 
{ 
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) 
    { 
     var path = values[0] as string; 
     var decodeWidth = (int)values[1]; 

     if (!string.IsNullOrEmpty(path)) 
     { 
      var info = new FileInfo(path); 

      if (info.Exists && info.Length > 0) 
      { 
       var bi = new BitmapImage(); 

       bi.BeginInit(); 
       bi.DecodePixelWidth = decodeWidth; 
       bi.CacheOption=BitmapCacheOption.OnLoad; 
       bi.UriSource=new Uri(info.FullName); 
       bi.EndInit(); 

       return bi; 
      } 
     } 
     return null; 
    } 

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
}

這裏是宣告它的XAML：

<Window.Resources> 
    <valueConverters:PathToThumbnailConverter x:Key="ThumbConverter"/> 
</Window.Resources>

，並用它：

<Image.Source> 
    <MultiBinding Converter="{StaticResource ThumbConverter}"> 
    <Binding Path="ThumbnailPath"/> 
    <Binding RelativeSource="{RelativeSource FindAncestor, 
     AncestorType={x:Type Window}}" Path="DataContext.ThumbnailWidth"/> 
    </MultiBinding> 
</Image.Source>

來源

2013-06-13 15:14:19 Steve

列表框寬度的變化

回答

相關問題