像wpf中的Powerpoint缩略图一样创建缩略图预览

Posted 2021-03-26

我有一个wpf应用程序，有两个类似于powerpoint应用程序的窗格：

• 左侧窗格，显示列表框中所有面板的列表
• 右侧窗格，显示所选面板

在列表框中，我想将面板显示为缩略图，并在将新控件添加到右窗格中的面板时更新缩略图。

就像powerpoint应用程序缩略图行为一样。

答案

通过使用RenderTargetBitmap和PngBitmapEncoder，我们可以捕获一个窗口区域。并通过使用PngBitmapEncoder框架属性将其分配给图像源。

让我们从Xaml开始

我将窗口分为两半和左右面板。 PowerPoint中的风格相同。为了演示我已经实现在右侧面板上添加TextBox，预览将显示在左侧面板缩略图上。

    <Grid Background="Aqua" x:Name="gridg">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <ListBox   HorizontalAlignment="Left" Height="372" Margin="10,38,0,0" VerticalAlignment="Top" Width="306" Grid.Column="0" x:Name="Listtems" SelectionChanged="Listtems_SelectionChanged" />

    <Button Content="+ TextBox" HorizontalAlignment="Left" Margin="142,10,0,0" VerticalAlignment="Top" Width="174" Click="Button_Click" Grid.Column="0"/>
    <StackPanel x:Name="stackPanel" Background="Wheat" Grid.ColumnSpan="2" Margin="321,0,0,0"  />
    </Grid>

单击左侧面板项后，相应的控件将显示在右侧面板上并显示数据。

为了跟踪ListBox中的项目，我使用了Dictionary和ItemIndex以及相应项目的索引使用控件。

窗口的代码背后

/// <summary>
/// Interaction logic for Window6.xaml
/// </summary>
public partial class Window6 : Window
{
    Dictionary<int, Control> _dictionaryControls = new Dictionary<int, Control>();
    DispatcherTimer dispatcherTimer = new DispatcherTimer();
    public Window6()
    {
        InitializeComponent();
        dispatcherTimer.Interval = new TimeSpan(0, 0, 1);
        dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
        dispatcherTimer.Start();
    }


    private void BmpImage()
    {
        RenderTargetBitmap renderTargetBitmap =
        new RenderTargetBitmap(800, 450, 96, 96, PixelFormats.Pbgra32);
        renderTargetBitmap.Render(stackPanel);
        PngBitmapEncoder pngImage = new PngBitmapEncoder();
        pngImage.Frames.Add(BitmapFrame.Create(renderTargetBitmap));

        Image img = new Image();
        img.Source = pngImage.Frames[0];
        img.Height = 148;
        img.Width = 222;
        Listtems.Items.Add(img);
        Listtems.SelectedIndex = Listtems.Items.Count - 1;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        stackPanel.Children.Clear();
        int item = Listtems.Items.Count;
        TextBox txtControl = new TextBox();
        txtControl.FontSize = 100;
        txtControl.Height = 122;
        txtControl.TextWrapping = TextWrapping.Wrap;
        _dictionaryControls.Add(item, txtControl);
        stackPanel.Children.Add(txtControl);
        stackPanel.UpdateLayout();
        BmpImage();
    }

    private void Listtems_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        UpdateThumbNail();
    }

    private void UpdateThumbNail()
    {
        int indexbackup = -1;
        Listtems.SelectionChanged -= Listtems_SelectionChanged;
        Control control;

        _dictionaryControls.TryGetValue(Listtems.SelectedIndex, out control);
        if (control == null)
        {
            Listtems.SelectionChanged += Listtems_SelectionChanged;
            return;
        }

        indexbackup = Listtems.SelectedIndex;

        stackPanel.Children.Clear();
        stackPanel.Children.Add(control);
        stackPanel.UpdateLayout();

        RenderTargetBitmap renderTargetBitmap =
            new RenderTargetBitmap(800, 450, 96, 96, PixelFormats.Pbgra32);
        renderTargetBitmap.Render(stackPanel);
        PngBitmapEncoder pngImage = new PngBitmapEncoder();
        pngImage.Frames.Add(BitmapFrame.Create(renderTargetBitmap));

        Image img = new Image();
        img.Source = pngImage.Frames[0];
        img.Height = 148;
        img.Width = 222;

        Listtems.Items.Insert(Listtems.SelectedIndex, img);
        Listtems.Items.RemoveAt(Listtems.SelectedIndex);

        Listtems.SelectedIndex = indexbackup;
        Listtems.SelectionChanged += Listtems_SelectionChanged;

    }


    private void dispatcherTimer_Tick(object sender, EventArgs e)
    {
        UpdateThumbNail();
    }
}

BmpImage（）： - 我曾经捕获过，或者换句话说，StackPanel控件的打印屏幕。

Button_Click事件： - 用于在ListBox中创建一个新项目，使用TextBox中StackPanel控件的当前打印屏幕添加图像。它还在_dictionaryControls变量中添加了控件。

Listtems_SelectionChanged事件： - 清除StackPanel，然后根据ListBox的SelectedIndex从_dictionaryControls中获取TextBox Control，并通过获取StackPanel的当前快照将其放在StackPanel中。

为了演示目的，我只为TextBox Control做了这个，但你可以通过一些调整来做任何其他控件。

UpdateThumbNail创建了一个方法，负责根据ListBoxItem更新Listbox中的图像。

dispatcherTimer_Tick： - 事件负责每秒调用UpdateThumbNail（）方法。