Develop Reference

Apply DataTemplate to one type only

I am trying to apply the datatemplate only to type Genre. But it also gets applied to List<string> after Search_Click. How do I make the ListBox apply DataTemplate only to Genre data?
<DataTemplate x:Key="genreTemplate" DataType="{x:Type local:Genre}">
<Border BorderBrush="Green" BorderThickness="2">
<StackPanel Margin="4">
<TextBlock
FontSize="20"
Foreground="Red"
Text="{Binding Name}"
TextAlignment="Center" />
<TextBlock
FontSize="16"
Text="{Binding Count}"
TextAlignment="Right" />
</StackPanel>
</Border>
</DataTemplate>
Code-behind:
public class Genre
{
public string Name { get; set; }
public int Count { get; set; }
public double Size { get; set; }
public string Drive { get; set; }
}
private void Search_Click(object sender, RoutedEventArgs e)
{
var path = Constants.allMoviesPath;
var ext = new List<string> { #".txt", #".ini", #".exe", #".mob", #".srt", #".ass" };
lstBox.ItemsSource = Directory.GetFiles(path, "*" + SearchString + "*", SearchOption.AllDirectories)
.Where(f => !ext.Contains(System.IO.Path.GetExtension(f)))
.Select(f => System.IO.Path.GetFileNameWithoutExtension(f))
.ToList();
}
private void btnStats_Click(object sender, RoutedEventArgs e)
{
lstBox.ItemsSource = FileLists.MoviesCountSizeStats();
}
return type of MoviesCountSizeStats() is List<Genre>
<ListBox
x:Name="lstBox"
Background="CadetBlue"
FontFamily="Consolas"
FontSize="14"
FontWeight="DemiBold"
ItemContainerStyle="{DynamicResource _ListBoxItemStyle}"
ItemTemplate="{StaticResource genreTemplate}"
MouseDoubleClick="lstBox_MouseDoubleClick" />

Instead of applying the template to all items in the list box, as you are doing now, add the template as a resource to the ListBox.Resources (or other suitable resource dictionary), with an implicit key (i.e. implied by the TargetType), and let the template be selected automatically for the item type:
<ListBox
x:Name="lstBox"
Background="CadetBlue"
FontFamily="Consolas"
FontSize="14"
FontWeight="DemiBold"
ItemContainerStyle="{DynamicResource _ListBoxItemStyle}"
MouseDoubleClick="lstBox_MouseDoubleClick">
<ListBox.Resources>
<DataTemplate DataType="{x:Type local:Genre}">
<Border BorderBrush="Green" BorderThickness="2">
<StackPanel Margin="4">
<TextBlock
FontSize="20"
Foreground="Red"
Text="{Binding Name}"
TextAlignment="Center" />
<TextBlock
FontSize="16"
Text="{Binding Count}"
TextAlignment="Right" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.Resources>
</ListBox>
You can add other templates as necessary for the other data types that might appear in the list box.

filter xaml gridview with combo box

I am just starting off with windows 8 apps development and I want to be able to filter a gridview using the selected value in a combobox
my xaml page code behind
public sealed partial class MainPage : Page
{
public ObservableCollection<Recording> MyMusic = new ObservableCollection<Recording>();
public MainPage()
{
this.InitializeComponent();
// Add items to the collection.
MyMusic.Add(new Recording("Chris Sells", "Chris Sells Live",
new DateTime(2008, 2, 5)));
MyMusic.Add(new Recording("Luka Abrus",
"The Road to Redmond", new DateTime(2007, 4, 3)));
MyMusic.Add(new Recording("Jim Hance",
"The Best of Jim Hance", new DateTime(2007, 2, 6)));
// Set the data context for the combo box.
//ComboBox1.DataContext = MyMusic;
this.DataContext = new CollectionViewSource { Source = MyMusic };
}
}
Class
public class Recording
{
public Recording() { }
public Recording(string artistName, string cdName, DateTime release)
{
Artist = artistName;
Name = cdName;
ReleaseDate = release;
}
public string Artist { get; set; }
public string Name { get; set; }
public DateTime ReleaseDate { get; set; }
// Override the ToString method.
public override string ToString()
{
return Name + " by " + Artist + ", Released: " + ReleaseDate.ToString("d");
}
}
Xaml mark up
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ComboBox x:Name="ComboBox1" HorizontalAlignment="Left" Margin="542,108,0,0" VerticalAlignment="Top" Width="360" ItemsSource="{Binding}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Text="Artist:" Margin="2" />
<TextBlock Text="{Binding Artist}" Margin="2" />
<TextBlock Text="CD:" Margin="10,2,0,2" />
<TextBlock Text="{Binding Name}" Margin="2" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!--<StackPanel x:Name="RecordingDetails" Margin="542,150,10,30">
<TextBlock Text="{Binding Artist}" FontWeight="Bold" FontSize="30" />
<TextBlock Text="{Binding Name}" FontStyle="Italic" FontSize="30" />
<TextBlock Text="{Binding ReleaseDate}" FontSize="30" />
</StackPanel>-->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding}"
SelectionMode="None"
IsSwipeEnabled="false" >
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}" Name="test">
<TextBlock Text="{Binding Artist}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Name}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
<TextBlock Text="{Binding ReleaseDate}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
so essentially I just need to filter the gridview dynamically using combo box value selected.
Kindly appreciate help and guidaince please.

