Load data in ListBox with check box - c#

I need load some data(Employee) in a listbox with check box. So the problem is how can I load other values, because in this moment only I can load the "Name" of the employee, and I need load other datas like "LastName", "Age", ...etc
I don't know how should be the syntax in the Content.
This is the xaml
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Name="CheckBoxZone" Content="{Binding Name}" Tag="{Binding TheValue}" Checked="CheckBoxZone_Checked"
Margin="0,5,0,0"/>
</DataTemplate>
</ListBox.ItemTemplate>

Basically you have to enhance layout of the ListItem template so along with CheckBox you can display another controls:
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" Name="CheckBoxZone" Content="{Binding Name}" Tag="{Binding TheValue}" Checked="CheckBoxZone_Checked" Margin="0,5,0,0"/>
<TextBlock Grid.Column="1" Text="{Binding LastName}"></TextBlock>
</Grid>
</DataTemplate>
If you want to pass item itself to a content of CheckBox (why you need that?) use simply this:
<CheckBox Grid.Column="0" Name="CheckBoxZone" Content="{Binding}" Tag="{Binding TheValue}" Checked="CheckBoxZone_Checked" Margin="0,5,0,0"/>

For most flexibility, use a DataTemplate for the CheckBox.
<CheckBox Content="{Binding }">
<CheckBox.ContentTemplate>
<DataTemplate>
<TextBlock>
<Run Text="{Binding Name}"/>
<Run Text="{Binding Family}" FontWeight="Bold"/>
<Run Text="{Binding Age, StringFormat='({0:d})'}" FontStyle="Italic"/>
</TextBlock>
</DataTemplate>
</CheckBox.ContentTemplate>
</CheckBox>
[Assuming Age is of type int, use {0:f} if it's a double]
This will result in something like this: Maikol Smith (36)
Each Run tag should be on a new line for the TextBlock to insert a space between them.

Related

How do I control the number of textboxes displayed in a listbox based on the state of a checkbox using MVVM

I am collecting messages from a com port. When the message is received a time stamp is recorded. I then display the time stamp followed by the message. It looks like:
01/02/2022 13:14:15.123 00 48 B4 68 33
I want to add a checkbox that will show the timestamp when checked, and just the message when unchecked.
My XAML for displaying the timestamp and message:
<ListBox Grid.Row="1" x:Name="MessageList" Margin="10" ItemsSource="{Binding Path=SDIMessages}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding RecivedTime, StringFormat=dd-MM-yyyy HH:mm:ss.fff}"/>
<TextBlock Text="{Binding Message}" Margin="10,0,0,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My code for the checkbox
<CheckBox Grid.Row="0" VerticalAlignment="Bottom" Margin="10,0,0,0" IsChecked="{Binding ShowTimeStamp, Mode=TwoWay}" Content="Display Time Stamp"/>
Currently I have the binding for ShowTimeStamp working correctly. How do I hide the TimeRecived? I am still learning C#, XAML and MVVM. I believe I need to use a datatrigger somehow but how do I make the trigger from the checkbox affect a listbox?
you can give checkbox a name ("CheckTimeStamp") and bind TextBlocks Visibility directly to IsChecked property (without involving view model) using BooleanToVisibilityConverter:
<CheckBox Grid.Row="0" Name="CheckTimeStamp" VerticalAlignment="Bottom" Margin="10,0,0,0" IsChecked="{Binding ShowTimeStamp, Mode=TwoWay}" Content="Display Time Stamp"/>
<ListBox Grid.Row="1" x:Name="MessageList" Margin="10" ItemsSource="{Binding Path=SDIMessages}">
<ListBox.Resources>
<BooleanToVisibilityConverter x:Key="boolToVisibility"/>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding RecivedTime, StringFormat=dd-MM-yyyy HH:mm:ss.fff}"
Visibility="{Binding ElementName=CheckTimeStamp, Path=IsChecked, Converter={StaticResource boolToVisibility}}"/>
<TextBlock Text="{Binding Message}" Margin="10,0,0,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

How to set a secondary control MaxWidth property to the same as another in a different container

