Creating Thumbnail Preview like Powerpoint thumnails in wpf - wpf

Question

I have a wpf application with two panes similar to powerpoint application:
left pane which shows list of all the panels in listbox
right pane which shows the selected panel
In the listbox I want to display panel as thumbnail and update the thumbnail as an when new controls are added to panel in right pane.
Just like powerpoint application thumbnail behaviour.

Answer 1

By using RenderTargetBitmap and PngBitmapEncoder we can capture a region of window.
and by using the PngBitmapEncoder frame Property assigned it to Image Source.
Lets start with Xaml
I divided the window by two half and left and right panel. Same in PowerPoint with less style. In order to demonstrate I have implemented to add TextBox on the right panel and the preview will be displayed on the left panel thumbnail.
<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>
As soon as you click on the left panel item, the corresponding the control will be displayed on the right panel with the data.
In order to keep track of the items in the ListBox, I have used Dictionary with ItemIndex and to it's corresponding item's index used control.
Window's Code Behind
/// <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() : - I used to capture or in other words the print screen of the StackPanel control.
Button_Click Event :- Is used to create a new Item in ListBox adding Image with the current print screen of the TextBox Control in StackPanel. It also adds control in _dictionaryControls variable.
Listtems_SelectionChanged Event:- Clears the StackPanel and then take the TextBox Control from _dictionaryControls based on the SelectedIndex of ListBox and place it in the StackPanel by taking current snapshot of the StackPanel.
For Demo Purpose, I have done it only for TextBox Control, but you can do it for any other control with a little tweaking.
UpdateThumbNail created a method responsible to update the image in Listbox based on the ListBoxItem.
dispatcherTimer_Tick : - Event is responsible to call the UpdateThumbNail() Method for every second.