I'm updating my project from .NET Framework 3.5 to .NET Framework 4.5.1. Everything works, except my databinding to a ComboBox. The ComboBox is part of a Itemscontrol. The XAML code:
<ItemsControl x:Name="AfmetingenLijst" BorderBrush="{DynamicResource {x:Static SystemColors.ActiveBorderBrushKey}}" BorderThickness="0" VerticalContentAlignment="Bottom" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,5,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="{Binding Lengte}" Tag="{Binding LID}" Margin="5,5,5,5" TextChanged="UpdateList"/>
<TextBox Grid.Column="1" Text="{Binding Breedte}" Tag="{Binding BID}" Margin="5,5,5,5" TextChanged="UpdateList"/>
<TextBox Grid.Column="2" Text="{Binding Hoogte}" Tag="{Binding HID}" Margin="5,5,5,5" TextChanged="UpdateList"/>
<TextBox Grid.Column="3" Text="{Binding Naam}" Margin="5,5,5,5" />
<ComboBox Grid.Column="4" ItemsSource="{Binding Path=items}" SelectedIndex="{Binding geselecteerdProduct}" SelectedValuePath="Code" DisplayMemberPath = "Naam" SelectionChanged="UpdateList" Height="25" HorizontalAlignment="Stretch" VerticalAlignment="Center"></ComboBox>
<Button Tag="{Binding ID}" Grid.Column="5" Margin="5,5,5,5" Content="{Binding Title}" Click="Afmeting_handler" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
In C# a list is filled with the databinding values:
afm = new List<Afmeting>();
if (afm.Count == 0)
{
afm.Add(new Afmeting() { ID = "+", LID = "L+", BID = "B+", HID = "H+", Title = "+", items = items });
afm[afm.Count - 1].geselecteerdProduct = 0;
afmetingen_counter++;
}
AfmetingenLijst.ItemsSource = afm;
The items in the ComboBox exists, I can select them by mouse. But by default SelectedIndex = -1. But in the list "geselecteerdProduct" (the databinding to SelectedIndex) is set to 0.
In .NET 3.5 it is working perfect, but in 4.x SelectedIndex and the value in "afm" is automatically set to -1.
Items is not empty, there are +- 5 items in the list.
Can someone help me?
I think this is a bug for WPF.
When ComboBox is nested in ItemsControl, and set SelectedIndex and SelectedValuePath at the same time, ComboBox's OnSelectionChanged will be fired tiwce at initialize, but SelectionChanged only once.
WPF ComboBox SelectedIndex debug:
To solve the problem is simple, just remove SelectedValuePath from the ComboBox.
XAML:
<ItemsControl x:Name="AfmetingenLijst" BorderBrush="{DynamicResource {x:Static SystemColors.ActiveBorderBrushKey}}" BorderThickness="0" VerticalContentAlignment="Bottom" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,5,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="{Binding Lengte}" Tag="{Binding LID}" Margin="5,5,5,5" TextChanged="UpdateList"/>
<TextBox Grid.Column="1" Text="{Binding Breedte}" Tag="{Binding BID}" Margin="5,5,5,5" TextChanged="UpdateList"/>
<TextBox Grid.Column="2" Text="{Binding Hoogte}" Tag="{Binding HID}" Margin="5,5,5,5" TextChanged="UpdateList"/>
<TextBox Grid.Column="3" Text="{Binding Naam}" Margin="5,5,5,5" />
<ComboBox Grid.Column="4"
ItemsSource="{Binding Path=items}"
SelectedIndex="{Binding geselecteerdProduct}"
DisplayMemberPath = "Naam"
SelectionChanged="UpdateList"
Height="25"
HorizontalAlignment="Stretch"
VerticalAlignment="Center">
</ComboBox>
<Button Tag="{Binding ID}" Grid.Column="5" Margin="5,5,5,5" Content="{Binding Title}" Click="Afmeting_handler" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Related
I am trying to bind Observablecollection<T> with ComboBox. ComboBox having Datatemplete
<ComboBox Width="150" Margin="20,0,0,5" Name="cbSelection" Height="20"
BorderThickness="2" BorderBrush="Black"
SelectedIndex="0" DataContext="{Binding AdComboBox}">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding XPath=LOC, Mode=OneWay}" Margin="5,0,5,0"/>
<TextBlock Grid.Column="1" Text="{Binding XPath=PUB, Mode=OneWay}" Margin="0,0,5,0"/>
<TextBlock Grid.Column="2" Text="{Binding XPath=EDI, Mode=OneWay}" Margin="0,0,5,0"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
but not get the data in ComboBox
what going wrong
thanks in advance
Use the ItemsSource of the ComboBox to point to the ObservableCollection<T>. Also: Use Path, not XPath which is used for binding to XML documents.
<ComboBox Width="150" Margin="20,0,0,5" Name="cbSelection" Height="20"
BorderThickness="2" BorderBrush="Black"
ItemsSource="{Binding AdComboBox}"
SelectedIndex="0">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="{Binding Path=LOC, Mode=OneWay}"
Margin="5,0,5,0"/>
<TextBlock Grid.Column="1"
Text="{Binding Path=PUB, Mode=OneWay}"
Margin="0,0,5,0"/>
<TextBlock Grid.Column="2"
Text="{Binding Path=EDI, Mode=OneWay}"
Margin="0,0,5,0"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Side note: you might want to rename the collection to something more functional instead of AdComboBox. E.g., Ads Because it is not a ComboBox but it is a collection of Ads(?)
I have a custom listbox with a label and a checkbox in each row. I would like to have the label on the far left and the checkbox on the far right.
approach:
<ListBox x:Name="lbFieldsreq" HorizontalAlignment="Left" Height="100" Margin="513,232,0,0" VerticalAlignment="Top" Width="100">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Content="{Binding name, Mode=OneWay}" Grid.Column="0" HorizontalAlignment="Left" />
<Label Grid.Column="1" HorizontalAlignment="Center" /> <!--Empty column -->
<CheckBox IsChecked="{Binding ticked ,Mode=OneWay}" Grid.Column="2" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
current look:
Thx
Your XAML is mostly fine. All you really need to do is to set the ListBox.HorizontalContentAlignment property to "Stretch". This basically forces each item in the collection to stretch to fill with entire Width of the related ListBoxItem. However, you could improve this further by setting the Grid.IsSharedSizeScope Attached Property to True. Setting this in conjunction with the SharedSizeGroup property enables us to ensure that the column Widths of each column of the DataTemplate are the same. Try this:
<ListBox x:Name="lbFieldsreq" HorizontalAlignment="Left" Height="100" ItemsSource="{Binding Items}" VerticalAlignment="Top" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True" Grid.IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="LabelColumn" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="CheckBoxColumn" />
</Grid.ColumnDefinitions>
<Label Content="{Binding}" Grid.Column="0" HorizontalAlignment="Left" />
<!--Empty column -->
<Label Grid.Column="1" HorizontalAlignment="Center" />
<CheckBox Grid.Column="2" IsChecked="{Binding ticked, Mode=OneWay}" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Currently having an issue where the header of my ListView is larger than my ListView Items, so the header doesn't line up properly. I could use a margin on the header as a hack to fix it, but surely there's a proper way to fix this?
<DataTemplate x:Key="HeaderTemplate" >
<Grid Height="36" Background="#99999999" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Uid="Name" TextWrapping="Wrap" HorizontalAlignment="Left" Text="Project" Grid.Column="0" Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock x:Uid="Qty" TextWrapping="Wrap" HorizontalAlignment="Left" Text="Qty" Grid.Column="1" Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock x:Uid="SubTotal" TextWrapping="Wrap" HorizontalAlignment="Left" Text="Sub Total" Grid.Column="2" Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock x:Uid="Total" TextWrapping="Wrap" HorizontalAlignment="Left" Text="Total" Grid.Column="3" Style="{StaticResource BodyTextBlockStyle}" />
</Grid>
</DataTemplate>
// ...
<ListView x:Name="CartGridView" ItemsSource="{Binding CartItmes}" HeaderTemplate="{StaticResource HeaderTemplate}"
Grid.Row="1" VerticalAlignment="Stretch" Width="auto" ItemContainerStyle="{StaticResource SimpleListViewItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="auto" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource BodyTextBlockStyle}" HorizontalAlignment="Left"
Text="{Binding Name, Mode=TwoWay}"/>
<TextBlock Grid.Column="1" Style="{StaticResource BodyTextBlockStyle}" HorizontalAlignment="Center"
Text="{Binding Qty, Mode=TwoWay}"/>
<TextBlock Grid.Column="2" Style="{StaticResource BodyTextBlockStyle}" HorizontalAlignment="Left"
Text="{Binding SubTotal, Mode=TwoWay}"/>
<TextBlock Grid.Column="3" Style="{StaticResource BodyTextBlockStyle}" HorizontalAlignment="Center"
Text="{Binding Total, Mode=TwoWay}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Add the following to your ListView definition
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
I have a Listbox control and I have an expander control in all the items so that user can expand each of the item. But when I expand few items and scroll it. some times the expander get collapse automatically.
<ListBox x:Name="listbox" ItemsSource="{Binding Persons}" Background="LightBlue"
ItemTemplate="{StaticResource PersonDataTemplate}"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
HorizontalContentAlignment="Stretch">
<ListBox.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource GroupHeaderTemplate}" />
</ListBox.GroupStyle>
</ListBox>
and resources have
<DataTemplate x:Key="PersonDataTemplate" DataType="{x:Type local:Person}">
<Grid>
<Expander >
<Expander.Header>
<TextBlock Text="{Binding Name}"/>
</Expander.Header>
<!--This will take time to be instancied-->
<!--<local:TimeConsumingControl />-->
<!--Rest of the data template-->
<Border Margin="4" BorderBrush="Black" BorderThickness="1" MinHeight="40" CornerRadius="3" Padding="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<!--<RowDefinition />-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="Name : " Grid.Row="0" FontWeight="Bold" HorizontalAlignment="Right" />
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" />
<TextBlock Text=" - Age : " Grid.Column="2" Grid.Row="0" FontWeight="Bold"
HorizontalAlignment="Right" />
<TextBlock Grid.Column="3" Grid.Row="0" Text="{Binding Age}" />
</Grid>
</Border>
</Expander>
</Grid>
</DataTemplate>
How can I prevent the items from collapsing. I still want to use Virtualization.
I'm using a ExpanderView to display some data in my app. But I'm having some difficulty trying to find out how to get an ExpanderViewItem's data after it's been selected.
On a ListBox you can call SelectionChanged="yourFunction" in your xaml code.. but for the expanderview I have no idea how to do this?
This is my XAML code for the expander:
<!--Custom header template-->
<DataTemplate x:Key="CustomHeaderTemplate">
<TextBlock Text="" FontSize="28" />
</DataTemplate>
<!--Custom expander template-->
<DataTemplate x:Key="CustomExpanderTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Width="400" Height="60" Fill="#FFF1F1F1" HorizontalAlignment="Stretch" StrokeThickness="0" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="{Binding procedureName}" FontSize="30" Foreground="#FF00457C" FontWeight="Normal" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="10,0,0,0" />
</Grid>
</DataTemplate>
<!--Custom expander items template-->
<DataTemplate x:Key="ExpanderViewItems" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="15" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding flagIcon}" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" />
<TextBlock FontSize="26" Text="{Binding N}" Foreground="Black" FontWeight="Normal" Grid.Row="0" Grid.Column="1"/>
<TextBlock FontSize="20" Text="{Binding RNG}" Foreground="Black" FontWeight="Normal" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="2"/>
<TextBlock FontSize="26" Text="{Binding ValueAndUnit}" Foreground="Black" FontWeight="Medium" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
<TextBlock FontSize="18" Text="{Binding COM}" Foreground="Black" FontWeight="Normal" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" TextWrapping="Wrap" />
<Line StrokeThickness="1" Stroke="#C4C6CC" Stretch="Fill" X1="0" X2="1" Y1="0" Y2="0" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>
</DataTemplate>
<!--Listbox Containing ExpanderViews-->
<ListBox Name="testsList" Grid.Row="3" Grid.Column="0" >
<ListBox.ItemTemplate>
<DataTemplate>
<!--ExpanderView-->
<toolkit:ExpanderView Header="{Binding}"
HeaderTemplate="{StaticResource CustomHeaderTemplate}"
Expander="{Binding}"
ExpanderTemplate="{StaticResource CustomExpanderTemplate}"
x:Name="expander"
FontSize="36"
Foreground="#FF00457C"
ItemsSource="{Binding testItems}"
ItemTemplate="{StaticResource ExpanderViewItems}" >
</toolkit:ExpanderView>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'd really appreciate any help in the right direction! This seems to be a question that is not easily answered around the web.
#Frederik I've implemented what you've done in the code above using the SelectionChanged event of the ListBox - it still works fine for me.
I've been banging my head against the wall for a bit, but finally managed to solve it. First of all for the ItemTemplate I've made sure that the template is placed in a ListBoxItem element as it follows:
<DataTemplate x:Key="ExpanderViewItems" >
<ListBoxItem DataContext="{Binding}" Tap="ListBoxItem_Tap_1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="15" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding flagIcon}" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" />
<TextBlock FontSize="26" Text="{Binding N}" Foreground="Black" FontWeight="Normal" Grid.Row="0" Grid.Column="1"/>
<TextBlock FontSize="20" Text="{Binding RNG}" Foreground="Black" FontWeight="Normal" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="2"/>
<TextBlock FontSize="26" Text="{Binding ValueAndUnit}" Foreground="Black" FontWeight="Medium" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
<TextBlock FontSize="18" Text="{Binding COM}" Foreground="Black" FontWeight="Normal" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" TextWrapping="Wrap" />
<Line StrokeThickness="1" Stroke="#C4C6CC" Stretch="Fill" X1="0" X2="1" Y1="0" Y2="0" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>
</ListBoxItem>
</DataTemplate>
Once this is in place, go in the code behind and in the Tap event declared for the ListBoxItem use something like this:
ListBoxItem item = sender as ListBoxItem;
ExpanderItemModel model = item.DataContext as ExpanderItemModel;
Of course, ExpanderItemModel will be whatever you're using for your expander items...
This worked fine for me
Hope this helps!
Good luck!
You can use the "tap" event on the listbox:
In your XAML file add a tap event listner:
<!--Listbox Containing ExpanderViews-->
<ListBox Name="testsList" Grid.Row="3" Grid.Column="0" Tap="testsList_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<!--ExpanderView-->
<toolkit:ExpanderView Header="{Binding}"
...
In your code behind file, implement the tap handler:
private void testsList_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
someModel selectedItem = (someModel)this.testsList.SelectedItem;
// Do something with your seleted data
...
}
you can get the selected values by listbox selectionchanged or expanderview expanded events.
For listbox :
private void lstExams_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count > 0)
{
Model.ExamTitles data = (sender as ListBox).SelectedItem as Model.ExamTitles;
}
}
Here ExamTitles is a class which contains collections
For expanderview Expanded
private void ExpanderView_Expanded(object sender, RoutedEventArgs e)
{
ExpanderView expview = (sender as ExpanderView);
Model.ExamTitles data = expview.Header as Model.ExamTitles;
}
Hope this helps!