We Keep Coding

WPF- Bind list to listview

I'm creating a wpf application and capturing images from my usb webcam. What I have tried is store all captured images in a List and show them in a Listview
public List<BitmapImage> listOfCapturedImages = new List<BitmapImage>();
private void addNewImageButton_Click(object sender, RoutedEventArgs e)
{
CameraWindow cw = new CameraWindow(this);
cw.newlyCapturedImage += (BitmapImage newImage) =>
{
listOfCapturedImages.Add(newImage);
newlyAddedImage.Source = newImage;
};
cw.Show();
}
XAML:
<ListView ItemsSource="{Binding listOfCapturedImages}" Height="345" Margin="577,10,10,0" VerticalAlignment="Top">
<ListView.View>
<GridView>
<GridView.ColumnHeaderContainerStyle>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</GridView.ColumnHeaderContainerStyle>
<GridViewColumn x:Name="previewImagesColumn">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Button x:Name="firstImageOflistViewButton" Content="{Binding listOfCapturedImages}" Height="50">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter/>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
Could someone help me please, what I'm missing?

Thanks a lot guys, I have fixed my problem with your helps. I want to share my working code just for someone else who may have the same problem with me. Here is the working code:
public ObservableCollection<BitmapImage> listOfCapturedImages { get; } =
new ObservableCollection<BitmapImage>();
private void addNewImageButton_Click(object sender, RoutedEventArgs e)
{
CameraWindow cw = new CameraWindow(this);
cw.newlyCapturedImage += (BitmapImage newImage) =>
{
listOfCapturedImages.Add(newImage);
newlyAddedImage.Source = newImage;
};
cw.Show();
}
I also have added this.DataContext = this;.
public Test(Window window)
{
InitializeComponent();
this.DataContext = this;
}
And finally XAML:
<ListView ItemsSource="{Binding listOfCapturedImages}" Height="345" Margin="577,10,10,0" VerticalAlignment="Top">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="1"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

You are binding to field not a property.
Change:
public List<BitmapImage> listOfCapturedImages = new List<BitmapImage>();
to
public ObservableCollection<BitmapImage> ListOfCapturedImages {get;} = new ObservableCollection<BitmapImage>();
ObservableCollection is the collection that will notify of changing its contents and the binding will update after you add items to it. List will not do that.
Also include some Image displaying item:
<ListView ItemsSource="{Binding ListOfCapturedImages}" >
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Couple of problems
Use ObservableCollection instead of List. List do not notify View to update itself when an item is added to it. ObservableCollection does that.
listOfCapturedImages is a Field. Even if you set is to public, it cannot be used to bind in WPF. Because Field are invisible to XAML, whereas Properties are visible. So do this
public ObservableCollection<BitmapImage> listOfCapturedImages { get; } =
new ObservableCollection<BitmapImage>();

You should have Image control in your DataTemplate. This is what i am using:
<ListView ItemsSource="{Binding listOfCapturedImages}" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="1"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

GridView with dynamic item number per row in Universal Application

I'm trying to display a GridView which alternates a row with only one expanded item and a row that displays many items, let's say three.
In both of the cases, the items should fill the page width. This means that the row containing multiple items should divide the space in three equal areas.
My attempt was to use VariableSizedWrapGrid as item panel.
<GridView x:Name="rowGrid" IsSwipeEnabled="False" ItemsSource="{Binding AppCollection}"
ItemTemplateSelector="{StaticResource HomeDataTemplateSelector}" SelectionMode="None" IsItemClickEnabled="True" Margin="0,0,12,0">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Then I set ColumnSpan property inside the data template selector:
public class HomeDataTemplateSelector : DataTemplateSelector
{
public DataTemplate DefaultTemplate { get; set; }
public DataTemplate WideItemTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
var lv = GetListView(container);
if (lv != null)
{
var i = lv.Items.IndexOf(item);
if (i % 4 == 0)
{
VariableSizedWrapGrid.SetColumnSpan(container as UIElement, 3);
return WideItemTemplate;
} else {
VariableSizedWrapGrid.SetColumnSpan(container as UIElement, 1);
return DefaultTemplate;
}
}
return DefaultTemplate;
}
public static GridView GetListView(DependencyObject element)
{
var parent = VisualTreeHelper.GetParent(element);
if (parent == null)
{
return null;
}
var parentListView = parent as GridView;
return parentListView ?? GetListView(parent);
}
}
Here are the two templates for completeness:
<DataTemplate x:Key="DefaultItemDataTemplate">
<StackPanel Height="170" Background="Transparent">
...
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="WideItemDataTemplate">
<StackPanel Height="170" Background="Transparent">
...
</StackPanel>
</DataTemplate>
This is what I'm getting. It's like the first wide item propagates its width to the others elements.
I followed this article.

