I have a tab control defined as this:
<TabControl Grid.Row="1" ItemsSource="{Binding Path=Documents}">
<TabControl.ItemTemplate>
<DataTemplate>
<TabItem>
<Button Content="Test button"/>
</TabItem>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
I know that the Documents collection in the ViewModel is updated properly since I can see an empty tab header when I run my application, thus tab items are being created by the control. But for some reason there is no button in the tab item. Any ideas why this is happening?
Remove TabItem from your DataTemplate as at the moment you put TabItem within TabItem.
<TabControl Grid.Row="1" ItemsSource="{Binding Path=Documents}">
<TabControl.ItemTemplate>
<DataTemplate>
<Button Content="Test button"/>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
also if you want to your Button to appear in Content part and not in the Header then instead of ItemTemplate use ContentTemplate
Related
I have a XAML view that should hold instances of other views and those views should be displayed in a list, each contained in its own Expander. I'm using Caliburn.Micro and MEF to set all the components up.
The ItemsControl itself works just fine (shows the content of the view correctly):
<ItemsControl ItemsSource="{Binding CursorTools}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl cal:View.Model="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
But when I set the ItemsControl's DataTemplate to be an Expander, the Caliburn no longer "finds" the view for the viewmodel (so the expander is empty):
<ItemsControl ItemsSource="{Binding CursorTools}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!--<ContentControl cal:View.Model="{Binding}" />-->
<Expander Header="{Binding Path=Title}">
<Expander.ContentTemplate>
<DataTemplate>
<ContentControl cal:View.Model="{Binding}" />
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The problem is that I will have many items and their content will be large enough to fill the screen, so how can I get the Expander to set its content properly?
Expander is actually a ContentControl so this should work:
<Expander Header="{Binding Path=Title}" cal:View.Model="{Binding}" />
I am currently working on a project using MVVM pattern and can't find anywhere a solution how to bind an ObservableCollection to a TabControl which has a template for an item of it.
For example, this is where I got so far:
<TabControl ItemsSource="{Binding ConnStringBufferOC}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBox Text="{Binding Username}"/>
<!-- Controls here -->
</Grid>
</DataTemplate>
</TabContro.ItemTemplate>
</TabControl>
This however only partialy works. It creates controls in the tab header area instead of the tab content area. I would want to bind each item to a new tab which has a header of a bound source from OC, for example:
Header="{Binding Name}"
And in the content area of each tab I would like to have controls, which have contents bound from the ObservableCollection in this example ConnStringBufferOC. So every tab has same controls only content bound to the controls is different.
You need to specify ContentTemplate for tab content and ItemTemplate for tab header
<TabControl ItemsSource="{Binding ConnStringBufferOC}">
<TabControl.ContentTemplate>
<DataTemplate>
<Grid>
<TextBox Text="{Binding Username}"/>
<!-- Controls here -->
</Grid>
</DataTemplate>
</TabControl.ContentTemplate>
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
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>
I have a treeview inside of a dockpanel and all of the elements of the treeview are inside HierarchicalDataTemplates. Here is the code:
<DockPanel Margin="10,10,0,0" VerticalAlignment="Stretch" Grid.Row="0" Grid.RowSpan="5" Grid.Column="0">
<DockPanel.Resources>
<src:TreeViewFilter x:Key="MyList" />
<HierarchicalDataTemplate DataType="{x:Type src:TreeViewParent}" ItemsSource="{Binding Path=OrderAttributes}">
<TextBlock Text="{Binding Path=Name}" FontSize="24"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type src:OrderAttribute}" ItemsSource="{Binding Path=OrderAttributes}">
<TextBlock Text="{Binding Path=NameAndCount}" FontSize="16"/>
</HierarchicalDataTemplate>
</DockPanel.Resources>
<TreeView Name="treeView1" BorderThickness="2" ItemsSource="{Binding Source={StaticResource MyList}, UpdateSourceTrigger=PropertyChanged}" TreeViewItem.Selected="treeViewFilter"/>
</DockPanel>
As you can see, the DockPanel wraps around the TreeView. The icons I am trying to add would be in the second HierarchicalDataTemplate which binds to a string and displays as a textbox. Depending on the name of the "NameAndCount", I would choose an icon to be displayed next to it on the left.
Any ideas on a solution for my example? Or do I need to think about using different templates like StackPanel?
Add an Image-Control wherever you want, bind its Source to "NameAndCount" and use a IValueConverter to convert it to an image-path.
I would like to display a list of usercontrols binded to a listbox
next to each usercontrol there should be a button
<ListBox ItemsSource="{Binding usercontrollist}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<!--usercontrol of the current binded items-->
<Button Content="x" HorizontalAlignment="Right"></Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How can i do this in xaml code
Assuming usercontrollist is a collection of UserControl, then you should be able to do this:
<ContentControl Content="{Binding}" />