This is a msdn example.
You can refer this msdn page link for further details.
UserControl
<UserControl x:Class="TestDataBindingQS.Page2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="using:TestDataBindingQS"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<UserControl.Resources>
<local:StringFormatter x:Key="StringConverter"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
<StackPanel Width="750" Height="200"
VerticalAlignment="Center" HorizontalAlignment="Center">
<ComboBox x:Name="ComboBox1" ItemsSource="{Binding}"
Foreground="Black" FontSize="30" Height="50" Width="750">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Text="Artist:" Margin="2" />
<TextBlock Text="{Binding Artist}" Margin="2" />
<TextBlock Text="CD:" Margin="10,2,0,2" />
<TextBlock Text="{Binding Name}" Margin="2" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!--The UI for the details view-->
<StackPanel x:Name="RecordingDetails">
<TextBlock Text="{Binding Artist}" FontSize="30" FontWeight="Bold" />
<TextBlock Text="{Binding Name}" FontSize="30" FontStyle="Italic" />
<TextBlock Text="{Binding ReleaseDate,
Converter={StaticResource StringConverter},
ConverterParameter=Released: \{0:d\}}" FontSize="30" />
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
converter class
public class StringFormatter : IValueConverter
{
// This converts the value object to the string to display.
// This will work with most simple types.
public object Convert(object value, Type targetType,
object parameter, System.Globalization.CultureInfo culture)
{
// Retrieve the format string and use it to format the value.
string formatString = parameter as string;
if (!string.IsNullOrEmpty(formatString))
{
return string.Format(culture, formatString, value);
}
// If the format string is null or empty, simply
// call ToString() on the value.
return value.ToString();
}
// No need to implement converting back on a one-way binding
public object ConvertBack(object value, Type targetType,
object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
And this produces the following output

C# ListBox, different background for each item

I have ListBox in xaml:
<ListBox Name="feedListBox" Height="758" HorizontalAlignment="Center" Margin="0,10,0,0" VerticalAlignment="Top" Width="480" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionChanged="feedListBox_SelectionChanged" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Background="White">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top" Width="480">
<TextBlock FontWeight="Bold" FontSize="24" Name="feedTitle" TextWrapping="Wrap" Margin="12,0,0,0" HorizontalAlignment="Left" Foreground="#FF000000" Text="{Binding Title.Text, Converter={StaticResource RssTextTrimmer}}" />
<TextBlock Name="feedSummary" Foreground="#FF000000" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Summary.Text, Converter={StaticResource RssTextTrimmer}}" />
<TextBlock Name="feedPubDate" Foreground="#FF939393" Margin="12,0,10,10" Text="{Binding PublishDate.DateTime}" HorizontalAlignment="Right" />
<Border BorderThickness="1" Height="2" HorizontalAlignment="Center" VerticalAlignment="Top" Width="480" BorderBrush="Black" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How can I specify different background for each item?

add a Brush property to your viewmodel and bind the controls in your DataTemplate to it
ViewModel:
using System.ComponentModel;
using System.Windows.Media;
...
public class YourViewModel : INotifyPropertyChanged{
...
private Brush _backgroundCol = Brushes.Red; //Default color
public Brush BackgroundCol
{
get { return _backgroundCol; }
set
{
_backgroundCol = value;
OnPropertyChanged("BackgroundCol");
}
}
...
}
xaml:
<TextBlock Name="feedPubDate" Background="{Binding Path=BackgroundCol}" />
for Information about how to implement the INotifyPropertyChanged interface have a look at: Implementing INotifyPropertyChanged - does a better way exist?

Try this:
XAML:
<ListBox Name="feedListBox" Height="758" HorizontalAlignment="Center" Margin="0,10,0,0" VerticalAlignment="Top" Width="480" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionChanged="feedListBox_SelectionChanged" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Background="White">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top" Width="480">
<Grid Background="{Binding feedTitleBack}">
<TextBlock FontWeight="Bold" FontSize="24" Name="feedTitle" TextWrapping="Wrap" Margin="12,0,0,0" HorizontalAlignment="Left" Foreground="#FF000000" Text="{Binding Title}"/>
</Grid>
<Grid Background="{Binding feedSummaryBack}">
<TextBlock Name="feedSummary" Foreground="#FF000000" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Summary}" />
</Grid>
<Grid Background="{Binding feedPubDateBack}">
<TextBlock Name="feedPubDate" Foreground="#FF939393" Margin="12,0,10,10" Text="{Binding PublishDate}" HorizontalAlignment="Right" />
</Grid>
<Border BorderThickness="1" Height="2" HorizontalAlignment="Center" VerticalAlignment="Top" Width="480" BorderBrush="Black" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
CS:
public class data
{
public string Title { get; set; }
public string feedTitleBack { get; set; }
public string Summary { get; set; }
public string feedSummaryBack { get; set; }
public string PublishDate { get; set; }
public string feedPubDateBack { get; set; }
public data() { }
public data(string Title, string feedTitleBack, string Summary, string feedSummaryBack, string PublishDate, string feedPubDateBack)
{
this.Title = Title;
this.feedTitleBack = feedTitleBack;
this.Summary = Summary;
this.feedSummaryBack = feedSummaryBack;
this.PublishDate = PublishDate;
this.feedPubDateBack = feedPubDateBack;
}
}
void loadData()
{
List<data> obj = new List<data>();
obj.Add(new data("Title1", "Red", "Summary1", "Green", "Date", "Blue"));
obj.Add(new data("Title1", "#DD4B39", "Summary1", "#006621", "Date", "#1A0DAB"));
feedListBox.ItemsSource = obj;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
loadData();
}