You need to set Orientation as "Horizontal" for VariableSizedWrapGrid. And you would have to set width for StackPanel which is in DataTemplate. Then it will work.
<Page.Resources>
<DataTemplate x:Key="DefaultItemDataTemplate">
<StackPanel Height="170" Background="Transparent">
<Image Source="{Binding}"></Image>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="WideItemDataTemplate">
<StackPanel Height="170" Width="250" Background="Transparent">
<Image Source="{Binding}"></Image>
</StackPanel>
</DataTemplate>
<local:HomeDataTemplateSelector x:Name="HomeDataTemplateSelector" DefaultTemplate="{StaticResource DefaultItemDataTemplate}" WideItemTemplate="{StaticResource WideItemDataTemplate}"></local:HomeDataTemplateSelector>
</Page.Resources>
<Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView x:Name="rowGrid" IsSwipeEnabled="False" ItemsSource="{Binding AppCollection}"
ItemTemplateSelector="{StaticResource HomeDataTemplateSelector}" SelectionMode="None" IsItemClickEnabled="True" Margin="0,0,12,0">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
See screenshot

Data binding to Listbox from JSON Response

This is the first time i am doing xaml so please understand that I might be slow in learning
Below is my CS codes. I am trying to bind the "attributes" to listbox.
public DirectionPage()
{
InitializeComponent();
List<Feature> features = App.dResult.directions[0].features;
foreach (Feature f in features)
{
Attributes a = f.attributes;
MessageBox.Show(a.text);
}
}
public ObservableCollection<Feature> test = new ObservableCollection<Feature>();
Below is the XAML codes.
<ListBox x:Name="directionListBox" ItemsSource="{Binding}" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding text}" Style="{StaticResource PhoneTextTitle2Style}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Any help will be greatly appreciated.

I didn't see the collection of attributes.
Possibly what you can do is collect the attributes in a list may be your test and put it in the biding.
Or put the Features collection as itemsource of your list box.
i.e.
public DirectionPage()
{
InitializeComponent();
List<Attributes> LAtributes=new List<Attributes>();
List<Feature> features = App.dResult.directions[0].features;
foreach (Feature f in features)
{
Attributes a=new Attributes();
a = f.attributes;
LAttributes.add(a);
MessageBox.Show(a.text);
}
directionListBox.ItemsSource=Lattribute;
}
and
<ListBox x:Name="directionListBox" ItemsSource="{Binding}" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Path=text}" Style="{StaticResource PhoneTextTitle2Style}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Hopefully this will help you!

How to add a table/grid to a vb.net/C# WPF window?

I have an asynchronous server listening for clients on a local network. As each client sends a connect message to the server, I want the server to display the client's name in a table.
Assume that I already have the client's name and IP address as a string ClientDetails separated by a _ e.g. "PC5_192.168.1.10"
*EDIT *
What I want
As clients join in, I would like to add each client as a new row to the table/grid.
I am using WPF. Either vb.net or C# answer will be fine, I can translate it myself.

