UI Design

In WPF applications, for frontend to design UI, xaml (Extensible Application Markup Language) is used which is very simple and declarative based on XML, used to build User Interface for Windows and Mobile Applications, that use Windows Presentation Foundation (WPF), UWP and Xamarin forms.

In xaml window, everything you need to mention inside a grid to make suitable layout. So you add add number of rows and columns as you want in your project.

<Grid.RowDefinations>

<RowDefination Height="Auto"/>   

</Grid.RowDefinations> 

<Grid.ColumnDefinations>

<ColumnDefination Width="Auto"/>   

</Grid.ColumnDefinations> 

 Here, I have given Height and Width of row and column as "Auto" but you can also give static numbers or "*". In my project, I have created 3 rows. Rows are having index from 0. In my first row, I have created 2 columns. 1st column contains textbox which contains selected folder path. I have set readonly property to "true" for the textbox so it will not allow user to change its value.

<Textbox Grid.Column="0" isReadOnly=True Margin="5"/>

In 2nd column, I have created a searchbox which helps to search image from it's name. It is a combination of textbox and textblock. Textbox will allow user to give his input and textblock displays message to search. I had binded BooleanToVisibilityConverter which is a inbuilt converter of c#.net that binds the visibility of text with the textbox. I had binded a keydown event in textbox that binds keys of keyboard with textbox.

<TextBlock Text="Search" VerticalAlignment="Center" Margin="8" Visibility={Binding ElementName=txtSearch, Path=Text.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}}"/>

<TextBox Name="txtSearch" KeyDown="txtSearch_KeyDown Background="Transparent" Margin="5"/>

The 1st row of Grid shows the listbox that displays all the images of the folder in wrappanel. Before listbox, I had used SrollViewer that is displays VerticalScrollbar if necessary.

In Listbox, I had binded doubleclick and previewmousewheel events whose description you will find on backend side. It's ItemSource is set to MyImages that is list of Images you will find on backend side.

<ListBox Name="lstview" BorderThickness="0" MouseDoubeClick="lstview_MouseDoubleClick" PreviewMouseWheel="lstview_previewmousewheel" ItemSource="{Binding Path=MyImages}" ScrollViewer.HorizontalScrollbarVisibility="Disabled">

ListBox contains ItemsTemplate that shows the items that is dislayed inside listbox i.e. Images with it's name and ItemsPanel that is used to describe how the images are going to display i.e. binded with WrapPanel. You can window same as your Windows screen that dislays images in your system.

The 3rd row of Grid is used to display the textbox that counts the number of images in the folder. It changes with the change of folder.