Develop Reference

Binding bool value in ObservableCollection<Tuple<class, bool, bool>> to ListBox DataTemplate CheckBox crashes the program

I'm getting my Users from API, and putting them to ObservableCollection of Tuple elements (need 2 bool values for CheckBox IsSelected fields that I use later)
private ObservableCollection<Tuple<UserDetails, bool, bool>> _users;
public ObservableCollection<Tuple<UserDetails, bool, bool>> Users
{
get { return _users; }
set
{
_users = value;
OnPropertyRaised("Users");
}
}
public async Task GetUsers()
{
var tmp = await watchlistHelper.GetUsersAsync(); //API call
if (tmp != null)
{
Users = new ObservableCollection<Tuple<UserDetails, bool, bool>>();
foreach (UserDetails details in tmp.Content)
{
Users.Add(new Tuple<UserDetails, bool, bool>(details, false, false));
}
}
}
When I'm trying to use it without binding to bool values like:
<ListBox Grid.Row="1" ItemsSource="{Binding Users, ElementName=uc}" SelectionMode="Multiple">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="2" Text="{Binding Item1.UserName }" VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Everything displays properly (only UserName), but, when I try to bind it and use bool values, my program just crashes
<ListBox Grid.Column="2" Grid.Row="1" ItemsSource="{Binding Users, ElementName=uc}" HorizontalContentAlignment="Stretch" SelectionMode="Multiple">
<ListBox.ItemTemplate >
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition SharedSizeGroup="write"/>
<ColumnDefinition SharedSizeGroup="manage"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="2" Text="{Binding Item1.UserName}" VerticalAlignment="Center"/>
<CheckBox Margin="2" IsChecked="{Binding Item2}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1"/>
<CheckBox Margin="2" IsChecked="{Binding Item3}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="2"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If I hardcode CheckBox values in xaml or dont use them - it works as intended, so it must be problem with bool in Tuple Binding to CheckBox, but I just can't wrap my head around what could cause it.

UWP listview doesn't update after updating/adding an element to the MVVM collection list