I Prepared a small example of "the WPF way" to do this.
It looks like this in my computer:
Im using random values as the data source:
public class RandomConnectionAdder
{
public Timer timer;
public Random random = new Random();
public Action<Connection> OnConnectionAdded { get; set; }
public RandomConnectionAdder(Action<Connection> onConnectionAdded)
{
OnConnectionAdded = onConnectionAdded;
timer = new Timer(x => AddConnection(), null, 5000, 2000);
}
private void AddConnection()
{
var computernumber = random.Next(1, 50);
var newrandomconnection = new Connection()
{
ComputerName = "PC" + computernumber.ToString(),
IPAddress = "192.168.1." + computernumber,
ConnectionTime = DateTime.Now
};
if (OnConnectionAdded != null)
OnConnectionAdded(newrandomconnection);
}
}
Notice that I added a level of indirection via the use of the Action<Connection> delegate to keep the separation of concerns. The "listener" has the responsibility of listening for incoming connections, what to do when a new connection is added is outside its scope.
This is the Model class:
public class Connection: INotifyPropertyChanged
{
private string _computerName;
public string ComputerName
{
get { return _computerName; }
set
{
_computerName = value;
OnPropertyChanged("ComputerName");
}
}
private string _ipAddress;
public string IPAddress
{
get { return _ipAddress; }
set
{
_ipAddress = value;
OnPropertyChanged("IPAddress");
}
}
private DateTime _connectionTime;
public DateTime ConnectionTime
{
get { return _connectionTime; }
set
{
_connectionTime = value;
OnPropertyChanged("ConnectionTime");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
This is the Window Code-behind:
public partial class Window6 : Window
{
private RandomConnectionAdder adder;
private ObservableCollection<Connection> Connections;
public Window6()
{
InitializeComponent();
Connections = new ObservableCollection<Connection>();
adder = new RandomConnectionAdder(x => Dispatcher.BeginInvoke((Action) (() => AddConnection(x))));
DataContext = Connections;
}
private void AddConnection(Connection connection)
{
Connections.Add(connection);
}
}
As you can see, the window instantiates the RandomConnectionAdder and sets its OnConnectionAdded action to a lambda that dispatches the addition of the item to the ObservableCollection to the UI Thread via the Dispatcher.
Finally, this is the whole XAML:
<Window x:Class="WpfApplication5.Window6"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window6" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<GroupBox Header="DataGrid">
<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False" IsReadOnly="True">
<DataGrid.Columns>
<DataGridTextColumn Header="Computer Name" Binding="{Binding ComputerName}"/>
<DataGridTextColumn Header="IP Address" Binding="{Binding IPAddress}"/>
<DataGridTextColumn Header="Connection Time" Binding="{Binding ConnectionTime, StringFormat='HH:mm:ss'}"/>
</DataGrid.Columns>
</DataGrid>
</GroupBox>
<GroupBox Header="Large Icons (ListBox)" Grid.Column="1">
<ListBox ItemsSource="{Binding}">
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter/>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel Margin="5" Width="120">
<StackPanel DockPanel.Dock="Bottom">
<TextBlock Text="{Binding ComputerName}" TextAlignment="Center"/>
<TextBlock Text="{Binding IPAddress}" TextAlignment="Center"/>
<TextBlock Text="{Binding ConnectionTime, StringFormat='HH:mm:ss'}" TextAlignment="Center"/>
</StackPanel>
<Border Height="60" Width="60" BorderBrush="Black" BorderThickness="1">
<TextBlock Text="Some Icon" VerticalAlignment="Center" TextAlignment="Center"/>
</Border>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</GroupBox>
<GroupBox Header="Tiles (ListBox)" Grid.Column="2">
<ListBox ItemsSource="{Binding}">
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter/>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel Margin="5" Width="120">
<Border Height="40" Width="50" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left">
<TextBlock Text="Some Icon" VerticalAlignment="Center" TextAlignment="Center"/>
</Border>
<StackPanel>
<TextBlock Text="{Binding ComputerName}" TextAlignment="Center"/>
<TextBlock Text="{Binding IPAddress}" TextAlignment="Center"/>
<TextBlock Text="{Binding ConnectionTime, StringFormat='HH:mm:ss'}" TextAlignment="Center"/>
</StackPanel>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</GroupBox>
</Grid>
</Window>
As you can see, Im in no way manipulating UI elements in code. This keeps the code clean and easy and well separated, as the Application logic / Data is in no way dependant on the state of UI elements.
Also, in this example can be seen the concept of "Binding several different Views to the Same ViewModel", which in this case is the ObservableCollection itself.
This is "the WPF" approach for everything. You almost never have to manipulate UI elements in code, at least not in regards to application logic or data.
Just copy and paste my code in a File -> New Project -> WPF Application and see the results for yourself.

wpf check list box

I m new to wpf.In order to get check list box functionality ,I have added below xaml to my code,but there is no output in my screen.only blank,what it could be?
<TabItem Header="Samples" >
<ListBox Margin="10" Width="373" Height="236">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="MyText"/>
<CheckBox IsChecked="False"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</TabItem>

just have a look at this basic sample
http://merill.net/2009/10/wpf-checked-listbox/

List box is a bit wired for such task..Have a look at ItemsControl.
Here is the code i use:
<ItemsControl
ItemsSource="{Binding ***}" IsTabStop="False">
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox
Content="{Binding Name}"
IsChecked="{Binding IsSelected}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Replace your code with this
<TabItem Header="Roles" >
<ListBox Margin="10" Width="373" Height="236">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="MyText"/>
<CheckBox IsChecked="False"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBoxItem>Hi</ListBoxItem>
</ListBox>
</TabItem>
and tell us if it still shows blank

Better still, just use the new CheckListBox control in the Extended WPF Toolkit
http://wpftoolkit.codeplex.com/wikipage?title=CheckListBox&referringTitle=Home

This might help
1.Inorder to work datatemplate you must specify itemsource, here i have bounded a Stateslist a collection of items into it.
2.Also set the Datacontext to ViewModel or the CodeBehind as datacontext.
3.Datacontext will distribute the StateList properties collection to the listbox itemsource
using codebehind -
public Window1()
{
InitializeComponent();
this.DataContext = this;
LoadData();
}
using viewmodel
public Window1()
{
InitializeComponent();
DataContext = new Window1ViewModel();
LoadData();
}
//MyItemsource Property for listbox
private ObservableCollection<States> _stateslist;
public ObservableCollection<States> StatesList
{
get { return _stateslist; }
set
{
_stateslist = value;
RaisePropertyChanged(() => StatesList);
}
}
// Sample Data Loading
public void LoadData()
{
StatesList = new ObservableCollection<States>();
StatesList.Add(new States
{
StateName = "Kerala"
});
StatesList.Add(new States
{
StateName = "Karnataka"
});
StatesList.Add(new States
{
StateName = "Goa"
});
}
Window1.Xaml
<ListBox ItemsSource="{Binding StatesList}" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<CheckBox IsChecked="{Binding IsSelected"} Content="{Binding StateName}" />
<TextBox Text="{Binding TextBoxValue}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Check this out it isworking..you are using TabItem but you didnt define it in TabControl
<TabControl>
<TabItem Header="Tab1">
<ListBox Margin="10" Width="373" Height="236">
<ListBox.Items>
<StackPanel Orientation="Horizontal">
<TextBlock Text="MyText"/>
<CheckBox IsChecked="False"/>
</StackPanel>
</ListBox.Items>
</ListBox>
</TabItem>
</TabControl>
If you are new in WPF use XamlPadX it will give you great help to practice out on it..