I have a WPF ListBox which contains a CheckBox as follow:
<ListBox x:Name="MyListBox"
Grid.Row="1"
ItemsSource="{Binding Path=Customers}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding Path=ReceiveNewsletter}"
Margin="0,3,0,0"
IsTabStop="False"/>
<TextBlock Text="{Binding Path=FirstName}" Margin="5,0,0,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But I am having an issue about ListBoxItem highlighting. When I click the CheckBox, the ListBoxItem does not get highlighted.
Can anyone give me some idea how to solve the issue?
Thanks
If the checkbox should correspond to the selection you can bind the selection to the same property you bound the checkbox to, do so in the ListBox.ItemContainerStyle using a Setter for IsSelected.
Related
Here it's the following. I want to disable a combo box.
In some scenarios in a window I just set SelectedItem from ViewModel to something and don't allowing the user to change it. But in some cases I want to allow.
This one works perfectly when changing ComboBoxIsEnabled property in VM.
<ComboBox ItemsSource="{Binding MyColletionView, Mode=OneWay}"
SelectedItem="{Binding MySelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
DisplayMemberPath="Name"
IsEnabled="{Binding MyComboBoxIsEnabled}"/>
After changing ComboBox.ItemTemplate the IsEnable property not reacting anymore. In short, I can't disable the ComboBox.
<ComboBox ItemsSource="{Binding MyColletionView, Mode=OneWay}"
SelectedItem="{Binding MySelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
IsEnabled="{Binding MyComboBoxIsEnabled}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Converter={StaticResource CustomerConverter}}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
I don't want to disable the ComboBoxItem, I want to disable the ComboBox itsef.
Any suggestions, or someone facing the same issue?
<ComboBox Height="20" Width="200" IsEnabled="True" Margin="38,38,1682,1022" ItemsSource="{Binding SourceData}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
I write a sample as you described.but I didnot use mvvm.I want to prove that there is no relationship in IsEnable and ItemTemplate.
you can trace this issue from tips as follow.
Watch Output window in VisualStudio.There may be some exception.
replace mvvm with codebehind and try.
I want to make checkbox list which toggles only if directly clicked on checkbox.
Unfortunately if I make this way:
<ListBox Name="LanguagesListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<CheckBox/>
<Label Content="{Binding InputLanguage.LayoutName}"/>
</StackPanel>
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I get checkbox not vertially aligned with it's label:
But if I write
<ListBox Name="LanguagesListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<CheckBox Content="{Binding InputLanguage.LayoutName}"/>
</StackPanel>
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I get checkbox toggle if clicked at the label
How to get both?
Get rid of the ListBoxItem, replace the Label with a TextBlock and set its VerticalAlignment property to Center:
<ListBox Name="LanguagesListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox/>
<TextBlock Text="{Binding InputLanguage.LayoutName}" VerticalAlignment="Center" Margin="2,-1,0,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can adjust the Margin property of the TextBlock to further adjust its position.
This is checkbox behaviour so you can't change it.
You will have to create an user control to build it.
I have to make listbox with textbox in it... and it has to be dynamic. I have observable collection in code behind and I want to bind that for listbox. I want dynamic listbox and this list should have editable textbox in it. So, basically I want to bind multiplr textbox from listbox. Any help would be appreciated
<ListBox HorizontalAlignment="Left" Name="ListTwo" Height="100" Margin="286.769,165.499,0,0" VerticalAlignment="Top" Width="100" ItemsSource="{Binding Source=obs}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Name="TextBoxList"></TextBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
By doing this, I have number of textbox same as items in observable collection but textbox's text is not set up.
If the items in your ObservableCollection are just plain strings, then you can data bind to the whole string value like this:
<ListBox Name="ListTwo" ItemsSource="{Binding Source=obs}" ... >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Name="TextBoxList" Text="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
From the Binding.Path Property page on MSDN:
Optionally, a period (.) path can be used to bind to the current source. For example, Text="{Binding}" is equivalent to Text="{Binding Path=.}".
Note that if you had some objects with properties in the collection, then #nit's answer would have been correct as you would need to reference the relevant property name:
<ListBox Name="ListTwo" ItemsSource="{Binding Source=obs}" ... >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Name="TextBoxList" Text="{Binding PropertyName}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You will have to Bind your textbox to the property in your class of which observable collection you have bound
<ListBox HorizontalAlignment="Left" Name="ListTwo" Height="100" Margin="286.769,165.499,0,0" VerticalAlignment="Top" Width="100" ItemsSource="{Binding Source=obs}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Binding="{Binding PROPERTYINCLASS}"></TextBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I have a listview which is created dynamically and I have bound the SelectedIndex and ItemsSource properties to my ViewModel. My template has a radio button and I have bound the IsChecked property to the listview's IsSelected property. Now I'm able to determine which item is selected which is good but in the UI, I'm not able to check the radio button. This is clearly a UI related issue. Any suggestions? My code is as follows:
<ListView Height="330" HorizontalAlignment="Stretch" SelectedIndex="{Binding SelectedIndex,Mode=TwoWay}" Name="idleTimeoutAppListView" ItemsSource="{Binding listViewEntries}" SelectionChanged="ItemSelected" Margin="15,15,15,0" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="True">
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel HorizontalAlignment="Stretch" Width="auto">
<TextBlock Text="{Binding TextProp,Mode=TwoWay}" Margin="10,0,0,0"/>
<RadioButton GroupName="radioButtonGroup" DockPanel.Dock="Right" HorizontalAlignment="Right" VerticalContentAlignment="Center" IsChecked="{Binding Path=IsSelected, Mode=TwoWay,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListViewItem}}}">
<RadioButton.LayoutTransform>
<ScaleTransform ScaleX="2" ScaleY="2"/>
</RadioButton.LayoutTransform>
</RadioButton>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
Removed SelectionChanged event and bound the selecteditem event and it works fine now. But my listview item which is selected cannot be selected again
I have a TreeView bound to an MVVM observable collection.
My item template is composed by an image and a textblock like the following code show:
<HierarchicalDataTemplate x:Key="TreeViewItemTemplate" ItemsSource="{Binding Items, Mode=OneWay, NotifyOnSourceUpdated=True}">
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation="Horizontal">
<Image
Margin="-20,0,5,0"
Source="{Binding Icon, Converter={StaticResource TreeViewIconConverter}, Mode=OneWay}"
Style="{DynamicResource SmallIcon}"/>
<Label Content="{Binding Label}"/>
</StackPanel>
</TreeViewItem.Header>
</TreeViewItem>
</HierarchicalDataTemplate>
The problem happens when you Click over an item. If the Mouse cursor is over the StackPanel, the selection will not happen.
I have included also a screenshot to make this more clear.
Of course this happens because the StackPanel is now over the selection area.
Is there any workaround?
I found the answer by myself.
When you customize the TreeView using an hierarchical data template then you should not replicate the TreeViewItem.Header template because at runtime WPF will create one for you.
So, in order to have a custom TreeViewItem this code is enough:
<HierarchicalDataTemplate x:Key="TreeViewItemTemplate" ItemsSource="{Binding Items, Mode=OneWay, NotifyOnSourceUpdated=True}">
<StackPanel Orientation="Horizontal">
<Image
Margin="0,0,5,0"
Source="{Binding Icon, Converter={StaticResource TreeViewIconConverter}, Mode=OneWay}"
Style="{DynamicResource SmallIcon}"/>
<Label Content="{Binding Label}"/>
</StackPanel>
</HierarchicalDataTemplate>