Question

我的应用程序的目的是将目录中的所有图片（* .png，*。jpg ...）显示为缩略图。
缩略图的大小应使用滑块控件进行更改。
它应该是MVVM应用程序。

为了简化我的问题，我将应用程序简化为核心：

Grid.Row 0：滑块控件。 TextBlock显示实际的滑块值。符合预期。
Grid.Row 1：图片应在列表框中显示为缩略图。

MainWindow.xaml

       <Window x:Class="WpfApp.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         Title="MainWindow" Height="250" Width="600">

      <Grid>

        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" >
          <StackPanel Orientation="Horizontal">
            <TextBlock  Text="Size" Margin="10"></TextBlock>

            <Slider
              Value="{Binding ThumbnailSize}"
              HorizontalAlignment="Left"
              IsSnapToTickEnabled="True"
              Margin="10"
              Maximum="100"
              Minimum="10"
              TickFrequency="5"
              TickPlacement="BottomRight"
              VerticalAlignment="Top"
              Width="400"/>

            <TextBlock  Text="Slider value" Margin="10"></TextBlock>

            <TextBlock Text="{Binding ThumbnailSizeString, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"  Margin="10"></TextBlock>

          </StackPanel>
        </Grid>

        <ListBox 
          ItemsSource="{Binding List_Thumbnail_DM}"      
          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
          Grid.Row="1" 
          Margin="10">

          <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
              <WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
          </ListBox.ItemsPanel>

          <ListBox.ItemTemplate>
            <DataTemplate>

              <Grid 
                MaxWidth="80" Margin="10">


                <Grid.RowDefinitions>
                  <RowDefinition/>
                  <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <Image 
                  Source="{Binding FilePath}" />

                <TextBlock 
                  Text="{Binding FileName}" 
                  HorizontalAlignment="Center" 
                  Grid.Row="1" 
                  Margin="0 5"/>
              </Grid>

            </DataTemplate>
          </ListBox.ItemTemplate>
        </ListBox>

      </Grid>
    </Window>
    ...

MainWindow.xaml.cs ...

    using System.Windows;
    using WpfApp.Model;

    namespace WpfApp
    {

      public partial class MainWindow : Window
      {
         public MainWindow ()
         {
           InitializeComponent();
           this.DataContext = new Thumbnail_VM();
         }
      }
    }
    ...

“ Thumbnail_VM：ViewModelBase”类很简单：

ViewModelBase支持PropertyChanged。
所有图片信息均基于类“ Thumbnail_DM”支持列表“ List_Thumbnail_DM”
“ Thumbnail_DM”的初始化仅在Thumbnail_VM（）中进行了硬编码
也是默认大小的缩略图大小。

    using System.ComponentModel;

    namespace WpfApp.Model
    {
      public class ViewModelBase : INotifyPropertyChanged
      {
        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged (string propertyName)
        {
          PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
      }
    }



    using System;  

    namespace WpfApp.Model  
    { 
        public class Thumbnail_DM
        {
          public Thumbnail_DM (string strFileName, string strPath)
          { 
            FileName = strFileName;
            FilePath = strPath;
          } 

          public string FileName { get; set; }
          public string FilePath { get; set; }
        } 
     }


     using System.Collections.Generic;

     namespace WpfApp.Model
     {
       public class Thumbnail_VM : ViewModelBase
       {
         private  List<Thumbnail_DM> _list_Thumbnail_DM;
         private  double _dThumbnailSize;
         private  string _strThumbnailSizeString;

         public Thumbnail_VM ()
         {
           _list_Thumbnail_DM = new List<Thumbnail_DM>();

           _list_Thumbnail_DM.Add (new Thumbnail_DM ("Thumbnail 1", @"c:\Temp\1.png"));
           _list_Thumbnail_DM.Add (new Thumbnail_DM ("Thumbnail 2", @"c:\Temp\2.png"));

           ThumbnailSize = 50;
         }

         public List<Thumbnail_DM> List_Thumbnail_DM
         {
           get { return _list_Thumbnail_DM; }
           set { _list_Thumbnail_DM = value; }
         }

         public double ThumbnailSize
         {
           get { return _dThumbnailSize; }
           set { _dThumbnailSize = value;
                 OnPropertyChanged("ThumbnailSize");
                 ThumbnailSizeString = ThumbnailSize.ToString(); }
         }

         public string ThumbnailSizeString
         {
           get { return _strThumbnailSizeString; }
           set { _strThumbnailSizeString = value; 
                 OnPropertyChanged("ThumbnailSizeString"); }
         }
       }
    }

...

如果：

，我的应用程序运行正常

    Grid  MaxWidth="80" Margin="10"

在数据模板中

但是，正如我提到的，我想在运行时使用滑块更改缩略图的大小。

    Grid MaxWidth="{Binding ThumbnailSize, Mode=TwoWay}" Margin="10"

这不起作用！

错误信息： BindingExpression路径错误：在“对象”“ Thumbnail_DM”上找不到“ ThumbnailSize”属性

当然，缩略图的大小不是“ Thumbnail_DM”的一部分，并且不应该是缩略图数据模型的属性，因为大小是所有拇指的属性。

什么是正确的解决方案？
“ ListBox”是解决此问题的最佳控件吗？
我认为 ListBox.ItemTemplate 是问题。
必须如何修改？

c＃WPF MVVM：使用滑块控件更改缩略图的大小

0 个答案: