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

时间:2018-12-10 09:13:25

标签: wpf prism

我有一个wpf应用程序,其中有两个类似于powerpoint应用程序的窗格:

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

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

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

1 个答案:

答案 0 :(得分:0)

通过使用RenderTargetBitmapPngBitmapEncoder,我们可以捕获一个窗口区域。 并使用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>

enter image description here

单击左侧面板项目后,相应的控件将随数据一起显示在右侧面板上。

为了跟踪ListBox中的项目,我将DictionaryItemIndex一起使用,并且将其作为相应项目的索引使用了控件。

后面的窗口代码

/// <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控件并将其放置在通过获取StackPanel的当前快照来获取StackPanel

出于演示目的,我仅对TextBox控件进行了此操作,但是您可以稍作调整就对其他任何控件进行此操作。

UpdateThumbNail 创建了一种方法,用于基于ListBoxItem更新列表框中的图像。

dispatcherTimer_Tick :-事件负责每秒钟调用UpdateThumbNail()方法。