I am frustrated with the listview ItemSource and MVVM binding. I am binding the listview with a data model. After loading the listview, I add another item to the listview, the update is not reflected in listview, but it shows that the number of items in the list collection is increased by one. If I add the add in the list collection in the constructor, it is shown in the listview.
XAML
<Page
x:Class="App20.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App20"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.DataContext>
<local:VictimsController></local:VictimsController>
</Page.DataContext>
<Grid Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="List of Victims/Trapped" HorizontalAlignment="Center" Style="{StaticResource HeaderTextBlockStyle}"/>
</Grid>
<Grid Grid.Row="1">
<ListView x:Name="ls" ItemsSource="{Binding VictimList, Mode=TwoWay}">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="0" Text="GPSLatitute" />
<TextBlock FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="1" Text="GPSLongtitude" />
<TextBlock FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="2" Text="Date" />
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Center" Grid.Column="0" Text="{Binding GPSLatitute}" />
<TextBlock HorizontalAlignment="Center" Grid.Column="1" Text="{Binding GPSLongtitude}" />
<TextBlock HorizontalAlignment="Center" Grid.Column="2" Text="{Binding Date}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
<Button Content="Publish" VerticalAlignment="Top"
Height="76" Width="114" Click="Publish_Click" />
</Grid>
Controller
public class VictimsController : INotifyPropertyChanged
{
List<VictimProfile> _victims = new List<VictimProfile>();
public VictimsController()
{
//Victims.Add(new VictimProfile() { GPSLatitute = 123, GPSLongtitude = 2333 });
}
public List<VictimProfile> VictimList
{
get
{
return _victims;
}
set
{
_victims = value;
OnPropertyChanged("VictimList");
}
}
public void addVictim(VictimProfile profile)
{
_victims.Add(profile);
OnPropertyChanged("VictimList");
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Adding one item to the listview model or collection
async void client_MqttMsgPublishReceived(object sender, MqttMsgPublishEventArgs e)
{
string ReceivedMessage = Encoding.UTF8.GetString(e.Message);
//convert the message to json format
var payLoad = JsonConvert.DeserializeObject<VictimProfile>(ReceivedMessage);
// we need this construction because the receiving code in the library and the UI with textbox run on different threads
await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => {
txt.Text += ReceivedMessage;
VictimsController model = this.DataContext as VictimsController;
model.addVictim(payLoad); //add item to the list collection
Debug.WriteLine("count: " + ls.Items.Count); //this shows that listview has one more item added to it, but nothing is shown in the listview
//ls.Items.Add(payLoad);
});
}
The point is the list collection has the new item and the ls (listview) also has the item, but it is not shown in the listview.

Finally I solved it.
Changing the list to observable collection has solved the problem.
ObservableCollection<VictimProfile> _victims = new ObservableCollection<VictimProfile>();

Resize controls in a list to fill the available space WPF

I'm trying to find a way to display a horizontal List of items in WPF, the trick is that the Window which contains the List will be displayed on various screen sizes and all the items in the list need to be resized to fill the available space without any use of scroll bars.
I've found that a ViewBox control can be used to achieve the desired affect, but the ViewBox works only if I set <RowDefinition Height="300"/>.This approach doesn't work because if you have a certain number of items in the List they start becoming cut off.
If I remove <RowDefinition Height="300"/> then the first item in the list fills the screen and the rest are cut off
Any suggestions on how I can make all the items in the list resize to fill the available space no matter what the screen resolution is?
XAML:
<Window x:Class="ViewBoxExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowState="Maximized">
<ItemsControl ItemsSource="{Binding Path=Employees}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="300"/>
</Grid.RowDefinitions>
<Viewbox Grid.Row="0" Grid.Column="0">
<TextBlock Text="{Binding Path=Name}" />
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="1">
<TextBlock Text="{Binding Path=Surname}" />
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="2">
<TextBlock Text="{Binding Path=Age}" />
</Viewbox>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Window>
C#:
using System.Collections.Generic;
using System.Windows;
namespace ViewBoxExample
{
public partial class MainWindow : Window
{
public List<Employee> _employees = new List<Employee>();
public List<Employee> Employees
{
get { return _employees; }
set { _employees = value; }
}
public MainWindow()
{
InitializeComponent();
Employees = new List<Employee>()
{
new Employee{ Name="Name1",Surname="Surname1",Age=20},
new Employee{ Name="Name2",Surname="Surname2",Age=30},
new Employee{ Name="Name3",Surname="Surname3",Age=40},
new Employee{ Name="Name4",Surname="Surname4",Age=50},
new Employee{ Name="Name5",Surname="Surname5",Age=60},
};
this.DataContext = this;
}
}
public class Employee
{
public string Name { get; set; }
public string Surname { get; set; }
public int Age { get; set; }
}
}

Just put your ItemsControl in ViewBox
<Viewbox>
<ItemsControl ItemsSource="{Binding Path=Employees}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Viewbox Grid.Row="0" Grid.Column="0">
<TextBlock Text="{Binding Path=Name}" />
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="1">
<TextBlock Text="{Binding Path=Surname}" />
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="2">
<TextBlock Text="{Binding Path=Age}" />
</Viewbox>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Viewbox>
EDIT: if i am doing the same type of thing i would use the actual Height and Width approach as explained by Kent Boogaart in this Answer

ListBox in RowDetail binding failure

I have a WPF application. It contains OrderBlock object which contains other objects, plesase see a brief view of the class.
public class OrderBlocks
{
private List<Order> _orders;
[XmlElement("tF_Transactions")]
public List<Order> Orders { get { return _orders; } set { _orders = value; OnPropertyChanged("Orders"); } }
}
public class Order : INotifyPropertyChanged
{
[XmlIgnore]
public List<Duplications> DuplicateHolder { get; set; }
}
public class Duplications
{
public string ID { get; set; }
public string Name { get; set; }
public Duplications(string newID, string newName)
{
ID = newID;
Name = newName;
}
}
I have a datagrid that is bound to my object Orders of type List Orders. My datagrid has a row detail so that when a user clicks on a row further details are displayed. I have added a listbox to this row detail. I want this row detail to show a listbox which displays my object DuplicateHolder of type List Duplications.
At the moment the listbox is empty. Please see my attempted XAML code below. Any help would be great as always.
<ListBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Name="lbIdentifier" SelectionMode="Single" DataContext="{Binding OrderBlock}" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=DuplicateHolder.ID}" FontSize="10" HorizontalAlignment="Left" Margin="5,0,0,0"/>
<TextBlock Grid.Column="1" Text="{Binding Path=DuplicateHolder.Name}" FontSize="10" HorizontalAlignment="Left" Margin="5,0,0,0"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Try this
<Listbox ItemSource = {Binding DuplicateHolder}/>
and
<TextBlock Grid.Column="0" Text="{Binding Path=ID}".../>

t seems like you did not set the bindings correctly because the listbox Context should be a list of Duplications and the ItemTemplate should be for one Duplication instance from the list of duplicates. So if the global datacontext is an instance of OrderBlocks the listbox will be bound to the DuplicateHolder of an Order:
<ListBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Name="lbIdentifier" SelectionMode="Single" DataContext="{Binding Path=DuplicateHolder}" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=ID}" FontSize="10" HorizontalAlignment="Left" Margin="5,0,0,0"/>
<TextBlock Grid.Column="1" Text="{Binding Path=Name}" FontSize="10" HorizontalAlignment="Left" Margin="5,0,0,0"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Let TextBox fill remaining Space in Grid

I have a ListBox that contains a Grid.
The Grid has a Label Column, a GridSplitter and a TextBox Column.
How can I make the Grid take up the entire Width of the ListBox and make the TextBox use the entire space of the Grid Column?
<Grid>
<ListBox x:Name="myList" Margin="4" ItemsSource="{Binding Path=Parameter}" MinHeight="60" Grid.IsSharedSizeScope="True" HorizontalAlignment="Stretch" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="parameterGrid" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="labelColumn" Width="Auto" SharedSizeGroup="LabelColumn"/>
<ColumnDefinition x:Name="splitterColumn" Width="5"/>
<ColumnDefinition x:Name="textColumn" Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Key}" Grid.Column="0"/>
<GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<TextBox Grid.Column="2" Text="{Binding Path=Value, UpdateSourceTrigger=LostFocus}"
IsEnabled="{Binding ElementName=_view, Path=DataContext.IsEditEnabled}">
</TextBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
The Parameter is just to demonstrate the idea:
public class Parameter
{
public string Key { get; set; }
public string Value { get; set; }
public Parameter(string key, string value)
{
Key = key;
Value = value;
}
}

Try setting HorizontalContentAlignment="Stretch" on the ListBox.

Dont give any Width and Height for TextBox.