I have this StackPanel in one grid on my form:
<StackPanel x:Name="panelWeelyBibleReading" Grid.Row="2" Grid.Column="0" Margin="2">
<Label>Bible Reading for Week:</Label>
<TextBox x:Name="textWeeklyBibleReading">PSALMS 60-68</TextBox>
</StackPanel>
<StackPanel Grid.Row="3" Grid.Column="0" Margin="2">
<Label>Opening Song:</Label>
<ComboBox x:Name="comboSongOpen" ItemsSource="{StaticResource SongTitles}">
<ComboBox.ItemTemplate>
<DataTemplate DataType="local:SongTitleItem">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Number, StringFormat='000 - '}" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.MaxWidth>
<Binding Path="ActualWidth"
ElementName="textWeeklyBibleReading"/>
</ComboBox.MaxWidth>
</ComboBox>
</StackPanel>
Further down the form in a different grid I have this :
<StackPanel Grid.Row="3" Grid.Column="0" Margin="2">
<Label>Closing Song:</Label>
<ComboBox x:Name="comboSongEnd" ItemsSource="{StaticResource SongTitles}">
<ComboBox.ItemTemplate>
<DataTemplate DataType="local:SongTitleItem">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Number, StringFormat='000 - '}" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.MaxWidth>
<Binding Path="ActualWidth"
ElementName="panelWeeklyBibleReading.textWeeklyBibleReading"/>
</ComboBox.MaxWidth>
</ComboBox>
</StackPanel>
Initially I tried using the same "textWeeklyBibleReading" for the MaxWidth in the second combo. But it doesn't work. No warnings. Just doesn't work. So I thought about applying a name to the previous StackPanel in teh hopes I could use it as some kind of access point. But it still doesn't work.
So my problem is that I need to set the MaxWidth on the second combo, which is in a different grid, but using the value that was calculated on the first grid combo. Am I making sense?
I would show the complete form markup if it helps.
You should edit to:
<ComboBox.MaxWidth>
<Binding Path="Width"
ElementName="textWeeklyBibleReading"/>
</ComboBox.MaxWidth>
<Binding Path=Width, ElementName=textWeeklyBibleReading/>
cause there is no property such as ActualWidth, instead it should be Width. And there is no need to write container name panelWeeklyBibleReading, just write ElementName that you need.
Update:
<ComboBox.ItemTemplate>
<DataTemplate DataType="local:SongTitleItem">
<StackPanel Orientation="Horizontal" MaxWidth="{Binding Path=Width,
ElementName=textWeeklyBibleReading}">
<TextBlock Text="{Binding Number, StringFormat='000 - '}" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
You should set MaxWidth of StackPanel of ComboBox cause outer StackPanel``(<StackPanel Grid.Row="3" Grid.Column="0" Margin="2">) which contains your ComboBox automatically sets Width to the outer StackPanel to your ComboBox. So I suggest to bind Width of your ComboBox to its ItemTemplate. Cause ItemTemplate has Data/template, then it is better to bind Width of ComboBox to StackPanel located into your DataTemplate.

How to change value of control inside pivot datatemplate on listpicker_selectedIndexChagned event

<phone:Pivot Title="Bank" x:Name="pivotBank"
ItemsSource="{Binding PivotItems}">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding StrBankName}"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel>
<toolkit:ListPicker x:Name="listPickerAccountNumber" SelectionChanged="listPickerAccountNumber_SelectionChanged"
ItemsSource="{Binding listAccountDetails}" >
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding StrAccountNumber}" />
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding StrAccountNumber}" />
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<TextBlock Text="Account Detail"></TextBlock>
<TextBlock Name="textBlockAccountNumber" Text="{Binding StrAccountNumber}"></TextBlock>
<TextBlock Name="textBlockBalance" Text="{Binding DblBalance}"></TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
Above pivot control contains headers as bank names and pivot datatemplate contains list of accounts. I want to change the control values of textBlockAccountNumber and textBlockBalance on SelectedIndexChanged event of listPicker.
My question is, is there any way to find control by name from the pivot. I used INotifyPropertyChanged Interface and implemented event with handler but not able to get the rid of it.

Easiest way to access Texblock inside listbox itemtemplate

I have seen a lot of questions and answers with almost the same problem, but none of these answers arent working for me. Soo, my code is:
<ListBox ItemsSource="{Binding Avakuvaandmed}" x:Name="lboxandmed" HorizontalAlignment="Left" Height="552" VerticalAlignment="Top" Width="970" SelectionChanged="lboxandmed_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" x:Name="spanVärviSeda">
I HAVE TO GET VALUE OF THIS --> <TextBlock x:Name="IDbox" Width="50" Text="{Binding Id}"></TextBlock>
<TextBlock Width="130" Text="{Binding Nrmärk}"></TextBlock>
<TextBlock x:Name="txtKehtivus" Width="130" Text="{Binding Lõpp}"></TextBlock>
<TextBlock Width="130" Text="{Binding Eesnimi}"></TextBlock>
<TextBlock Width="130" Text="{Binding Perenimi}"></TextBlock>
<TextBlock Width="130" Text="{Binding Mark}"></TextBlock>
<TextBlock Width="130" Text="{Binding Mudel}"></TextBlock>
<TextBlock Width="130" Text="{Binding Aasta}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And I have to get the value of the textblock named "IDbox".
Please can someone help me, or atleast give me a clue how.
Your code looks correct. If you want to access the Value of IDbox in code behind then you can do it by Avakuvaandmed.ElementAt(rowno).Id because you are binding Id to the IDBox. If you want to access the BoxId value in xaml. Then use binding as follows:
{Binding Avakuvaandmed[rowno],Path=Id}
You can also access Textblock value by using VisualTreeHelper class. You will need to go traverse all elements in ListBox.

Show only allowed data in WPF Listbox Databinding

I currently have a list box:
<ListBox HorizontalAlignment="Left"
ItemsSource="{Binding Data, ElementName=bookingDomainDataSource}"
Margin="158,134,0,45"
x:Name="bookingListBox"
Width="429"
SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay, ElementName=bookingComboBox}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=userId}"
Width="100" />
<TextBlock Text="{Binding Path=bookingName}"
Width="100" />
<TextBlock Text="{Binding Path=bookingDate}"
Width="100" />
<TextBlock Text="{Binding Path=showId}"
Width="100" />
<TextBlock Text="{Binding Path=paymentId}"
Width="100" />
<TextBlock Text="{Binding Path=ticketId}"
Width="100" />
<TextBlock Text="{Binding Path=ticketQuantity}"
Width="100" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And I would like to only show rows from the itemssource that have a certain userId, how can I do this?
Thanks.
I think the best solution to this would be to filter the data source BEFORE you get to the front end.
You want to define a filter for your listview.
Uodate: sorry missed the silverlight tag. However CollectionViewSource should still be useful to you. Here a sample using the CollectionViewSource in Silverlight.

Categories