I want to create a ListBox filled with checkboxes in WPF, and I want to databind the "Content" value with a simple string value. However when I try <CheckBox Margin="5" Content="{Binding}" /> the app crashes.
This is what I have. ( I'm sure I am missing something simple )
<ListBox Grid.Row="1" IsSynchronizedWithCurrentItem="True" x:Name="drpReasons">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" >
</WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Resources>
<DataTemplate DataType="{x:Type System:String}">
<CheckBox Margin="5" Content="{Binding}" />
</DataTemplate>
</ListBox.Resources>
</ListBox>
You created an infinitely recursive DataTemplate. By setting the DataTemplate for String, and then setting the Content of CheckBox to a String, the CheckBox will use the DataTemplate itself, so you'll have CheckBoxes within CheckBoxes and so on.
You can fix it by putting a TextBlock inside the CheckBox explicitly:
<ListBox x:Name="drpReasons" Grid.Row="1" IsSynchronizedWithCurrentItem="True">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal">
</WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Resources>
<DataTemplate DataType="{x:Type sys:String}">
<CheckBox Margin="5">
<TextBlock Text="{Binding}"/>
</CheckBox>
</DataTemplate>
</ListBox.Resources>
</ListBox>
Related
I want to display several images in a vertical scrolling list, but these images are subdivided into several groups that must be distiguishable by the user. To achive this, I use a ListView which items contain a WrapPanel, which contains the single images:
<ListView Name="ListGroups" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Label Content="{Binding Groupname}" />
<ListBox ItemsSource="{Binding Images}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding Thumb}" />
<Label Content="{Binding Res}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
What I get is:
Current result - wrong
but what I want to achive is:
Thats what I want
That is to say I dont want any horizontal Scollbars at all, and the groups clearly must be separated. On the other hand, when sizing the window, the images within one group must wrap to fill all available space.
Just also disable the horizontal ScrollBar of the inner ListBox, and set Stretch="None" on the Image element.
<ListView ... ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Label Content="{Binding Groupname}"/>
<ListBox ItemsSource="{Binding Images}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Thumb}" Stretch="None"/>
<Label Content="{Binding Res}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have created one WPF user control having two list boxes.
<ListBox ItemsSource="{Binding Colors}"
Style="{DynamicResource ProductListBoxStyle}"
SelectedItem="{Binding SelectedColor, Mode=TwoWay}"
Margin="0,40,0,0"
ItemContainerStyle="{DynamicResource ProductListColorItemContainerStyle}">
<ListBox.ItemTemplate>
<StaticResource ResourceKey="ItemsDetailsTemplate" />
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<ListBox Grid.Row="1"
ItemsSource="{Binding CurrentProduct.DimensionAttributes}"
SelectedItem="{Binding SelectedDimention, Mode=TwoWay}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Style="{DynamicResource ProductListBoxStyle}"
ItemContainerStyle="{DynamicResource ProductListItemContainerStyle}"
Margin="0,40">
<ListBox.ItemTemplate>
<StaticResource ResourceKey="SizeTemplate" />
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
But the problem is when I select one item from color then if I try to select one size >the selection from Color is removed. why it is so?
I have a listbox (with normal vertical orientation), each element of which is a listbox with horizontal orientation.
I want to have a ScrollBar inside of internal listbox. So, my problem is how to set width of internal listbox according to real current width of external.
My current code is:
<Window.Resources>
<HierarchicalDataTemplate x:Key="ItemTemplateSchedule">
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>My-Very-Long-Item-Nimber-1___</ListBoxItem>
<ListBoxItem>My-Very-Long-Item-Nimber-2___</ListBoxItem>
<ListBoxItem>My-Very-Long-Item-Nimber-3___</ListBoxItem>
<ListBoxItem>My-Very-Long-Item-Nimber-4___</ListBoxItem>
<ListBoxItem>My-Very-Long-Item-Nimber-5___</ListBoxItem>
</ListBox>
</HierarchicalDataTemplate>
</Window.Resources>
<Grid>
<ListBox ItemTemplate="{StaticResource ItemTemplateSchedule}" >
>
</ListBox>
</Grid>
Current screenshot:
.
UPD1
Ok, answer to my question is setting of width for internal listbox, thanks to #sa_ddam213:
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBox}, Path=ActualWidth}"
Now I want add some new control in each row of external listbox:
<HierarchicalDataTemplate x:Key="ItemTemplateSchedule">
<StackPanel Orientation="Horizontal" Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBox}, Path=ActualWidth}">
<TextBlock Text="This is Text in a TextBlock"/>
<ListBox >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>My-Very-Long-Item-Number-1___</ListBoxItem>
<ListBoxItem>My-Very-Long-Item-Number-2___</ListBoxItem>
<ListBoxItem>My-Very-Long-Item-Number-3___</ListBoxItem>
<ListBoxItem>My-Very-Long-Item-Number-4___</ListBoxItem>
<ListBoxItem>My-Very-Long-Item-Number-5___</ListBoxItem>
</ListBox>
</StackPanel>
</HierarchicalDataTemplate>
And it doesn't work now! Is it possible to solve this problem? Current screenshot:
You can use a FindAncestor to bind to the parent ListBox ActualWidth
Example:
<Window.Resources>
<HierarchicalDataTemplate x:Key="ItemTemplateSchedule">
<ListBox Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBox}, Path=ActualWidth}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>My-Very-Long-Item-Nimber-1___</ListBoxItem>
<ListBoxItem>My-Very-Long-Item-Nimber-2___</ListBoxItem>
<ListBoxItem>My-Very-Long-Item-Nimber-3___</ListBoxItem>
<ListBoxItem>My-Very-Long-Item-Nimber-4___</ListBoxItem>
<ListBoxItem>My-Very-Long-Item-Nimber-5___</ListBoxItem>
</ListBox>
</HierarchicalDataTemplate>
</Window.Resources>
Result:
Accordion item Visibility property can be bound like this:
<layoutToolkit:Accordion x:Name="MyAccordion">
<layoutToolkit:AccordionItem Visibility="{Binding IsVisible, Converter={StaticResource VisibilityConverter}}">
...
</layoutToolkit:AccordionItem>
</layoutToolkit:Accordion>
But how to bind it when using Accordion.ItemTemplate?
<layoutToolkit:Accordion ItemsSource="{Binding AcordionItems}" x:Name="MyAccordion">
<layoutToolkit:Accordion.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</layoutToolkit:Accordion.ItemTemplate>
<layoutToolkit:Accordion.ContentTemplate>
<DataTemplate>
...
</DataTemplate>
</layoutToolkit:Accordion.ContentTemplate>
</layoutToolkit:Accordion>
I can bind IsVisible to elements inside DataTemplate, but then an empty accordion item is displayed. I need to be able to show/hide the whole accordion item.
I ended up using StackPanel with multiple Accordions:
<StackPanel Orientation="Vertical">
<ItemsControl ItemsSource="{Binding AcordionItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<layoutToolkit:Accordion Visibility="{Binding IsVisible, Converter=
{StaticResource VisibilityConverter}}">
<layoutToolkit:AccordionItem>
...
</layoutToolkit:AccordionItem>
</layoutToolkit:Accordion>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
I am trying to bind a List of objects to an ItemsControl. The object has only two properties: Movie (a string) and Actors (an array of string). I can get the binding to work fine for the Movie. But I can't figure out the binding for the Actors array.
<ItemsControl x:Name="MovieList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Width="100">
<Border Margin="2">
<TextBlock Text="{Binding Movie, Mode=OneWay}" />
</Border>
<ListBox ItemsSource="{Binding Actors, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<controlsToolkit:WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Any suggestions?
<ListBox ItemsSource="{Binding Actors, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
this is wrong...you have to tell it what you want to bind to in the actors collection.
{Binding Path=ActorName} for example...since you only have it one way you could use displaymemberpath instead and just go: DisplayMemberPath="ActorName"