Hi all i need to design a control that has a thumbnail views of picture.it can take list of pictures.i need it in wpf.is there any pre existed library of control?
if no how can i design i have no idea
Thanks
was looking something like http://www.codeproject.com/KB/graphics/crystal_image_grid_viewer.aspx?msg=3290254
If you have a list of pictures you can place a panel (StackPanel, WrapPanel, etc., depends on the behaviour you want) inside a ListBox. Set the panel to be the items host, and set the list of pictures as the ItemsSource. Something like this:
<ListBox x:Name="_listBox" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" IsItemsHost="true" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
and then in the code behind set _listBox.ItemsSource to your list of pictures.
(or you can have your list of pictures in an ObservableCollection and bind the ListBox to it)
EDIT: as for the thumbnails you can use something like:
BitmapImage Picture = new BitmapImage();
Picture.BeginInit();
Picture.UriSource = ... // your picture
Picture.DecodePixelWidth = ... //how big you want your pic
Picture.EndInit();
do you want to show all the images of the list at the same time? I believe you can use the grid and put a picture control in any cell of the grid, you can start with this approach, post your results and ask more specific questions once you have it at least partly done.
Related
I'm using GridView to create a grid of items, and im trying to make the columns fill to expand the remaining space. Similar to how auto-fit behaves in CSS. See example..
Here I've set the MaxWidth of the GridView's children to 350px, and then when the window is not an even multiple of 350px + padding, I would like each column to expand to fill the remaining space.
Is this possible with UWP/XAML?
If you want to achieve the auto-fit effect, you can try to use UniformGrid Control from Windows Community Toolkit. It is a responsive layout control which arranges items in a evenly-spaced set of rows or columns to fill the total available display space. First, you need to add Microsoft.Toolkit.Uwp.UI.Controls nuget package and then use it as GridView's ItemsPanel. For example:
.xaml:
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<controls:UniformGrid Columns="3" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
I am doing one project where I want display the office floor with two thousnads seats which will be user interactive and will be inside the wpf Viewport2DVisual3D and all the seats(cells) will have stack panel with image which is bound with data base items from table) I will be using scroller and zoomer for moving in the screen.My question is whetehr I have to use Grid view or List view(with conrol templates) for this purpose considering the performance and maintenance or is there any other option to do this. I am new to WPF please help me ?
A Canvas control can be used to place items with arbitrary pixel coordinates, maybe that could be usefull?
<Canvas>
<Stackpanel Canvas.Left="10" Canvas.Right="10"></Stackpanel>
<Stackpanel Canvas.Left="20" Canvas.Right="20"></Stackpanel>
</Canvas>
I'm new to app dev. I am now stuck in the design of my app. This item is an item like a bulletin board. Just do not know which way is the right way to design my data in this style below? I had no idea whether to use the DATAGRIDVIEW OR LISTVIEW/LISTBOX?
Hope to get some idea from you guys
As Nex said, you are better off making the design shown in your picture as a usercontrol and after you do that use a ListView with a data template like this:
<ListView x:Name="mylistview">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
//a Panel container (i.e stackpanel, wrappanel)
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
//Your usercontrol
</DataTemplate>
</ListView.ItemTemplate>
and of course you will need to use data binding to show your data.
I am trying to find a best or common practice for creating a table of buttons from a database list.
For my use I am creating more of a Point of Sale type screen. Where I want the categories to load as buttons on the entry screen. The buttons would have a simple task of showing a screen of more dynamically created buttons of the actual items. Those buttons would add the items to, lets call it, a ticket.
The solutions I found were few. I am also trying to code this so others can pick it up fairly quickly. I am extremely rusty and only code once in a while. So I try to follow common ways of doing it. I had some ideas but the code becomes hard to read, mostly because of me.
I saw the below link but was not sure if a ListBox was a good container for this.
Dynamic filling WrapPanel buttons from DB, setting the event handlers
I am sure a wrappenel is what I would have to use, but do I put it in a container or use it directly. Do I put it in Xaml or code it all, for issues like spacing between buttons? I think I am overthinking it and need to skip for a little bit.
Thank you,
It sounds like you want an ItemsControl, bound to your categories, with a WrapPanel as the ItemsPanel. The Button would go in the ItemTemplate.
<ItemsControl ItemsSource="{Binding CategoriesFromDatabase}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding}"
Command="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl},Path=DataContext.AddToTicketCommand}"
CommandParameter="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Here I assumed that your view model has properties "CategoriesFromDatabase" (an IEnumerable that you populate from the database), and an ICommand "AddtoTicketCommand" which takes the category as a parameter.
I'm not sure about the best way to implement this in WPF, so I'll state my problem first.
I have a collection of frames. Each frame has two images. Let's say I have 10 frames giving a total of 20 images. I want to show the images at the bottom of the screen organized like a film strip - 2 rows and 10 columns. When the user clicks on one of this images or uses the arrow, it should become selected and the selected image information will be used somewhere else in the application.
I've implemented it as a ListBox with ItemsSource bound to my viewmodel's Frames collection (an observablecollection). In the DataTemplate of the ListBox, I've created a grid with two rows, each one containing a Image control. The one on row 0 is bound to TopImage (a property of my Frame class) and the bottom one is bound to BottomImage.
All this work, but the problem is that when I use the arrows, the whole frame (item) gets selected. How do I select each image in the datatemplate individually?
OR
Is there a better way to implement this>
You have two problems:
You want to separate the selectability of the upper and lower images in a frame
You want the arrow keys to be able to navigate images in two dimensions
If you did not have the arrow key requirement, then you could solve the first problem by nesting ListBox objects inside a parent ItemsControl. But then the arrows only do the right thing within a ListBox. To address that requires a different approach.
Here is a 2x2 grid data-bound to a four-element collection of images. Here we use the little-used UniformGrid to cause the collection to wrap after so many columns. Since we're using an ItemsControl, we lose automatic selection support but we get it back by making the Image control the content of a Button.
<Grid>
<Grid.Resources>
<x:Array x:Type="sys:String" x:Key="sampleData">
<sys:String>http://thecybershadow.net/misc/stackoverflow.png</sys:String>
<sys:String>http://thecybershadow.net/misc/sourceforge.png</sys:String>
<sys:String>http://thecybershadow.net/misc/stackoverflow.png</sys:String>
<sys:String>http://thecybershadow.net/misc/sourceforge.png</sys:String>
</x:Array>
</Grid.Resources>
<ItemsControl ItemsSource="{StaticResource sampleData}" Focusable="False">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="2"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button>
<Button.Content>
<Image Source="{Binding}"/>
</Button.Content>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
The net effect is a 2x2 grid of images that you can freely arrow around between. You can use styling to make the button aspect less button-like without losing focusability. So bind all twenty images to this view, first the top ten and then the bottom ten. You can also bind the column count from the same data source.