Binding Error in my windows phone 8 project

Well I am trying to do a simple binding in a Long list but the emulator is throwing a debug Exception in
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
I would paste my code below
My model class is
public class CommentView
{
public string ID { get; set; }
public string IsApproved { get; set; }
public string PostersComment { get; set; }
public string Name { get; set; } //Note that this is the name of the Jizuser
public string PostedDate { get; set; }
public string PostedTime { get; set; }
}
I am doing my binding from the xaml csharp code. so the script is pasted below
List<CommentView> commenterContainer = new List<CommentView>();
commenterContainer.Add(new CommentView() { Name ="FEMI", IsApproved="True", ID="1", PostedDate="2/3/2014", PostedTime="01:02:2011", PostersComment= "Me" });
commenterlist.ItemsSource = commenterContainer;
This is the longlist item. how I crafted the dataItem template
<phone:LongListSelector Margin="3" x:Name="commenterlist" SelectionChanged ="Bloglist_SelectionChanged" Grid.Row="6"
Background="White">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="#4063A9">
<StackPanel Margin="10,10,10,10" Orientation="Vertical" >
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="{Binding ID}" Visibility="Collapsed"/>
<Image Source="/Assets/profile.jpg"/>
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Margin="12,20,0,0" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="#4063A9"/>
</StackPanel>
<TextBlock Text="{Binding PostersComment}" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}" TextWrapping="Wrap" />
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="{Binding PostedDate}" />
<TextBlock x:Name="{Binding PostedTime}" />
<TextBlock x:Name="{Binding IsApproved}" Visibility="Collapsed"/>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

