I'm trying to bind a list of my class into a ListView. I've tried many issues.
There is my c# Code witch show how I define:
public MainWindow()
{
InitializeComponent();
timer.Interval = TimeSpan.FromSeconds(1); // L’intervalle entre chaque tick du timer sera d’une seconde
timer.Tick += new EventHandler(timer_Tick); // A chaque tick, on déclenche l’évènement timer_Tick
MyMP3LIST = new List<ListGrid>();
ListM.DataContext = MyMP3LIST; // ListM = ListView name
// I've tried : ListM.ItemSource = MyMP3LIST;
}
When try to bind :
ListGrid l = new ListGrid(); // My Class
l.IconUri = imagemp3.Source;
l.Title = Ftitle;
l.Length = duration;
l.Album = Falbum;
l.Composer = Fcomposer;
l.Path = openFileDialog1.FileName;
MyMP3LIST.Add(l);
My XAML:
<ListView x:Name="ListM" Width="Auto" ItemsSource="{Binding MyMP3LIST}"
Margin="-3,-0.877,-4,-15.925" SelectionChanged="ListM_SelectionChanged">
Just the first imported file is display into the ListView.
After populating MyMP3LIST Change this:
ListM.DataContext = MyMP3LIST;
To this:
this.DataContext = MyMP3LIST;
And also change this:
<ListView x:Name="ListM" Width="Auto" ItemsSource="{Binding MyMP3LIST}" ../>
To this:
<ListView x:Name="ListM" Width="Auto" ItemsSource="{Binding}" .../>
Also in your ListView you need ItemTemplate to show data. For example:
<ListView x:Name="ListM" Width="Auto" ItemsSource="{Binding}" ...>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Title}" />
<TextBlock Text="{Binding Album}" />
...
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView>
Edit: Based on your comments that you said you want to add item with an OpenFileDialog and you want to update your ListView, MyMP3LIST should be ObservableCollection:
ObservableCollection<ListGrid> MyMP3LIST = new ObservableCollection<ListGrid>();
Sorry for the double answer but comments do not allow code.
This is just a sample so I'm not sure if all the properties are exact, but it should look like this:
<ListView Grid.Row="0" Grid.Column="0" ItemsSource="{Binding Path=YourCollection, Mode=OneWay}"
SelectedItem="{Binding Path=YourSelectedItem, Mode=TwoWay}"
Margin="0"
>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<WrapPanel>
<TextBlock Text="{Binding Path=FieldName1}" />
<TextBlock Text="{Binding Path=FieldName2}" />
</WrapPanel>
<WrapPanel>
<TextBlock Text="{Binding Path=FieldName3}" />
<TextBlock Text="{Binding Path=FieldName4}" />
</WrapPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The Item template can be defined with any kind of WPF control you like for your properties.
Related
I have a listbox containing a choice of text answers taken from the database and containing html languages, such as: <p>, etc. I want to display it so that the html language is not displayed. I tried to display it in the webview, but <p>, etc. is still visible.
XAML:
<ListBox Name="ListOption" Grid.Row="1" Margin="10,20,10,0" Height="auto" xmlns:m="using:KipinSchool_Win10.TryoutData.Models" SelectionChanged="ListAlternatives_SelectionChanged" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate x:DataType="m:DBOption">
<StackPanel Orientation="Horizontal">
<WebView Margin="10,10,10,10" local:MyProperties.HtmlString="{Binding Option}" MinHeight="40" MaxHeight="300" HorizontalAlignment="Stretch" Tag="{Binding OID}"/>
<TextBlock Text="{Binding Option}" Tag="{Binding OID}" FontSize="19"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Code:
string strA = #"SELECT DISTINCT* FROM DBOption WHERE QID='" + question[0] + "'";
var alternative = objConn.Prepare(strA);
ObservableCollection<DBOption> Items = new ObservableCollection<DBOption>();
int i = 0;
while (alternative.Step() == SQLiteResult.ROW)
{
Items.Add(new DBOption(alternative[0].ToString(), alternative[1].ToString(), alternative[2].ToString(), alternative[3].ToString()));
}
Binding myBinding = new Binding();
myBinding.Source = Items;
ListOption.SetBinding(ItemsControl.ItemsSourceProperty, myBinding);
How to handle it?
I tried to display it in the webview, but etc. is still visible. XAML:
I could reproduce your issue, the problem is that you have not set width and height property for WebView. And html string does not contain the content height. So the WebView will not display correctly. Please modify the code like the following.
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal">
<WebView Margin="10,10,10,10"
local:MyProperties.HtmlString="{Binding Option}"
Height="400" Width="200"
HorizontalAlignment="Stretch"
Tag="{Binding OID}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
I have create simple drag drop in WPF. In my application there are two Listviews. I have to drag list items from first listview and drop the item to second listview. I have created custom data template for first listview. When i drag the first listview item into second listview the data template is not customized so items are not displayed. How to display the list items with generic. Please help. My Code is as below,
<Grid Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ListBox
Name="memberCollection"
Grid.Column="1"
Width="150"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
PreviewMouseLeftButtonDown="memberCollection_PreviewMouseLeftButtonDown">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBox Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Grid
Name="gridDrop"
Grid.Column="0"
Margin="20,0,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ListBox.Drop="grid_Drop"
ShowGridLines="True">
<ListBox
Grid.Row="0"
Grid.Column="0"
Margin="10,10,0,0"
AllowDrop="True" />
</Grid>
</Grid>
Code Behind
ObservableCollection<Member> member = new ObservableCollection<Member>();
public MainWindow()
{
InitializeComponent();
member.Add(new Member { Name = "Karthick", ID = "20011", Address = "10, MainRoad, Chennai" });
memberCollection.ItemsSource = member;
DataContext = new Member();
}
private void memberCollection_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
object selectedMember = memberCollection.SelectedItem as Member;
if (selectedMember != null)
DragDrop.DoDragDrop(memberCollection, selectedMember, DragDropEffects.All);
}
private void grid_Drop(object sender, RoutedEventArgs e)
{
ListBox listContent = e.Source as ListBox;
if (listContent != null)
Console.WriteLine("", Grid.GetColumn(listContent), Grid.GetRow(listContent));
DataObject item = (((DragEventArgs)e).Data) as DataObject;
object Target = ((Grid)(sender)).DataContext;
object listItem = item.GetData(Target.GetType());
if (listItem != null)
{
//listContent.Items.Add(listItem.Name.ToString());
//listContent.Items.Add(listItem.ID.ToString());
//listContent.Items.Add(listItem.Address.ToString());
//listContent.ItemTemplate = memberCollection.ItemTemplate;
listContent.Items.Add(listItem);
}
}
If you define the DataTemplate as a reusable resource, you can use it in both ListBoxes:
<Grid Margin="0,20,0,0">
<Grid.Resources>
<DataTemplate x:Key="dataTemplate">
<StackPanel>
<TextBox Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ListBox
Name="memberCollection"
Grid.Column="1"
Width="150"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
PreviewMouseLeftButtonDown="memberCollection_PreviewMouseLeftButtonDown"
ItemTemplate="{StaticResource dataTemplate}" />
<Grid
Name="gridDrop"
Grid.Column="0"
Margin="20,0,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ListBox.Drop="grid_Drop"
ShowGridLines="True">
<ListBox
Grid.Row="0"
Grid.Column="0"
Margin="10,10,0,0"
AllowDrop="True"
ItemTemplate="{StaticResource dataTemplate}"/>
</Grid>
</Grid>
If you want to display some other properties of the dropped Member in the second ListBox, you should define another ItemTemplate:
<ListBox
Grid.Row="0"
Grid.Column="0"
Margin="10,10,0,0"
AllowDrop="True">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Id}" />
<TextBlock Tag="{Binding Address}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'm having some trouble getting my semantic zoom bind correctly to my CollectionViewSource. I'm pretty new to MVVM, so I'm not sure i have stuff setup correctly.
View Model
private async void GetData()
{
// Simulate pulling data from api
string response;
StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri(#"ms-appx:///DesignData/GetLive.json"));
using (StreamReader sRead = new StreamReader(await file.OpenStreamForReadAsync()))
response = await sRead.ReadToEndAsync();
// Deserialize data to class
LiveStreamModel liveGames = JsonConvert.DeserializeObject<LiveStreamModel>(response);
Schedules = liveGames.schedule;
// Group data by event
var groupData = liveGames.schedule.GroupBy(a => a.#event);
// Set cvs source to grouped data
ScheduleSource = new CollectionViewSource() { IsSourceGrouped = true, Source = groupData };
}
private CollectionViewSource scheduleSource;
public CollectionViewSource ScheduleSource
{
get
{
return scheduleSource;
}
set
{
scheduleSource = value;
RaisePropertyChanged("ScheduleSource");
}
}
View
Page.Resources>
<DataTemplate x:Key="ZoomedInTemplate">
<StackPanel Orientation="Horizontal" MinWidth="200" Margin="12,6,0,6">
<!--<Image Source="{Binding ImagePath}" Height="80" Width="80"/>-->
<StackPanel Margin="20,0,0,0">
<TextBlock Text="{Binding homeTeam}" Style="{StaticResource BaseTextBlockStyle}"/>
<TextBlock Text="{Binding awayTeam}" TextWrapping="Wrap" HorizontalAlignment="Left" Width="300"
Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="ZoomedInGroupHeaderTemplate">
<TextBlock Text="{Binding event}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>
<DataTemplate x:Key="ZoomedOutTemplate">
<TextBlock Text="{Binding event}" Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SemanticZoom x:Name="GetLiveZoom" >
<SemanticZoom.ZoomedInView>
<GridView x:Name="GetLiveGrid" ItemsSource="{Binding ScheduleSource.View}" ItemTemplate="{StaticResource ZoomedInTemplate}" SelectionMode="Single"
ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}" />
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView x:Name="GetLiveList" ItemsSource="{Binding ScheduleSource.View.CollectionGroups}" ItemTemplate="{StaticResource ZoomedOutTemplate}" SelectionMode="None"
ScrollViewer.IsVerticalScrollChainingEnabled="False"/>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
</Grid>
When debugging, my data is getting grouped properly by #event, but setting the source of the cvs to the grouped data and binding that to the semantic zoom control results in nothing showing up.
You need to fix the following data binding:
1) For ZoomedInGroupHeaderTemplate, because the Source is grouped data, so if you want to show the group name in ZoomedInView, set data binding for Key property:
<DataTemplate x:Key="ZoomedInGroupHeaderTemplate">
<TextBlock Text="{Binding Key}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>
2) For ZoomedOutTemplate, the Source is ICollectionView.CollectionGroups, ref MSDN -> ICollectionViewGroup interface
We need to use ICollectionViewGroup.Group property to get group name in ZoomedOutView:
<DataTemplate x:Key="ZoomedOutTemplate">
<TextBlock Text="{Binding Group.Key}" Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>
Check my completed sample in Github
Screenshot for ZoomedInView:
Screenshot for ZoomedOutView:
I'm trying to create an ItemTemplate for a ListBox programmatically but it doesn't work. I know in XAML I can have something like:
<ListBox x:Name="listbox" BorderThickness="0" Margin="6" Height="400">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Margin="0" Background="Red" Foreground="White" FontSize="18" Text="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But when I'm trying to have the above result programmatically I face a problem which is binding the TextBox.TextProperty:
var textblock = new FrameworkElementFactory(typeof(TextBlock));
// Setting some properties
textblock.SetValue(TextBlock.TextProperty, ??);
var template = new ControlTemplate(typeof(ListBoxItem));
template.VisualTree = textblock;
Please help me on this issue. I couldn't find anything on the web about it.
Thanks in advance.
Try use dot . in Binding, this is the equivalent of {Binding}.
Example:
XAML
<Window x:Class="MyNamespace.MainWindow"
...
Loaded="Window_Loaded">
<ListBox Name="MyListBox" ... />
</Window>
Code-behind
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
var textBlockFactory = new FrameworkElementFactory(typeof(TextBlock));
textBlockFactory.SetValue(TextBlock.TextProperty, new Binding(".")); // Here
textBlockFactory.SetValue(TextBlock.BackgroundProperty, Brushes.Red);
textBlockFactory.SetValue(TextBlock.ForegroundProperty, Brushes.Wheat);
textBlockFactory.SetValue(TextBlock.FontSizeProperty, 18.0);
var template = new DataTemplate();
template.VisualTree = textBlockFactory;
MyListBox.ItemTemplate = template;
}
}
Try this, by binding the "listbox" with ItemsSource and specify the datatemplate below like if you want to bind name then just write {Binding Name}
<ListBox x:Name="listbox" BorderThickness="0" Margin="6" Height="400" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Margin="0" Background="Red" Foreground="White" FontSize="18" Text="{Binding Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I m new to wpf.In order to get check list box functionality ,I have added below xaml to my code,but there is no output in my screen.only blank,what it could be?
<TabItem Header="Samples" >
<ListBox Margin="10" Width="373" Height="236">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="MyText"/>
<CheckBox IsChecked="False"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</TabItem>
just have a look at this basic sample
http://merill.net/2009/10/wpf-checked-listbox/
List box is a bit wired for such task..Have a look at ItemsControl.
Here is the code i use:
<ItemsControl
ItemsSource="{Binding ***}" IsTabStop="False">
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox
Content="{Binding Name}"
IsChecked="{Binding IsSelected}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Replace your code with this
<TabItem Header="Roles" >
<ListBox Margin="10" Width="373" Height="236">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="MyText"/>
<CheckBox IsChecked="False"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBoxItem>Hi</ListBoxItem>
</ListBox>
</TabItem>
and tell us if it still shows blank
Better still, just use the new CheckListBox control in the Extended WPF Toolkit
http://wpftoolkit.codeplex.com/wikipage?title=CheckListBox&referringTitle=Home
This might help
1.Inorder to work datatemplate you must specify itemsource, here i have bounded a Stateslist a collection of items into it.
2.Also set the Datacontext to ViewModel or the CodeBehind as datacontext.
3.Datacontext will distribute the StateList properties collection to the listbox itemsource
using codebehind -
public Window1()
{
InitializeComponent();
this.DataContext = this;
LoadData();
}
using viewmodel
public Window1()
{
InitializeComponent();
DataContext = new Window1ViewModel();
LoadData();
}
//MyItemsource Property for listbox
private ObservableCollection<States> _stateslist;
public ObservableCollection<States> StatesList
{
get { return _stateslist; }
set
{
_stateslist = value;
RaisePropertyChanged(() => StatesList);
}
}
// Sample Data Loading
public void LoadData()
{
StatesList = new ObservableCollection<States>();
StatesList.Add(new States
{
StateName = "Kerala"
});
StatesList.Add(new States
{
StateName = "Karnataka"
});
StatesList.Add(new States
{
StateName = "Goa"
});
}
Window1.Xaml
<ListBox ItemsSource="{Binding StatesList}" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<CheckBox IsChecked="{Binding IsSelected"} Content="{Binding StateName}" />
<TextBox Text="{Binding TextBoxValue}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Check this out it isworking..you are using TabItem but you didnt define it in TabControl
<TabControl>
<TabItem Header="Tab1">
<ListBox Margin="10" Width="373" Height="236">
<ListBox.Items>
<StackPanel Orientation="Horizontal">
<TextBlock Text="MyText"/>
<CheckBox IsChecked="False"/>
</StackPanel>
</ListBox.Items>
</ListBox>
</TabItem>
</TabControl>
If you are new in WPF use XamlPadX it will give you great help to practice out on it..