I am not able to find an answer to my question somewhere. Maybe you guys can help me.
I am using WPF and have a TabControl which uses an ItemTemplateSelector. The ItemsSource of the TabControl is an ObservableCollection of Strings. Based on the string, the template for the TabItem is choosen. Works fine so far.
Only problem I have now, is that I want to use a custom style on my TabItems. So I tried the ItemContainerStyle property, but this doesn't work. When I set the ItemContainerStyle, the ItemTemplateSelector doesn't fire anymore. I am not using a ContentTemplateSelector as I don't need this one on this solution as the content of the Tabs is always the same.
So my question is: How can I define the style of the TabItems, when I use an ItemTemplateSelector?
Here is some code:
TabControl on Usercontrol:
<TabControl TabStripPlacement="Right"
ItemsSource="{Binding loadedPalettes, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource StyleTabControl}"
ItemTemplateSelector="{StaticResource TabTemplateSelector}"
Height="Auto"
SelectionChanged="paletteSelectionChanged"
SelectedIndex="{Binding selPaletteIndex}"
Width="Auto"
Margin="0,5,0,0">
<TabControl.ContentTemplate>
<DataTemplate>
<local:tabDataGrid />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
TemplateSelector Class
Public Class SSITabTemplateSelector
Inherits DataTemplateSelector
Public Overrides Function SelectTemplate(item As Object, container As DependencyObject) As DataTemplate
Dim element As FrameworkElement
element = TryCast(container, FrameworkElement)
If element Is Nothing Then Return Nothing
If container Is Nothing Then Return Nothing
Select Case item
Case "Search"
Return TryCast(element.FindResource("searchTabItem"), DataTemplate)
'Case "TabSwitch"
' Return TryCast(element.FindResource("TextItem"), DataTemplate)
Case Else
Return TryCast(element.FindResource("normalTabItem"), DataTemplate)
End Select
Return Nothing
End Function
End Class
DataTemplates for the TabItems
<DataTemplate x:Key="normalTabItem">
<StackPanel Name="Panel"
Orientation="Horizontal">
<TextBlock Text="{Binding}"
Background="Transparent">
<TextBlock.LayoutTransform>
<RotateTransform Angle="270" />
</TextBlock.LayoutTransform>
</TextBlock>
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Content="{Binding Content}" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="searchTabItem">
<StackPanel Name="Panel"
Orientation="Horizontal">
<TextBlock Text="blabla"
Background="AliceBlue">
<TextBlock.LayoutTransform>
<RotateTransform Angle="270" />
</TextBlock.LayoutTransform>
</TextBlock>
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Content="{Binding Content}" />
</StackPanel>
</DataTemplate>
Adding the answer, according the comment. You can write something like this.
<TabControl>
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Header" Value="MyHeader"/>
</Style>
</TabControl.Resources>
</TabControl>
Solution:
Yeah, it was that simple. bars222 had the right answer. Just use <TabControl.Resources> and add the styling.
Thanks!
Related
What in the world is wrong with this ListBox? It is showing items as plain strings, not using the template I have provided:
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Ellipse Width="20" Height="20" Fill="LightBlue" />
<TextBlock Text="{TemplateBinding Content}" Foreground="Red" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Items>
<ListBoxItem>html</ListBoxItem>
<ListBoxItem>head</ListBoxItem>
<ListBoxItem>body</ListBoxItem>
<ListBoxItem>table</ListBoxItem>
<ListBoxItem>tr</ListBoxItem>
<ListBoxItem>td</ListBoxItem>
</ListBox.Items>
</ListBox>
From the Remarks section in the ItemTemplate MSDN page:
When you set an ItemTemplate on an ItemsControl, the UI is generated
as follows (using the ListBox as an example):
1.During content generation, the ItemsPanel initiates a request for the ItemContainerGenerator to create a container for each data item.
For ListBox, the container is a ListBoxItem. The generator calls back
into the ItemsControl to prepare the container.
2.Part of the preparation involves the copying of the ItemTemplate of the ListBox to be the ContentTemplate of the ListBoxItem.
3.Similar to all ContentControl types, the ControlTemplate of a ListBoxItem contains a ContentPresenter. When the template is applied,
it creates a ContentPresenter whose ContentTemplate is bound to the
ContentTemplate of the ListBoxItem.
4.Finally, the ContentPresenter applies that ContentTemplate to itself, and that creates the UI.
These steps are apparently not executed when you create ListBoxItem instances directly in XAML. It is however not strictly necessary to bind the ItemSource property. You may also directly set items like this:
<ListBox xmlns:sys="clr-namespace:System;assembly=mscorlib">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Ellipse Width="20" Height="20" Fill="LightBlue" />
<TextBlock Text="{TemplateBinding Content}" Foreground="Red" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Items>
<sys:String>html</sys:String>
<sys:String>head</sys:String>
<sys:String>body</sys:String>
<sys:String>table</sys:String>
<sys:String>tr</sys:String>
<sys:String>td</sys:String>
</ListBox.Items>
</ListBox>
public class MyViewModel
{
public List<String> Items
{
get { return new List<String> { "html", "head", "body","table","tr","td" }; }
}
}
//This can be done in the Loaded event of the page:
DataContext = new MyViewModel();
Your XAML
<ListBox Margin="20" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<Ellipse Width="20" Height="20" Fill="LightBlue" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I feel like I'm missing some essential concept in WPF databinding. It's always hit-or-miss whether my bindings are going to work for me.
In this example, I want to two-way bind the IsExpanded property of a TreeViewItem to the corresponding property on a bound object. It does work with the first example; it does NOT with the second.
Can anyone explain why? I cannot understand why the second version doesn't work. And I can't help thinking it would save me untold grief if I could.
This works when placed in UserControl.Resources (binding to IsExpanded is done with a Style applied to TreeViewItem:
<Style TargetType="TreeViewItem">
<Setter Property="IsExpanded"
Value="{Binding Path=IsExpanded, Mode=TwoWay}" />
</Style>
<DataTemplate DataType="{x:Type viewModels:FolderItem}">
<TreeViewItem ItemsSource="{Binding Folders}"
IsExpanded="{Binding Mode=TwoWay,Path=IsExpanded}" >
<TreeViewItem.Header>
<StackPanel Orientation="Vertical">
<Image Source="{Binding IconSource}"
Width="16" Height="16"
Margin="4,0,4,0" VerticalAlignment="Center" />
<TextBlock Text="{Binding Title}"
VerticalAlignment="Center" />
</StackPanel>
</TreeViewItem.Header>
</TreeViewItem>
</DataTemplate>
This does not (direct binding to IsExpanded in the data template):
<DataTemplate DataType="{x:Type viewModels:FolderItem}">
<TreeViewItem ItemsSource="{Binding Folders}"
IsExpanded="{Binding Path=IsExpanded,Mode=TwoWay}" >
<TreeViewItem.Header>
<StackPanel Orientation="Vertical">
<Image Source="{Binding IconSource}"
Width="16" Height="16" Margin="4,0,4,0"
VerticalAlignment="Center" />
<TextBlock Text="{Binding Title}"
VerticalAlignment="Center" />
</StackPanel>
</TreeViewItem.Header>
</TreeViewItem>
</DataTemplate>
The DataTemplate is used in the following Xaml fragment, with the data template given above used to perform data conversion. Documents is an observable list of FolderItems which has been bound correctly.
<TreeView ItemsSource="{Binding Documents}" />
Both DataTemplates show the file tree. But there is no binding (two-way or otherwise) for IsExpanded in the second case.
Not shown is DataTemplating for FileItem's which are the leaf nodes of FolderItem's..
The issue is that TreeViewItem is actually a wrapper that is used by the TreeView itself. It needn't (and shouldn't) be part of your DataTemplate, as what you have now is creating a TreeViewItem within a TreeViewItem (the outer one being created by the TreeView, and the inner one being part of the template).
This is why your style works, as it gets applied to all TreeViewItems, both the one that you're declaring (which ends up being meaningless) and the one created by the TreeView.
What you should do is replace your DataTemplate with this:
<HierarchicalDataTemplate ItemsSource="{Binding Folders}">
<StackPanel Orientation="Vertical">
<Image Source="{Binding IconSource}"
Width="16" Height="16" Margin="4,0,4,0"
VerticalAlignment="Center" />
<TextBlock Text="{Binding Title}"
VerticalAlignment="Center" />
<HierarchicalDataTemplate>
(Unfortunately I can't test at the moment, but that should at least get you headed in the right direction).
Leave your style as-is to continue binding the property.
For some reason I am having a heck of a time getting my TabControl to display properly when binding the ItemsSource to a ObservableCollection of view models. I'm basing my design off of the tutorial found here: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx. I did find a few questions like mine here but none addressed my particular situation.
This is my TabControl in xaml.
<TabControl ItemsSource="{Binding Workspaces}"
SelectedIndex="{Binding ActiveWorkspaceIndex}"
ItemTemplate="{StaticResource ClosableTabItemTemplate}"/>
Where ClosableTabItemTemplate is the following.
<DataTemplate x:Key="ClosableTabItemTemplate">
<DockPanel Width="120">
<Button
Command="{Binding Path=CloseCommand}"
Content="X"
Cursor="Hand"
DockPanel.Dock="Right"
Focusable="False"
FontFamily="Courier"
FontSize="9"
FontWeight="Bold"
Margin="0,1,0,0"
Padding="0"
VerticalContentAlignment="Bottom"
Width="16" Height="16"
/>
<ContentPresenter
Content="{Binding Path=DisplayName}"
VerticalAlignment="Center"
/>
</DockPanel>
</DataTemplate>
Workspaces is the ObservableCollection of view models. ActiveWorkspaceIndex is just the active workspace index that I keep track of in the view model. I associate my view model with an instance of a view through the following data template in my App.xaml file.
<DataTemplate DataType="{x:Type vm:ViewModelStartPage}">
<v:ViewStartPage/>
</DataTemplate>
I only add one view model to my collection of workspaces. I see 2 views display in the tab control and they aren't tabbed. It's almost like the TabControl doesnt know to treat the different views as TabItems, its behaving more like a stack panel, stacking the views. If I create the tab items in code it works fine like this:
System.Windows.Controls.TabItem i = new System.Windows.Controls.TabItem();
i.Content = new Views.ViewStartPage();
i.Header = "A Tab Item";
this.xTabControl.Items.Add(i);
I must be missing some content template or something. I will be styling my tabs later but for now I would be happy just getting the basic tabs working. Also the views in the tab contents may be different for each tab so I can't use the simple textblock TabControl template examples I see all over the place...
I.e. not this...
<TabControl.ContentTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Content}" />
</DataTemplate>
Any ideas?
I ended up using a ContentControl with a TabControl data template (like the original tutorial project). Here is the xaml code I ended up with. I did not change the code-behind from the original sample project to make this work. The ContentControl is in my MainWindow.xaml and the other two pieces of code were in a ResourceDictionary.
<!-- Workspaces Tab Control -->
<ContentControl Grid.Row="1"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Content="{Binding Path=Workspaces}"
ContentTemplate="{StaticResource WorkspacesTemplate}"/>
<!-- Workspaces Template -->
<DataTemplate x:Key="WorkspacesTemplate">
<TabControl Style="{StaticResource ClosableTabControl}"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource WorkspaceTabItemTemplate}"
Margin="1"/>
</DataTemplate>
<!-- Workspace Tab Item Template -->
<DataTemplate x:Key="WorkspaceTabItemTemplate">
<Grid Width="Auto" Height="Auto">
<ContentPresenter ContentSource="Header" Margin="3"
Content="{Binding Path=DisplayName}"
HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource Foreground}"/>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Grid>
</DataTemplate>
I have recently moved ContentControl on the View(xaml) inside a telerik RadPane like so:
<telerik:RadDocking.DocumentHost>
<telerik:RadSplitContainer Visibility="{Binding UserControlVisible}">
<telerik:RadPaneGroup>
<telerik:RadPane CanUserClose="False" Header="{Binding Operation}">
<ContentControl x:Name="ActiveItem" Margin="10" VerticalAlignment="Top" />
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>
Since, I have done this my UserControls are not injected as the Content inside ContentControl. I have tried to explicitly bind Content Property on ContentControl to ActiveItem but that says, unable to find the associated view.
Any help will be much appreciated.
try to add a datatemplate to the current content:
<DataTemplate>
<ContentControl cal:View.Model="{Binding}" />
</DataTemplate>
Where cal is:
xmlns:cal="http://www.caliburnproject.org"
and bind the active item explicitly.
Now it looks like
<telerik:RadDocking.DocumentHost>
<telerik:RadSplitContainer Visibility="{Binding UserControlVisible}">
<telerik:RadPaneGroup>
<telerik:RadPane CanUserClose="False" Header="{Binding Operation}">
<ContentControl x:Name="ActiveItem" Margin="10" VerticalAlignment="Top" Content="{Binding ActiveItem}">
<ContentControl.ContentTemplate>
<DataTemplate>
<ContentControl cal:View.Model="{Binding}" />
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>
I'm trying to create a context menu, so that when you right click the ListViewItem, the user is presented with a list of options. The problem is; I can't get the refrenced item linked to the ListViewItem in the Click event.
I think it may be because I'm putting the ContextMenu in the wrong place in my XAML. I have been searching and playing around for ages, but think it could have something to do with the DataTemplate I'm using where the examples weren't in templates.
<ListView Margin="0" Name="FileImagesListView" VerticalAlignment="Top" Grid.Row="0">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<EventSetter Event="Mouse.MouseEnter" Handler="MouseEnterPicFileListItem" />
<EventSetter Event="Mouse.MouseLeave" Handler="MouseLeavePicFileListItem"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="{Binding Path=BorderBrushColourID, Converter={StaticResource BorderColourConverter}}" BorderThickness="3" CornerRadius="2">
<StackPanel FlowDirection="LeftToRight" Orientation="Vertical" Margin="3">
<Grid>
<TextBlock TextAlignment="Center" Text="{Binding Path=TimeAgo}" Margin="0,7" ></TextBlock>
<Label Style="{StaticResource CircularLabel}" HorizontalAlignment="Right" Height="35" Margin="0,-8,0,0" Content="{Binding Path=MatchedCount}" Visibility="{Binding Path=MatchedCount, Converter={StaticResource VisibleIfGreaterThanOne}}" ></Label>
</Grid>
<Image Name="FilePic" Height="Auto" Width="160" Source="{Binding Path=BitmapPicture}"></Image>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Margin="3" Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
Usually you can get the data item by just calling myListViewItem.DataContext and casting it into whatever it should be.
private void ListViewItem_Click(object sender, EventArgs e)
{
ListViewItem item = sender as ListViewItem;
if (item == null) return;
MyDataItem = item.DataContext as MyDataItem;
// Do whatever here
}
As a side note, WPF ContextMenus do not share the same VisualTree as your application, so trying to bind them to your main UI works differently. Its hard to tell if that is related to your problem because I see no ContextMenu or Click event in your question.
Edit
If your ContextMenu is on a ListBoxItem, then you need to refer to your ContextMenu's PlacementTarget to get the ListBoxItem that the ContextMenu is attached to