I'm trying to get an ItemsPanelTemplate working for a ListBox. The ListBox is used in a DataTemplate, and none of my implicit ListBox styles override the default visual style. For some reason, the ItemsPanelTemplate I'm specifiying for the control (a WrapPanel) is being ignored and a StackPanel is used instead.
This is the entire template, I can only assume there's something I'm missing which is causing this.
<DataTemplate x:Key="GroupLargeIconsTemplate" DataType="{x:Type Core:IGroup}">
<ListBox ItemsSource="{Binding Children}" OverridesDefaultStyle="True">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel HorizontalAlignment="Left" VerticalAlignment="Top" IsItemsHost="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto"
Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<conv:IconConverter x:Key="IconConverter"/>
</DataTemplate.Resources>
<StackPanel Margin="2" Width="100" Height="140">
<Image Source="{Binding Icon,Converter={StaticResource IconConverter},ConverterParameter=96}"/>
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
My guess is that the width property in the WrapPanel is making it behave as a Stackpanel.
Strange, the control template is not supposed to override the explicitly specified values, rather the opposite scenario comes to my mind...
That is, unless the control template provides a panel with "IsItemsHost" set to true. Then the ItemsPanel is ignored. Which, probably, is your case.
Related
I am doing a tree view UI. I used DataTemplateSelector to decide whether to display a series of textbox or combobox dynamically based on a collection of data argument.
Please note in my code. ArugumentDetailsCollection is an observable collection containing ArgumentDetails class. DefaultValue is a string property in ArgumentDetails class. Please note the property is not dependency property
The problem is that DefaultValue is not bind to TextBox. When the TextBox is displayed, it contains empty string.
Please note the Textbox is working well if data template selector is not used.
Please can someone advice ? thank you
<ItemsControl x:Name="argumentTexts" ItemsSource="{Binding ArgumentDetailsCollection}">
<ItemsControl.Resources>
<DataTemplate x:Key="TextBoxDataTemplate">
<TextBox Text="{Binding Path=DefaultValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Center"
Width="Auto"
Margin="5,0,0,0"
Padding="0"
Style="{StaticResource GridEditStyle}"
IsEnabled="True"/>
</DataTemplate>
<DataTemplate x:Key="ComboBoxDataTemplate">
<ComboBox HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Width="Auto"
Margin="5,0,0,0"
Padding="0"
Style="{StaticResource GridEditStyle}"
IsEnabled="True"/>
</DataTemplate>
<columnConfiguratorControls:ArgumentTypeTemplateSelector x:Key="ArgTemplateSelector" ComboBoxDataTemplate="{StaticResource ComboBoxDataTemplate}" TextBoxDataTemplate="{StaticResource TextBoxDataTemplate}"/>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch" IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type structures:ArgumentDetails}">
<ContentControl Content="{Binding VisibleName}"
ContentTemplateSelector="{StaticResource ArgTemplateSelector}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Writing Content="{Binding VisibleName}" in your ContentControl will make the datacontext of the selected DataTemplate the VisibleName property. That's why you cannot access the DefaultValue property, since it's member of ArgumentDetails.
Change the binding to :
Content="{Binding}"
You will also need to review your ContentTemplateSelector class
In WPF, I am using the MVVM model.
I have a View with a Dockpanel and I want to add dynamically StackPanels with a Label and TextBox for all Harddisks found over the Binding.
Therefore my XAML looks like:
<DockPanel Grid.Row="1" HorizontalAlignment="Stretch" Margin="5">
<ItemsControl ItemsSource="{Binding Harddisks}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="2.5,0,0,0">
<Label Content="{Binding Path=Label}" />
<TextBox Text="{Binding Path=GB_Free}" Width="100" IsReadOnly="True"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
It should be four Labels and TextBoxes, but only the first Label and TextBox are shown.
Why?
Your items in your ItemsControl are not actually direct children of the DockPanel. You need to change the ItemsControl to specify that the DockPanel is the Panel. The following will cause the ItemsControl to create a DockPanel and place all the items inside it (rather than the StackPanel that ItemsControl uses by default).
More Info: MSDN: ItemsControl.ItemsPanel Property
<ItemsControl ItemsSource="{Binding Harddisks}">
<ItemsControl.ItemsPanel>
<DockPanel Grid.Row="1" HorizontalAlignment="Stretch" Margin="5" />
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="2.5,0,0,0">
<Label Content="{Binding Path=Label}" />
<TextBox Text="{Binding Path=GB_Free}" Width="100" IsReadOnly="True"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The xaml below works correctly when I click (MouseDown) anywhere on the background of the listbox. The problem is that I can not get it to work when I click on any single item in the listbox. I've tried putting the trigger code inside the border, image or TextBlock with no success.
<ListBox Name="SelectL2List" ItemsSource="{Binding L2Items, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" IsSynchronizedWithCurrentItem="True">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDown">
<si:CallDataMethod Method="HideSelectL2View" Target="{Binding}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type ViewModels:MediaItemViewModel}" >
<Border BorderThickness="1,1,3,3" Margin="10" CornerRadius="3">
<StackPanel Orientation="Horizontal" >
<Image Source="{Binding Image}"/>
<TextBlock Text="{Binding L2Title}" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Any help would be appreciated.
You have to make sure that things are hit testing as well, you can set the Background of the Border to Transparent to ensure that.
Also the mouse events are intercepted by the ListBoxItems, use the tunneling versions, i.e. PreviewMouseDown.
I'm implementing a ListBox whose ItemsPanel is a WrapPanel as per this answer, but there's a twist: my ItemsSource is a grouped CollectionView. With a GroupStyle applied to my ListBox, the wrapping shown in that question doesn't work: the groups are always displayed vertically.
Snooping on my app, here's why:
As you can see, the WrapPanel, defined as my ListBox's ItemsPanelTemplate, appears in the ItemsPresenter within each GroupItem; an implicit, vertically-oriented StackPanel (top item in the pink box) is created to contain the GroupItems themselves.
Is there a way to override this behavior, so the GroupItems are placed in a WrapPanel? Would I have to re-template the entire ListBox?
Update: To illustrate what I'm actually doing with my ListBox and the CollectionView grouping, let me post a little XAML:
<Grid>
<ListBox ItemsSource="{Binding}"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
SelectionMode="Multiple"
ItemContainerStyle="{StaticResource itemStyle}">
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" FontWeight="Bold"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type WpfApplication1:Item}">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" FontSize="10"/>
<TextBlock Text="{Binding Amount, StringFormat={}{0:C}}" FontSize="10"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
The GroupStyle is at the heart of it: if you remove that, the GroupItems don't get rendered, and the WrapPanel (which you can see appearing beneath the GroupItem in the screenshot above) appears in place of (StackPanel) 98 in the screenshot.
This behavior only seems to occur if you have defined a HeaderTemplate in the GroupStyle.
It can be corrected by setting the GroupStyle.Panel property to contain a WrapPanel:
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" FontWeight="Bold"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListBox.GroupStyle>
It will look something like this:
You should be able to replace the group style from the items control (ListBox):
<ListBox.GroupStyle>
<Style />
<ListBox.GroupStyle/>
Or, you should also be able to create a DataTemplate based on the group item object:
<DataTemplate DataType="{x:Type GroupItem}">
<Panel />
</DataTemplate>
In WPF Listbox, I'm confused with these 2 notions:
ItemTemplate and ItemsPanelTemplate
Can someone explain me more?
Thanks
John
Let me try to explain this by example:
<ListBox ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="SteelBlue" Padding="5" BorderBrush="Black"
BorderThickness="1" Margin="0,2">
<TextBlock Text="{Binding}"/>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Background="DarkKhaki"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
And the result:
The ItemTemplate determines the layout of each item in the list. On the other hand the ItemsPanel is the panel that will contain the individual items. Given the above definition the visual tree will be something similar to this:
<StackPanel>
<Border>
<TextBlock Text="Alpha"/>
</Border>
<Border>
<TextBlock Text="Beta"/>
</Border>
....
</StackPanel>
ItemTemplate is used to specify a DataTemplate used to render the item in your ListBox.
ItemPanelTemplate is used to specify the panel used to arrange the children of your ListBox.
For example, if your ListBox is bound to an ObservableCollection you must specify a DataTemplate to tell it how to render each Person object.
<ListBox ItemsSource={Binding Persons}>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text={Binding FirstName}/>
<TextBlock Text={Binding LastName}/>
<TextBlock Text={Binding Age}/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
That will arrange each item vertically because ListBox used a StackPanel by default. If you want to change this behaviour, used the ItemPanelTemplate property:
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
You can even change the StackPanel to any other panel (WrapPanel for example).