I still haven't found the problem in my code. Maybe, It might not be possible to bind alphakeygroep to Observable Collection?
I'am writing a WP8 application which uses Longlistselector with a JumpList.
Binding works when using LongListSelector without the use of Jumplist.
TrafficFeed implements INotifyPropertyChanged.
Binding in xaml is as follows:
ItemsSource="{Binding feedsA}"
private ObservableCollection<TrafficFeed> feedsA = new ObservableCollection<TrafficFeed>();
public ObservableCollection<TrafficFeed> FeedsA
{
get { return feedsA; }
set { feedsA = value; }
}
When I am adding a JumpList, I need to change my observable collection to:
private ObservableCollection<AlphaKeyGroup<TrafficFeed>> dataSourceAntwerpen = new ObservableCollection<AlphaKeyGroup<TrafficFeed>>();
public ObservableCollection<AlphaKeyGroup<TrafficFeed>> DataSourceAntwerpen
{
get { return dataSourceAntwerpen; }
set { dataSourceAntwerpen = value; }
}
<phone:PivotItem Header="item2">
<phone:LongListSelector SelectionChanged="feedListBox_SelectionChanged"
ItemsSource="{Binding DataSourceAntwerpen}"
x:Name="LongListfeedsA"
JumpListStyle="{StaticResource AddrBookJumpListStyle}"
Background="Transparent"
GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
ItemTemplate="{StaticResource AddrBookItemTemplate}"
LayoutMode="List"
IsGroupingEnabled="true"
HideEmptyGroups ="true"/>
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="AddrBookItemTemplate">
<StackPanel VerticalAlignment="Top">
<TextBlock TextDecorations="Underline" FontSize="24" Name="feedTitle" TextWrapping="Wrap" Margin="12,0,0,0" HorizontalAlignment="Left" Foreground="{StaticResource PhoneAccentBrush}" Text="{Binding Title}" />
<TextBlock Name="feedSummary" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Description}" />
<TextBlock Name="feedPubDate" Foreground="{StaticResource PhoneSubtleBrush}" Margin="12,0,0,10" Text="{Binding PubDate}" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="AddrBookGroupHeaderTemplate">
<Border Background="Transparent" Padding="5">
<Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="auto"
Height="62" Margin="0,0,18,0" HorizontalAlignment="Left">
<TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6"
FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Border>
</Border>
</DataTemplate>
<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
<Style x:Key="AddrBookJumpListStyle" TargetType="phone:LongListSelector">
<Setter Property="GridCellSize" Value="200,100"/>
<Setter Property="LayoutMode" Value="Grid" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="200" Height="100" Margin="6" >
<TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6"
Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
Now the binding doesn't work anymore. What should I add?
Related
Following is the listview (code below), I'm using. Whenever, I clear the observable collection bind to the item source and add new items to the collection, I observe a slight flickering. I tried emptying the transition collection but that disables the animation behavior alone, the flicker still persists.
Any thoughts?
<ListView SelectionMode="None" x:Name="View"
Grid.Row="1"
ItemsSource="{x:Bind Details,Mode=OneWay}"
ItemTemplateSelector="{StaticResource TestModuleTemplateSelector}"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ShowsScrollingPlaceholders="False"
ScrollViewer.HorizontalScrollMode="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListView.ItemContainerTransitions>
<TransitionCollection/>
</ListView.ItemContainerTransitions>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
In my userControl xaml.cs, I've the following
private ObservableCollection<TestEntityBase> _Details = new ObservableCollection<TestEntityBase>();
public ObservableCollection<TestEntityBase> Details
{
get { return _Details; }
set
{
SetProperty(ref _Details, value);
}
}
The following custom event (subscribed by the userControl.xaml.cs) takes care of adding items to the observable collection above. This event is being triggered from a button click of another user control. Every time, the button is clicked, the items are cleared and added.
private void OnLoadingModuleEntity(IList<EntityBase> entities)
{
Details.Clear();
foreach (EntityBase entity in entities)
{
TestEntityBase entityBase = new TestEntityBase();
// Conversion logic goes here
//
Details.Add(entityBase);
}
}
Data Template Used
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Name="Sync" FontFamily="Segoe MDL2 Assets"
Text="ξΆ•" VerticalAlignment="Center" FontSize="10"
ToolTipService.Placement="Top"
Margin="0,0,10,0" Visibility="{x:Bind IsSyncVisible,Mode=OneWay,Converter={StaticResource BoolToVisibilityConverter}}"/>
<CheckBox x:Name="CheckBox"
IsThreeState="False" Opacity="0.2"
MinWidth="10"/>
</StackPanel>
<Border Grid.Column="1" BorderThickness="0,0,0,1" Height="40" BorderBrush="#f0f0f0">
<Grid>
<RelativePanel VerticalAlignment="Center">
<TextBlock Name="Name" Text="{x:Bind Name}"
VerticalAlignment="Center" Opacity="0.5"
TextWrapping="Wrap"/>
<Image Name="Dot1" Source="/test/Assets/abc.jpg"
Height="6" Width="6"
VerticalAlignment="Center" Margin="10,8,0,0"
RelativePanel.RightOf="Name" />
<TextBlock Name="Date1" Text="{x:Bind date2String}" Opacity="0.5"
VerticalAlignment="Center" Margin="10,0,0,0"
RelativePanel.RightOf="Dot1" />
<Image Name="Dot2" Source="/test/Assets/321.jpg"
Height="6" Width="6"
VerticalAlignment="Center" Margin="10,8,0,0"
RelativePanel.RightOf="Date1"/>
<Image Name="Name2" Source="/test/Assets/123.jpg"
Height="10" Width="10"
VerticalAlignment="Center" Margin="10,5,0,0"
RelativePanel.RightOf="Dot2"/>
<TextBlock Name="Others Text="{x:Bind Others}" Opacity="0.5"
VerticalAlignment="Center" Margin="10,0,0,0"
RelativePanel.RightOf="Name2"/>
</RelativePanel>
</Grid>
</Border>
</Grid>
we are developing an in-house Windows 10 app for time tracking. We are not extremely familiar with it but have it almost built. The question is how do we change the content of a single selected item inside a gridview.
XAML code
<Page
x:Class="xxxxx.AllJobs"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:xxxxx"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="gridAllJobs" Background="White">
<GridView x:Name="gridViewJobs" Margin="5,120,0,0" Grid.Column="1" Background="LightGray">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="JobPanel" Orientation="Vertical" Background="White" Margin="10,10,0,0" Tapped="JobPanel_Tapped">
<local:DefaultContent/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Jobs" VerticalAlignment="Top" Height="63" Width="124" FontSize="48"/>
<TextBlock x:Name="lblTime" Margin="0,10,10,0" TextWrapping="Wrap" Text="8:00:00" FontSize="36" FontWeight="Bold" TextAlignment="Right" Padding="2,2,2,0" HorizontalAlignment="Right" VerticalAlignment="Top" Width="174" Height="50"/>
<TextBlock x:Name="txtEmployee" HorizontalAlignment="Right" Margin="0,67,10,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="48" Width="223" FontSize="24" TextAlignment="Right" Padding="2"/>
<Image x:Name="imgClockOut" HorizontalAlignment="Right" Height="115" Margin="0,0,238,0" VerticalAlignment="Top" Width="115" Source="Assets/clockout.png" Tapped="imgClockOut_Tapped"/>
</Grid>
</Page>
When the user selects an individual job, we want the to be replaced with another resource (or maybe there is a better way to do this). But just for that one job.
DefaultConent is a usercontrol
<UserControl
x:Class="xxxxx.DefaultContent"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:xxxxx"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="150"
d:DesignWidth="400">
<StackPanel x:Name="OuterPanel" Orientation="Horizontal" Background="White" Margin="20,0,0,0">
<StackPanel x:Name="LeftPanel" Margin="5" Width="225">
<TextBlock x:Name="txtProdID" Text="{Binding ModuleID}" FontSize="24" FontWeight="Bold" Foreground="DarkBlue" Padding="2" FontFamily="Microsoft JhengHei"/>
<TextBlock x:Name="txtJobID" Text="{Binding JobID}" Padding="2" FontSize="10"/>
<TextBlock Text="{Binding ItemID}" Padding="2" FontWeight="Bold" FontFamily="Microsoft JhengHei" FontSize="20"/>
<TextBlock Text="{Binding ProductName}" Padding="2" FontSize="12" TextWrapping="WrapWholeWords"/>
</StackPanel>
<StackPanel x:Name="DividerPanel" Margin="0,10,0,10" Background="LightGray" Width="1"/>
<StackPanel x:Name="RightPanel" Orientation="Vertical" Width="95" Margin="20,5,20,10">
<TextBlock Text="{Binding CalcQty}" TextAlignment="Right" Padding="2" FontSize="24"/>
<TextBlock Text="{Binding OprID}" TextAlignment="Right" VerticalAlignment="Bottom" Padding="2,38,2,2"/>
</StackPanel>
<StackPanel x:Name="JobStatus">
<local:NotStarted/>
</StackPanel>
</StackPanel>
</UserControl>
And we want to replace that content with buttons. We are completely open to any ideas. We may be going about this completely wrong. I'm sure it is something simple and we just cannot find the answer.
Thanks in advance.
Update.
I've been able to bind a new property on click. When I add this property as a text block, it does update on the click. However, the "Setter" does not seem to be doing anything. The value of my text changes. But the properties of the panel are not changing.
<StackPanel x:Name="LeftPanel" Margin="5" Width="225">
<TextBlock x:Name="txtProdID" Text="{Binding ModuleID}" FontSize="24" FontWeight="Bold" Foreground="DarkBlue" Padding="2" FontFamily="Microsoft JhengHei"/>
<TextBlock x:Name="txtJobID" Text="{Binding JobID}" Padding="2" FontSize="10"/>
<TextBlock Text="{Binding ItemID}" Padding="2" FontWeight="Bold" FontFamily="Microsoft JhengHei" FontSize="20"/>
<TextBlock Text="{Binding ProductName}" Padding="2" FontSize="12" TextWrapping="WrapWholeWords"/>
<TextBlock Text="{Binding IsClicked}" Padding="2" FontSize="12" TextWrapping="WrapWholeWords"/>
</StackPanel>
<StackPanel x:Name="DividerPanel" Margin="0,10,0,10" Background="LightGray" Width="1"/>
<StackPanel x:Name="RightPanel" Orientation="Vertical" Width="95" Margin="20,5,20,10">
<TextBlock Text="{Binding CalcQty}" TextAlignment="Right" Padding="2" FontSize="24"/>
<TextBlock Text="{Binding OprID}" TextAlignment="Right" VerticalAlignment="Bottom" Padding="2,38,2,2"/>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<StateTrigger x:Name="CurrItem" IsActive="{Binding Path=IsClicked}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LeftPanel.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackPanel>
Several reasons why your UI isn't updating.
You can apply a mode to your binding may force the data back.
But more importantly, are you implementing the the INotifyPropertyChanged interface, this allows the updated property to be sent back to the ui as it updates.
To do this add the interface of : INotifyPropertyChanged to your class housing your data that needs updated, then it will prompt for you to add your implementation.
Then update your properties to hit the property back.
Example:
public class DemoCustomer : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
//NotifyPropertyChanged
// This method is called by the Set accessor of each property.
// The CallerMemberName attribute that is applied to the optional propertyName
// parameter causes the property name of the caller to be substituted as an argument.
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
//Property:
public string CustomerName
{
get
{
return this.customerNameValue;
}
set
{
if (value != this.customerNameValue)
{
this.customerNameValue = value;
NotifyPropertyChanged();
}
}
}
}
Referenced example from: https://msdn.microsoft.com/en-us/library/system.componentmodel.inotifypropertychanged(v=vs.110).aspx
I am developing a windows store app using Universal Windows 8.1 framework. I know it's outdated but my project is suppose to be using this framework so can't help it.
Now the problem is that I have successfully made it horizontal for the desktop, but for the mobile I want it vertical, but it is still showing horizontal. I used gridview for horizontal and for phone listview but still no result.
Here is the xaml code
<Page
x:Class="MedicinesApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MedicinesApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<CollectionViewSource x:Name="FruitsCollectionViewSource" IsSourceGrouped="True"/>
<DataTemplate x:Key="template">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}"/>
<TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" />
</StackPanel>
</DataTemplate>
</Page.Resources>
<ListView
ItemsSource="{Binding Source={StaticResource FruitsCollectionViewSource}}"
x:Name="FruitGridView"
Padding="30,20,40,0"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="FruitGridView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" Width="250" Height="250">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Path=DiseaseImageSource}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Disease Name" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Path=DiseaseName}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Category of Disease" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,87,10"/>
<TextBlock Text="{Binding Path=CategoryOfDisease}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="30" FontFamily="Segoe UI Light" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid MaximumRowsOrColumns="2" Orientation="Vertical" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
What am I missing?
Define both datatemplates in XAML resources (give them keys TemplateHori and TemplateVerti for example)
<Page.Resources>
<DataTemplate x:Key="TemplateHori">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}"/>
<TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="TemplateVerti">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding}"/>
<TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" />
</StackPanel>
</DataTemplate>
</Page.Resources>
add page size changing event in constructor:
public MainPage()
{
this.InitializeComponent();
Window.Current.SizeChanged += Current_SizeChanged;
}
and in page size changing event compare with and height:
void Current_SizeChanged(object sender, Window.UI.Core.WindowSizeChangedEventArgs e)
{
var b=Window.Current.Bounds;
if (b.Width>b.Height)
{
FruitGridView.ItemTemplate = (DataTemplate)Resources["TemplateHori"];
}
else
{
FruitGridView.ItemTemplate = (DataTemplate)Resources["TemplateVerti"];
}
}
I have space between my items and I cant remove it. I have been Googling about ItemsControl all day and found nothing that works. It also didn't work with listbox. It even made it worse.
Anyone has an idea?
Here is my code:
<ItemsControl BorderThickness="0" ItemsSource="{Binding Items}" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="0,0,0,0"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type newsSubscriber:Item}">
<Border VerticalAlignment="Stretch" SnapsToDevicePixels="True" BorderThickness="0">
<Border.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding RepeatImagePath}"/>
</Border.Background>
<StackPanel Cursor="Hand" VerticalAlignment="Stretch">
<StackPanel.InputBindings>
<MouseBinding MouseAction="LeftClick" Gesture="LeftClick" Command="{Binding GoToWebCommand}" />
</StackPanel.InputBindings>
<StackPanel VerticalAlignment="Stretch" FlowDirection="RightToLeft" Height="{Binding hight}" Orientation="Horizontal" HorizontalAlignment="Right">
<StackPanel.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding RepeatImagePath}"/>
</StackPanel.Background>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" Width="70" Text="{Binding time}"/>
<TextBlock Language="he-il" TextWrapping="Wrap" HorizontalAlignment="Right" VerticalAlignment="Center" Width="300" Text="{Binding title}"/>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Width="38">
<Image Stretch="None" Source="{Binding ArrowImagePath}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
output pic:
You have probably Height="{Binding hight}" property set to some large value.
<StackPanel VerticalAlignment="Stretch"
FlowDirection="RightToLeft"
Height="{Binding hight}"
Orientation="Horizontal"
HorizontalAlignment="Right">
You where on the right track with the FrameworkElement.Margin Set the Value="-1". It creates a small overlap that removes the space.
<Setter Property="FrameworkElement.Margin" Value="-1"/>
I have a custom control that contains a ComboBox in which I've created multiple data columns.
This works great, but I have been unable to figure out how to head a header row to the top of the drop down with titles for each of the columns. Also, if possible it would love to be able to style it so that the rows alternate colors. Given the XAML below, any ideas of how I can do this?
<UserControl x:Class="ActualsAllocations.LegalEntityDropDown"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="28" d:DesignWidth="400">
<UserControl.Resources>
<ResourceDictionary>
<Style x:Key="MainComboStyle" TargetType="{x:Type ComboBoxItem}">
<Style.Triggers>
</Style.Triggers>
</Style >
</ResourceDictionary>
</UserControl.Resources>
<DockPanel>
<Label Name="lblTitle" Width="75" Content="Title" Margin="3,3"/>
<ComboBox Name="cmbMain" HorizontalAlignment="Stretch" Margin="3,3" ItemsSource="{Binding}" ItemContainerStyle="{StaticResource MainComboStyle}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=VersionID}" Width="25" Margin="3,0"/>
<TextBlock Text="{Binding Path=VersionName}" Width="220" Margin="3,0"/>
<TextBlock Text="{Binding Path=EndDate, StringFormat={}{0:M/yyyy}}" Width="50" Margin="3,0" />
<TextBlock Text="{Binding Path=CreatedByUserName}" Width="100" Margin="3,0"/>
<TextBlock Text="{Binding Path=CreateDate}" Width="120" Margin="3,0"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ComboBox>
</DockPanel>
</UserControl>
About alternate colors for rows I would try using ItemTemplateSelector you can read about that here.
For header I would try using CompositeCollection described here.
If you go for this ItemTemplateSelector you don't need to different template for header as it will be already ComboBoxItem and Template will be ignored.
Code for ItemTemplateSelector:
public class CustomTemplateSelector : DataTemplateSelector
{
public DataTemplate EvenTemplate { get; set; }
public DataTemplate OddTemplate { get; set; }
public CollectionViewSource Collection { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
var list = Collection.Source as IList;
if (list != null)
{
if (list.IndexOf(item) % 2 == 0)
{
return EvenTemplate;
}
else
{
return OddTemplate;
}
}
return EvenTemplate;
}
}
Xaml for combobox:
<DockPanel>
<DockPanel.Resources>
<Style x:Key="MainComboStyle" TargetType="{x:Type ComboBoxItem}">
<Style.Triggers></Style.Triggers>
</Style >
<CollectionViewSource x:Key="list" Source="{Binding}"/>
<DataTemplate x:Key="EventTemplate">
<StackPanel Orientation="Horizontal" Background="Red">
<TextBlock Text="{Binding Path=VersionID}" Width="25" Margin="3,0"/>
<TextBlock Text="{Binding Path=VersionName}" Width="220" Margin="3,0"/>
<TextBlock Text="{Binding Path=EndDate, StringFormat={}{0:M/yyyy}}" Width="50" Margin="3,0" />
<TextBlock Text="{Binding Path=CreatedByUserName}" Width="100" Margin="3,0"/>
<TextBlock Text="{Binding Path=CreateDate}" Width="120" Margin="3,0"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="OddTemplate">
<StackPanel Orientation="Horizontal" Background="Green">
<TextBlock Text="{Binding Path=VersionID}" Width="25" Margin="3,0"/>
<TextBlock Text="{Binding Path=VersionName}" Width="220" Margin="3,0"/>
<TextBlock Text="{Binding Path=EndDate, StringFormat={}{0:M/yyyy}}" Width="50" Margin="3,0" />
<TextBlock Text="{Binding Path=CreatedByUserName}" Width="100" Margin="3,0"/>
<TextBlock Text="{Binding Path=CreateDate}" Width="120" Margin="3,0"/>
</StackPanel>
</DataTemplate>
<local:CustomTemplateSelector OddTemplate="{StaticResource OddTemplate}"
EvenTemplate="{StaticResource EventTemplate}"
Collection="{StaticResource list}"
x:Key="customTemplateSelector" />
</DockPanel.Resources>
<Label Name="lblTitle" Width="75" Content="Title" Margin="3,3"/>
<ComboBox Name="cmbMain" HorizontalAlignment="Stretch" Margin="3,3"
ItemTemplateSelector="{StaticResource customTemplateSelector}" >
<ComboBox.ItemsSource>
<CompositeCollection>
<ComboBoxItem IsEnabled="False" Foreground="Black"> VersionID | VersionName | EndDate | CreatedByUser | CreateDate</ComboBoxItem>
<CollectionContainer Collection="{Binding Source={StaticResource list}}"/>
</CompositeCollection>
</ComboBox.ItemsSource>
</ComboBox>
</DockPanel>
You can consider making styling header so it will be nicer. Also you can put part of this dataTemplates in separate control so you can avoid repeating code.