I have a silverlight autocompletebox, am adding the ItemsSource in the codebehind.cs , also set the valuemember path as well, it does not display any data.
here is the code,
<sdk:AutoCompleteBox Margin="105,2,40,0" ItemsSource="{Binding}" ValueMemberPath="Code" FilterMode="Contains" IsTextCompletionEnabled="True" x:Name="txtcode" Height="23" VerticalAlignment="Top" TabIndex="1" TabNavigation="Local" >
<sdk:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<TextBlock />
</DataTemplate>
</sdk:AutoCompleteBox.ItemTemplate>
</sdk:AutoCompleteBox>
txtcode.ItemsSource = collection;
Possibly you have missed this one inside the DataTemplate,
<TextBlock Text="{Binding Code}" />
You Should bind that textbox first
Sample Code:
<sdk:AutoCompleteBox Margin="105,2,40,0" ItemsSource="{Binding}" ValueMemberPath="Code" FilterMode="Contains" IsTextCompletionEnabled="True" x:Name="txtcode" Height="23" VerticalAlignment="Top" TabIndex="1" TabNavigation="Local" >
<sdk:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Item}" />
</DataTemplate>
</sdk:AutoCompleteBox.ItemTemplate>
</sdk:AutoCompleteBox>
txtcode.ItemsSource = collection;
Related
I'm trying to put a ComboBox, a checkbox and a few textboxes inside a treeview in WPF.
Following is the basic structure of the treeview requirement
-Parent
--Label Textbox
--Label Textbox
--Label Textbox
--Label Combo box
--Label Check box
--Payload
---Label
----Label Textbox
----Label Combobox
----Label Textbox
Following is the xaml code
<TreeView x:Name="BTreeView" Grid.Column="1" Grid.Row="1" Margin="1,10,0,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding TreeViewListings}" >
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type viewmodel:TreeViewBViewModel}" ItemsSource="{Binding Positions}" >
<TextBlock Text="Level1"/>
<HierarchicalDataTemplate.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding PayLoadList}" DataType="{x:Type viewmodel:Position}">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Text 1" />
<TextBox Text="{Binding Path=Text1, UpdateSourceTrigger=PropertyChanged}" Width="200" Margin="10,0,0,0" BorderThickness="0" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Text 2" />
<TextBox Text="{Binding Path=Text1, UpdateSourceTrigger=PropertyChanged}" Width="200" Margin="10,0,0,0" BorderThickness="0" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Text 3"/>
<ComboBox Width="100" Height="18" Margin="10,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" FontSize="10" IsEditable="True" IsReadOnly="True" BorderThickness="0">
<ComboBoxItem IsSelected="True">Item 1</ComboBoxItem>
<ComboBoxItem>Item 2</ComboBoxItem>
<ComboBoxItem>Item 3</ComboBoxItem>
<ComboBoxItem>Item 4</ComboBoxItem>
<ComboBoxItem>Item 5</ComboBoxItem>
</ComboBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox Canvas.Left="10" Canvas.Top="10" Content="Active" IsChecked="False"/>
</StackPanel>
<TextBlock Text="{Binding PayLoadText}"/>
</StackPanel>
<HierarchicalDataTemplate.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding PayLoadData}" DataType="{x:Type viewmodel:Payload}">
<Label Content="{Binding FieldName}"/>
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate DataType="{x:Type viewmodel:PayloadData}">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Text 4" />
<TextBox Text="{Binding Path=Text4, UpdateSourceTrigger=PropertyChanged}" Width="200" Margin="10,0,0,0" BorderThickness="0" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Data}" />
<TextBox Text="{Binding Path=DataFieldValue, UpdateSourceTrigger=PropertyChanged}" Width="200" BorderThickness="0" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Operation" />
<ComboBox Width="100" Height="18" Margin="10,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" FontSize="10" IsEditable="True" IsReadOnly="True" BorderThickness="0">
<ComboBoxItem>Item 1</ComboBoxItem>
<ComboBoxItem>Item 2</ComboBoxItem>
<ComboBoxItem>Item 3</ComboBoxItem>
<ComboBoxItem>Item 4</ComboBoxItem>
</ComboBox>
</StackPanel>
</StackPanel>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
I am using MVVM architectural pattern to achieve this goal. The problem that I am facing is with the arrow head of second level node. It is not aligned at the right position. The arrowhead gets automatically aligned to "Text3" combo box instead of "Payload" node. Following is the image of my tree view
I do not know if there is any other approach to include Combo box, check box, text boxes inside a treeview using MVVM approach. Would appreciate if you let me know your approach of designing this treeview
I am trying to bind combo box inside of a list view.
Here is the Xaml:
<UserControl
<UserControl.Resources>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="true">
<Setter Property="IsSelected" Value="true" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<DockPanel MinWidth="724" Height="387" DataContext="{Binding DeviceDiagnosticsMainVeiwModel}">
<globals:SaveNotificationPopup IsOpen="{Binding IsSaveNotificationPopupOpen}" SaveCommand="{Binding SaveCommand}" CancelCommand="{Binding CloseSaveNotificationPopup}" Placement="Relative" VerticalOffset="300" HorizontalOffset="200" />
<StackPanel>
<Grid Width="250" HorizontalAlignment="Left" Margin="10,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="23" />
<RowDefinition Height="Auto" MinHeight="23" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Content="{x:Static ml:MultiLang._2001}" x:Name="ML_0209" />
<Label Grid.Row="1" Content="{x:Static ml:MultiLang._2009}" x:Name="ML_0211" />
<ComboBox Grid.Column="1" Grid.Row="0" ItemsSource="{Binding Manufacturers}" DisplayMemberPath="WorkingPlace" SelectedValuePath="PersonCode" SelectedValue="{Binding Path=ManufacturerID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<ComboBox Grid.Column="1" Grid.Row="1" ItemsSource="{Binding Devices}" DisplayMemberPath="Model" SelectedValue="{Binding Path=SelectedDevice, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Grid>
<ListView DockPanel.Dock="Top" Margin="10,25,10,10" Width="460" ScrollViewer.HorizontalScrollBarVisibility="Hidden" HorizontalAlignment="Left" ItemsSource="{Binding CurrentDeviceDiagnostics}" SelectedItem="{Binding SelectedDeviceDiagnostics}" BorderThickness="1">
<ListView.View>
<GridView>
<GridViewColumn Header="Command" Width="180" x:Name="ML_0007">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding DiagnosticsCommand, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" FontSize="12" Margin="0 5 0 0" Width="165" TextAlignment="Center" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Name" Width="180" x:Name="ML_0010">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding DiagnosticsName, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" FontSize="12" Margin="0 5 0 0" Width="165" TextAlignment="Center" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Units" Width="100" x:Name="ML_0013">
<GridViewColumn.CellTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Units}" DisplayMemberPath="UnitName" SelectedValuePath="UnitCode" SelectedValue="{Binding DiagnosticsUnit, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="85" Margin="0,1,0,0" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<ContentControl DockPanel.Dock="Top" Content="{Binding AddNewCAView}" />
<!-- No Diagnodtics message-->
<globals:NoItemsMessage DockPanel.Dock="Top" Visibility="{Binding NoDiagnosticsVisibility}" HorizontalAlignment="Left" Margin="10" Width="360" Height="40" Message="{x:Static ml:MultiLang._742}" x:Name="ML_0017" />
<!-- delete popup -->
<globals:DeletePopup IsOpen="{Binding IsConfirmDeletePopupOpen}" Message1="{x:Static ml:MultiLang._746}" DeleteCommand="{Binding DeleteCommand}" CancelCommand="{Binding CancelDeleteCommand}" Placement="Center" VerticalOffset="-200" HorizontalOffset="200" x:Name="ML_0018" />
</StackPanel>
</DockPanel>
</UserControl>
The Dock Panel binds to : DataContext="{Binding DeviceDiagnosticsMainVeiwModel}"
The list view binds are :
ItemsSource="{Binding CurrentDeviceDiagnostics}" SelectedItem="{Binding SelectedDeviceDiagnostics}"
and both CurrentDeviceDiagnostics and SelectedDeviceDiagnostics are members of DeviceDiagnosticsMainVeiwModel.
One text box (for example) in the list view bind like this :
Text="{Binding DiagnosticsCommand, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
CurrentDeviceDiagnostics is an observble collection of DeviceDiagnosticsVeiwModel which contains DiagnosticsCommand.
And works just fine (both of the textboxes).
The checkbox binds like this:
ItemsSource="{Binding Units}" DisplayMemberPath="UnitName" SelectedValuePath="UnitCode" SelectedValue="{Binding DiagnosticsUnit, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
And Units and DiagnosticsUnit are also members of DeviceDiagnosticsVeiwModel.
The Item source works fine and populated the way i need.
The problem is with the selected item... its initialized as empty although DiagnosticsUnit has an integer value.
Funny thing is that if I choose something from the combobox, the code goes to the DiagnosticsUnit property to the set function, so I'm not sure abou t this problem...
Even if I will change the combobox to a textbox using DiagnosticsUnit , it will work !
I used a lots of mvvm comboboxes and didnt have any binding problems but its the first time i have a combocox inside of a list view...
Please help me.
Thank you all !!!
Let's break this down... you said:
both CurrentDeviceDiagnostics and SelectedDeviceDiagnostics are members of DeviceDiagnosticsMainViewModel.
That's as it should be. Then you said:
CurrentDeviceDiagnostics is an ObservableCollection<DeviceDiagnosticsViewModel>
Therefore the data bindings from inside the CellTemplates should point to properties from the DeviceDiagnosticsViewModel class as you correctly pointed out.
Therefore, looking at your ComboBox code below, I can only think of two possible reasons why this wouldn't work:
<ComboBox ItemsSource="{Binding Units}" DisplayMemberPath="UnitName"
SelectedValuePath="UnitCode" SelectedValue="{Binding DiagnosticsUnit, Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}" Height="23" HorizontalAlignment="Left"
VerticalAlignment="Top" Width="85" Margin="0,1,0,0" />
One suggestion would be to use the ComboBox.SelectedItem property instead and to data bind to an instance of the same type as your Units collection... however, if that is just a collection of ints, then this step wouldn't help. The only other thing would be to ensure that you have correctly implemented the INotifyPropertyChanged interface in the DeviceDiagnosticsViewModel class.
O.K
I finally found the problem !
It wasn't a binding problem.
this is very silly.
i had this code
public void GetItems()
{
_devicesDiagnostics = new ObservableCollection<DeviceDiagnosticsVeiwModel>(
(from dd in _dal.GetItems()
orderby dd.DeviceID
select new DeviceDiagnosticsVeiwModel(dd)
{
ObjectStatus = Status.NoChange,
Units = _manager.UnitRepository.Units
}
) .ToObservableCollection<DeviceDiagnosticsVeiwModel>()
);
}
The Units is a member in the view model (DeviceDiagnosticsVeiwModel) and it's actually the comboboxs item source.
Inside of DeviceDiagnosticsVeiwModel there's an int property which is the selected item. It didnt load it right.
The correct code will be
public void GetItems()
{
_devicesDiagnostics = new ObservableCollection<DeviceDiagnosticsVeiwModel>(
(from dd in _dal.GetItems()
orderby dd.DeviceID
select new DeviceDiagnosticsVeiwModel(dd)
{
ObjectStatus = Status.NoChange,
Units = new ObservableCollection<UnitViewModel>(this.Units),
}
)
.ToObservableCollection<DeviceDiagnosticsVeiwModel>()
);
}
I had to give every object a new list. It worked.
I have two separate binding problems with listboxes with an itemtemplate which contains a texbox.
1) One listbox binds to a list of strings. How can I display each string inside the textboxes created and allow two way binding at the same time? Two way binding isn't allowed without specifying a Path or XPath.
<ListBox Height="231" HorizontalAlignment="Left" Margin="0,167,0,0" Name="listBoxKeys" VerticalAlignment="Top" Width="219" ItemsSource="{Binding Path=SelectedPlatform.Keys}" SelectedItem="{Binding Path=SelectedKey,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<TextBox Text="{Binding Mode=OneWay}" Margin="0,0,0,0" Height="Auto" MinWidth="80" MaxWidth="80" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And 2) I use another listbox which binds to some generic list of a custom KeyValuePair class. The itemtemplate contains a textbox and combobox. The textbox text is bound to the key property of each KeyValuePair object and the combobox selecteditem to the value property. My problem is that I want the combo to get filled by a list of strings declared in my viewmodel which will be changing on runtime. The window's datacontext is the viewmodel where the list is declared. I don't know the exact syntax I need to use to bind the combobox itemssource there. Here's my code :
<ListBox Height="393" HorizontalAlignment="Left" Margin="0,72,0,0" Name="listBoxActions" VerticalAlignment="Top" Width="254" ItemsSource="{Binding Path=SelectedPlayer.ControlProfile.MappedActions}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<TextBox Text="{Binding Key, Mode=TwoWay,UpdateSourceTrigger=LostFocus}" Margin="10,0,0,0" Height="Auto" MinWidth="80" MaxWidth="80" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<ComboBox Margin="10,0,0,0" Height="Auto" MinWidth="80" MaxWidth="80" HorizontalAlignment="Left" VerticalAlignment="Center" ItemsSource="{Binding ?}" SelectedItem="{Binding Value, Mode=TwoWay}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem is that the two-way binding on the source itself cannot work because it would mean that the whole object (string), for which the data template is created, must be replaced when user changes the text in the text box. Obviously, this will not work. Two-way binding will work only on a writable property of the bound object.
In your case I would suggest creating a view model for the items in the list box (basically a view model for your strings) and expose a Value property on it and bind to it in the data template:
<ListBox Height="231" HorizontalAlignment="Left" Margin="0,167,0,0"
Name="listBoxKeys" VerticalAlignment="Top" Width="219"
ItemsSource="{Binding Path=SelectedPlatform.KeyViewModels}"
SelectedItem="{Binding Path=SelectedKey,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<TextBox Text="{Binding Value, Mode=TwoWay}" Margin="0,0,0,0" Height="Auto" MinWidth="80" MaxWidth="80" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
1) Pavlo Glazkov seems to have a good answer to me
2) This is down to the DataContext for the ComboBox now being the key value pair rather than the ViewModel. There may be other ways to do this but the one that I've used before is to set the bindings RelativeSource source back to it's parent ItemsControl.
RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}
Something like:
<ListBox Height="393" HorizontalAlignment="Left" Margin="0,72,0,0" Name="listBoxActions" VerticalAlignment="Top" Width="254" ItemsSource="{Binding Path=SelectedPlayer.ControlProfile.MappedActions}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<TextBox Text="{Binding Key, Mode=TwoWay,UpdateSourceTrigger=LostFocus}" Margin="10,0,0,0" Height="Auto" MinWidth="80" MaxWidth="80" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<ComboBox Margin="10,0,0,0" Height="Auto" MinWidth="80" MaxWidth="80" HorizontalAlignment="Left" VerticalAlignment="Center" ItemsSource="{Binding DataContext.Keys, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" SelectedItem="{Binding Value, Mode=TwoWay}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I have a RadComboBox that i have bound like shown below
<telerik1:RadComboBox Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" Margin="5,2" ItemsSource="{Binding RepTypes}" DisplayMemberPath="Path=TypeName" SelectedValuePath="Value" SelectedItem="{Binding RepType, Mode=TwoWay}" >
</telerik1:RadComboBox>
When i select an Item I catch the Property Changed event, but basically the selection in the combo box stays blank.
What am i doing wrong?
Ok i made it so that it shows up now.. But i don't understand why... Or how to change it so it works for me in all cases...
<telerik1:RadComboBox Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" Margin="5,2" ItemsSource="{Binding RepTypes}" SelectedValuePath="Value" SelectedItem="{Binding RepType, Mode=TwoWay}" >
</telerik1:RadComboBox>
Thats what works... the Biggest difference was. I had to name a field to "Name" and then bind it and take out the DisplayMemberPath="Path=ReportName"
If that is the case then how do i tell the control what Field to Display in the dropdown?
Are you somehow changing your collection? The controls only look for the items once. So, if the page loads and then you're loading your collection of RepTypes, it doesn't update the dictionary. I'm doing something similar and I'm lazy loading my collection (as you type, I get more from the database).
<t:RadComboBox x:Name="RepTypeComboBox" Margin="0,1"
t:TextSearch.TextPath="TypeName"
ItemsSource="{Binding Path=RepTypes, Mode=OneWay}"
SelectedValue="{Binding Path=Reptype, Mode=TwoWay, NotifyOnValidationError=True}"
IsEditable="True"
Grid.Column="1"
Grid.Row="2" TabIndex="1">
<t:RadComboBox.ItemTemplate >
<DataTemplate >
<StackPanel Orientation="Horizontal" >
<TextBlock FontWeight="Bold" Text="{Binding Path=TypeName, Mode=OneWay}" Width="75"/>
<TextBlock Text=": " />
<TextBlock Text="{Binding Path=address1, Mode=OneWay}" />
<TextBlock Text=" " />
<TextBlock Text="{Binding Path=address2, Mode=OneWay}" />
<TextBlock Text=" " />
<TextBlock Text="{Binding Path=citystate, Mode=OneWay}" />
<TextBlock Text=" " />
<TextBlock Text="{Binding Path=zip, Mode=OneWay}" />
</StackPanel>
</DataTemplate>
</t:RadComboBox.ItemTemplate>
</t:RadComboBox>
If you want ReportName to be shown as your display member, you only have to put it this way:
<telerik1:RadComboBox ItemsSource="{Binding RepTypes}" SelectedValuePath="Value"
SelectedItem="{Binding RepType, Mode=TwoWay}" DisplayMemberPath="ReportName">
</telerik1:RadComboBox>
You're putting an extra "Path=" that's only confusing the XAML parser.
I'm having a little trouble in silverlight with a databound ListBox containing databound TextBox elements. The items display correctly in the list and the TextBox is populated correctly but I can't get focus on the TextBox in the list. If I hover over the edges of the TextBox it highlights but it won't let me click into it to edit the text. Any ideas?
My XAML looks like this:
<ListBox x:Name="listImages">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="LayoutRoot" Background="White">
<Image Height="102" HorizontalAlignment="Left" Name="imgThumb" Stretch="UniformToFill" VerticalAlignment="Top" Width="155" Source="{Binding ImageFilename, Converter={StaticResource ImageConverter}}" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="154,25,0,0" Name="txtAltText" VerticalAlignment="Top" Width="239" Text="{Binding Alt}" />
<dataInput:Label Height="19" HorizontalAlignment="Left" Margin="154,6,0,0" Name="lblAltText" VerticalAlignment="Top" Width="239" Content="Alt Text" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I swapped the content for this and it now works, I think it was having an issue with the Grid container:
<ListBox x:Name="listImages">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="102" HorizontalAlignment="Left" Name="imgThumb" Stretch="UniformToFill" VerticalAlignment="Top" Width="155" Source="{Binding ImageFilename, Converter={StaticResource ImageConverter}}" Margin="5" />
<StackPanel>
<dataInput:Label Height="19" HorizontalAlignment="Left" Name="lblAltText" VerticalAlignment="Top" Width="239" Content="Alt Text" />
<TextBox Height="23" HorizontalAlignment="Stretch" Name="txtAltText" VerticalAlignment="Top" Text="{Binding Alt}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>