Problem was from the LongListSelector
Recreating the LongListSelector Solves the issue. I did this and it works fine

Data Binding to a listbox item template not working

I have the following code. It builds and runs but does not populate the listbox. Can someone spot the mistake?
<Grid>
<ListBox ItemsSource="{Binding Path=questions}" Height="401" HorizontalAlignment="Left" Name="results" VerticalAlignment="Top" Width="260" Margin="0,20,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Path=question.votes}" FontSize="15" Padding="5" Background="White" Foreground="Black"/>
<TextBlock Text="{Binding Path=question.answers}" FontSize="15" Padding="5" Background="White" Foreground="Black"/>
</StackPanel>
<StackPanel Orientation="Vertical" Height="Auto" Width="249">
<TextBlock Text="{Binding Path=question.title}" FontWeight="Bold" Background="#FF92F2CD" Height="22" Width="229" Foreground="Black"/>
<TextBlock Text="{Binding Path=question.body}" TextWrapping="Wrap" Height="43" Width="231" Background="#FFEFEFEF" Foreground="Black"/>
</StackPanel>
</StackPanel>
<StackPanel>
<TextBlock Text="{Binding Path=question.tags}" Foreground="#FFFF9C00" Background="#FF4E3D3D" FontWeight="Bold" TextAlignment="Center"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Refresh" Height="22" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="54" />
</Grid>
public class question
{
public string votes { get; set; }
public string answers { get; set; }
public string title { get; set; }
public string body { get; set; }
public string tags { get; set; }
}
public partial class MainWindow : Window
{
ObservableCollection<question> questions = new ObservableCollection<question>();
public MainWindow()
{
questions.Add(new question
{
votes = "2",
answers = "3",
title = "This is a sample title",
body = "This is a sample body text. It should wrap and not look like shit when presented.",
tags = "C#,WPF,XML,JediStyle"
});
this.DataContext = this;
InitializeComponent();
}
}

Binding does not work on fields but on properties.
ObservableCollection<question> questions = new ObservableCollection<question>();
ObservableCollection<question> MyQuestions
{
get { return questions; }
}
And in XAML
ItemsSource="{Binding Path=MyQuestions}"
You also don't have to specify question as a part of path for every binding within particular list item:
Text="{Binding Path=question.tags}" should be Text="{Binding Path=tags}" or even simpler: Text="{Binding tags}"

<ListBox ItemsSource="{Binding Path=questions}" Height="401" HorizontalAlignment="Left" Name="results" VerticalAlignment="Top" Width="260" Margin="0,20,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Path=votes}" FontSize="15" Padding="5" Background="White" Foreground="Black"/>
<TextBlock Text="{Binding Path=answers}" FontSize="15" Padding="5" Background="White" Foreground="Black"/>
</StackPanel>
<StackPanel Orientation="Vertical" Height="Auto" Width="249">
<TextBlock Text="{Binding Path=title}" FontWeight="Bold" Background="#FF92F2CD" Height="22" Width="229" Foreground="Black"/>
<TextBlock Text="{Binding Path=body}" TextWrapping="Wrap" Height="43" Width="231" Background="#FFEFEFEF" Foreground="Black"/>
</StackPanel>
</StackPanel>
<StackPanel>
<TextBlock Text="{Binding Path=tags}" //am not sure from where this tags coming
Foreground="#FFFF9C00" Background="#FF4E3D3D" FontWeight="Bold" TextAlignment="Center"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

I would try to use a ViewModel ...
Good Article
Another Good Article
The two articles highlight the benefits of full binding and go into the NotifyPropertyChanged and commands. Worth a read.