I am new to WPF and I am trying to bind a List of grouped object to a tabControl and I just manage to get halfway there
Here is my C# Code In the constructor :
IEnumerable<Validation> validations = ReflectiveEnumerator.GetEnumerableOfType<Validation>().Where(validation => validation.IsActive);
tabControl.ItemsSource = validations.GroupBy(validation => validation.TabName);
and my xaml code is :
<TabControl x:Name="tabControl" Margin="10,10,10,37" ItemsSource="{Binding Groups}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Key}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding ValidationName}"/>
</WrapPanel>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
and so I get a tab by group which is what I was expecting but within my wrap panel I only have 1 ValidationName per Tab, I was expecting multiple ones. what is missing to have the content panel Iterate through my group.
When I don't group by I have multiple tabItem with the same Name and that's not what I'm looking for.
My Validation class looks like :
public class Validation
{
public string ValidationName {get; private set;}
public string TabName{get; private set;}
public bool IsActive{get; private set;}
}
You could use an ItemsControl in the ContentTemplate of the TabControl:
<TabControl x:Name="tabControl" Margin="10,10,10,37" ItemsSource="{Binding Groups}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Key}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ValidationName}" Margin="10"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
The above sample markup will display a TextBlock per item in each group in a WrapPanel inside each TabItem.
Related
I got a problem which I do not understand. My Visual Studio gives me following 2 errors:
The property "VisualTree" can only be set once.
The property 'VisualTree' is set more than once.
This is my XAML:
<ItemsControl x:Name="SettingsListItemControl">
<TextBlock Text="Settings" FontSize="24" />
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Left" Height="640" VerticalAlignment="Top" Width="360" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:Name="SettingItemTemplate" x:DataType="vm:SettingItemViewModel">
<TextBlock Text="{x:Bind Title}"/>
<ToggleSwitch IsOn="{x:Bind IsActive}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I do not know why I can not bind IsActive, it gives me an error here...
Seems like he also has a problem with DataTemplate.
My question seems pretty basic, I am a beginner when it comes to XAML and DataBinding :)
Thanks for help!
In your ItemTemplate, you need a parent panel for that TextBlock/ToggleSwitch that can hold children, wrap them in a StackPanel or Grid or something. Error gone. :)
So swap it for something like this;
<ItemsControl.ItemTemplate>
<DataTemplate x:Name="SettingItemTemplate" x:DataType="vm:SettingItemViewModel">
<StackPanel>
<TextBlock Text="{x:Bind Title}"/>
<ToggleSwitch IsOn="{x:Bind IsActive}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
I have a listbox in the dataTemplate of an other listbox. I can get selected item of the outer listbox, but I've been trying to get selected item of the inner listbox (name: "ListBoxLetter"), no way ..
Here is my xaml :
<ListBox x:Name="ListBoxOut" ItemsSource="{Binding Letters}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Width="500" Height="60" Background="#16C8DB">
<TextBlock Text="{Binding Date}" />
</StackPanel>
<ListBox x:Name="ListBoxLetter" ItemsSource="{Binding CourriersListe}" SelectedItem="{Binding Selection, Mode=TwoWay}" >
<Interactivity:Interaction.Triggers>
<Interactivity:EventTrigger EventName="SelectionChanged" >
<Command:EventToCommand Command="{Binding SelectionCommand}" CommandParameter="{Binding Selection}" />
</Interactivity:EventTrigger>
</Interactivity:Interaction.Triggers>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Date}" />
<TextBlock Text="{Binding Name}"/>
</StackPanel>
<TextBlock Text="{Binding Title}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>`
"Courriers" is an object of the following class :
public class MyClass
{
public DateTime Date { get; set; }
public List<LetterInfos> CourriersListe { get; set; }
}
And a LetterInfos has a Date, Name and Title.
Selection is a LetterInfos object, and I want to get it when I click on it in my list.
I'm working with mvvm light, so in my ViewModel constructor I have this :
SelectionCommand = new RelayCommand<LetterInfos>(OnSelectionElement);
I tried to move the interactivity paragraph in the outer listbox, but I can only get the MyClass selected item, and I want to select a LetterInfos item..
Anyone could help me ? Thanks !!
After many researches, I think that's not possible to get selectedItem in this situation.
But I found a good solution to this problem : the LongListSelector.
Even if its selectedItem is not bindable, there is a class to add that can make it bindable (to the parameter of a command) : Trouble binding LongListSelector.SelectedItem to MVVM property
I have an MVVM app. I want a collection of buttons to be represented from the ViewModel and be dynamic.
Which means I want to populate the window with controls from the ViewModel.
I tried creating a content control and binding it's Content property to a Grid which I will put buttons in. The binding did not work, it remains empty.
I tried binding it to a simple string, still nothing. I should mention that other simple bindings do work, so that's why it's weird.
The creation of the UserControl:
<TabControl HorizontalAlignment="Left" Height="696" Margin="429,0,0,32" VerticalAlignment="Bottom" Width="552" ItemsSource="{Binding TabCollection}">
<TabControl.Resources>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<cattab:CategoryTab/>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>`
The binding in the UserControl:
<ContentControl HorizontalAlignment="Left" Height="286" Margin="98,152,0,-396" VerticalAlignment="Top" Width="313">
<ContentControl Content="{Binding Favorites}" Margin="0,30,0,0" VerticalAlignment="Top"/>
</ContentControl>`
MainViewModel:
//**** Initilize TabCollection with fake data (temporary)
TabCollection.Add(new CategoryTabViewModel { Header = "בדיקה11" });
TabCollection.Add(new CategoryTabViewModel { Header = "בדיקה2" });
UserControl ViewModel:
public CategoryTabViewModel()
{
SearchText = "bbbaaaa";
Favorites.Add(new Button());
}
The binding of SearchText works, on Favorites it's not
Try to use an ItemsControl
Here's a good tutorial: http://www.wpf-tutorial.com/list-controls/itemscontrol/
<ItemsControl HorizontalAlignment="Left" Height="286" Margin="98,152,0,-396" VerticalAlignment="Top" Width="313" Content="{Binding Favorites}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<controlsToolkit:WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Use a WrapPanel to manage your layout: http://www.wpftutorial.net/WrapPanel.html
After reading your updates I can say that your code is not MVVM compliant because your ViewModel layer is aware of the View layer (you create Buttons in your ViewModel)
What you need to do:
XAML of your CategoryTab
<ItemsControl ItemsSource="{Binding Favorites, Mode=OneWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button/><!--Show whatever you want here-->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
If you want to create new Button every time an object is added to Favorites you will need to make Favorites an ObservableCollection.
I have The following structure
QPage class Object contains a List<List<QLine>>
QLine object contains List<Qword>
every list of words constructs a line and every list of lines consists a group(paragraph) and every list of paragraphs consists a page.
I want to bind the page to structure like this in XAML
<ListView>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock>
</TextBlock>
</StackPanel>
</StackPanel>
</ListView>
where each item of the ListView is a paragraph(List<QLine>) and each vertical stack panel holds an item of the List<QLine> and each item of the horizontal stack panel holds an item of the List<Qword> and the texblock is bound to Qword.text property. I have no idea how to do such binding from the XAML code.
Hopefully I did not miss some list but this should work. Basically it's a ListBox that hosts List<List<QLine>> (called it QPageList). Then you have ItemsControl that hosts each List<QLine> in vertical panel and finally there is another ItemsControl that hosts List<Qword> from QLine (called it QwordList) where each QWord is displayed as TextBlock on horizontal StackPanel
<!-- ItemsSource: List<List<QLine>>, Item: List<QLine> -->
<ListBox ItemsSource="{Binding QPageList}">
<ListBox.ItemTemplate>
<DataTemplate>
<!-- ItemsSource: List<QLine>, Item: QLine -->
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- ItemsSource: QLine.List<QWord>, Item: QWord -->
<ItemsControl ItemsSource="{Binding QwordList}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- Item: QWord -->
<TextBlock Text="{Binding text}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What you are looking for is ListView.ItemTemplate. Basically, you need to provide your list with a way to understand the nested data structure of your rows.
Here is a good tutorial to get you started on ItemTemplates.
Once your list has an item template then you just bind the ListView directly to your data source and that's it.
Hopefuly this will prove helpful. Taken from here
Authors (list)
- - Name
- - Books (list)
| - - Title
| - - Contents
Sample code :
<Window.Resources>
<DataTemplate x:Key="ItemTemplate1">
<StackPanel>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="ItemTemplate2">
<StackPanel>
<TextBlock Text="{Binding Title}"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource AuthorDataSource}}">
<ListBox x:Name="AuthorList" ItemTemplate="{DynamicResource ItemTemplate1}" ItemsSource="{Binding Authors }" >
<ListBox x:Name="BookList" DataContext="{Binding SelectedItem, ElementName=AuthorList}" ItemsSource="{Binding Books }" ItemTemplate="{DynamicResource ItemTemplate2}" />
<TextBlock x:Name="BookContent" DataContext="{Binding SelectedItem, ElementName=BookList}" Text="{Binding Contents }" />
</Grid>
Forward to what Alex is saying, it'd be a good idea to Encapsulate (If that's the correct word here) the object within classes, i.e.:
public class Page
{
public List<Paragraph> Paragraphs { get; set; }
}
public class Paragraph
{
public List<QWord> Sentences { get; set; }
}
public class Sentence
{
public List<QWord> Words { get; set; }
}
That'd help when you bind data in your XAML, i.e. if you look at the tutorial which Alex provided:
<TextBlock Text="Name: " />
<TextBlock Text="{Binding Name}" FontWeight="Bold" />
<TextBlock Text="{Binding Age}" FontWeight="Bold" />
<TextBlock Text=" (" />
<TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
<TextBlock Text=")" />
Hope that helps you.
I have the following problem:
i have some data loaded in my application, that need to be put in a tab control.
The data is in the format:
class objectType1
{
string property_1;
string prorerty_2;
}
class mainObject
{
string mainProperty_1;
string mainProperty_2;
List<objectType1> objectsList;
}
and all the data is loaded in an object of type
List<mainObject> myListofObjects
So far i managed to create the tabitems with respect to myListofObjects item
(ie if the list has 5 objects, 5 tabs are created with the header containing the information mainProperty_1 and mainProperty_2)
now i need to add the data contained in each objectsList into their respective tab...
the mainProperty_1 represents an image, which must be loaded...
<TabControl x:Name="_DataList" Margin="10">
<!-- Header -->
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="18" Source="{Binding mainProperty_1/>
<TextBlock Text="{Binding mainProperty_2}" Margin="2,0,0,0" />
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
<!-- Content -->
<TabControl.ContentTemplate>
<DataTemplate x:Name="objectDataTemplate">
<Grid Margin="5">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding property_1}" ToolTip="{Binding property_2}" IsHitTestVisible="false" Stretch="Uniform"/>
</StackPanel>
</Grid>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
I pass the data to the tabcontrol in code behind with
_DataList.ItemsSource = myListofObjects;
this is not working for the content...
the header loads just fine (both image and the text...)
anyone has any idea how to do it?
Thanks a lot!
your ContentTemplate seems to be wrong:
<TabControl x:Name="_DataList" Margin="10">
<!-- Header -->
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="18" Source="{Binding mainProperty_1/>
<TextBlock Text="{Binding mainProperty_2}" Margin="2,0,0,0" />
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
<!-- Content -->
<TabControl.ContentTemplate><!-- its bound to one mainObject -->
<DataTemplate x:Name="objectDataTemplate">
<!-- if you wanna bind to something from your objectsList you have to threat it like a list, cause it is :) -->
<ListBox Itemssource={Binding objectsList}>
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type objectType1}">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding property_1}" ToolTip="{Binding property_2}" IsHitTestVisible="false" Stretch="Uniform"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
1) Have you tried to connect to list via binding?
var b = new Binding("myListofObjects");
BindingOperations.SetBinding(_DataList, ItemsControl.ItemsSourceProperty, b);
2) If you're using binding, have you set appropriate DataContext?